# @beisen-phoenix/tag

> > @beisen-phoenix/tag

Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-phoenix/tag
pnpm add @beisen-phoenix/tag
yarn add @beisen-phoenix/tag
bun add @beisen-phoenix/tag
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.55 |
| Published | 2019-11-25 |
| First published | 2019-03-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 29.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-phoenix/tag
- npm.io page: https://npm.io/package/@beisen-phoenix/tag

## Dependencies (3)

- [@beisen-phoenix/tooltip](https://npm.io/package/@beisen-phoenix/tooltip.md) ^3.3.55
- [@beisen-phoenix/style-token](https://npm.io/package/@beisen-phoenix/style-token.md) ^3.3.55
- [@beisen-phoenix/common-utils](https://npm.io/package/@beisen-phoenix/common-utils.md) ^3.3.55

## Recent versions

- 3.3.55 (latest) — 2019-11-25
- 3.2.44-rc.1 (rc) — 2019-10-24
- 3.3.54 — 2019-11-25
- 3.3.53 — 2019-11-25
- 3.3.52 — 2019-11-24
- 3.3.51 — 2019-11-23
- 3.3.50 — 2019-11-22
- 3.3.49 — 2019-11-22
- 3.3.47 — 2019-11-22
- 3.3.46 — 2019-11-22
- 3.3.45 — 2019-11-21
- 3.3.43 — 2019-11-21
- 3.3.42 — 2019-11-21
- 3.3.41-beta.1 — 2019-11-21
- 3.3.41 — 2019-11-21
- … 370 more at https://npm.io/package/@beisen-phoenix/tag/versions

## README

# 标签组件

> @beisen-phoenix/tag

## 概述

> 进行标记和分类的小标签。

## API

不可选择标签
| 参数 | 说明 | 类型 | 默认值 | 是否必传 |
| --- | --- | --- | --- | --- |
| type | 按钮的类型,可选值为'standard'和'circle'  | string | 'standard' | No |
| theme | 主题类型,可选值为'light'和'dark' | string | 'dark' | No |
| fit | 深色适配，当前标签是否显示在深色背景上。当标签显示在深色背景上时，自动做颜色调整 | boolean | - | No |
| color | 主题颜色,只支持#ffffff这样的颜色格式。如果是其他颜色格式，请做一次转换。 | string | - | No |
| extraCls | 自定义组件容器class,一般用于覆盖组件默认样式使用 | string | - | No |
| onClick | 点击事件回调 | (e:MouseEvent) => void | - | No |

可选择标签
| 参数 | 说明 | 类型 | 默认值 | 是否必传 |
| --- | --- | --- | --- | --- |
| selected | 标签的选中状态 | boolean | false | No |
| disabled | 标签是否禁用 | string | false | No |
| size | 标签的大小，默认为正常大小，可选有'default'和'lg' | string | 'default' | No |
| extraCls | 自定义组件容器class,一般用于覆盖组件默认样式使用 | string | - | No |
| onClick | 点击事件回调 | (e:MouseEvent) => void | - | No |

## 用法

```typescript
import React from 'react';
import Tag, {SelectableTag} from '@beisen-phoenix/tag';

export default function TagEx(props) {
  return <>
    <Tag type="standard" theme='light' color="#1890ff">xxxxs</Tag>
    <Tag type="standard" theme='dark' color="#1890ff">xxxxs</Tag>
    <Tag type="circle" theme='light' color="#1890ff">xxxxs</Tag>
    <Tag type="circle" theme='dark' color="#1890ff">xxxxs</Tag>
    <SelectableTag maxWidth={70} selected={true} onClick={() => void} size="lg">可选择标签</SelectableTag>
  </>
  
}
```

## 默认Tag参数说明

### type: string
按钮的类型， 可选值为standard | circle 默认值为default。当为standard的时候，显示的是小圆角，当为circle的时候，显示的是大圆角

### theme: string
主题类型（仅小圆角支持，大圆角无主题类型），可选值为light | dark。默认值为dark。当为light的时候，显示浅色底，深色字和边框，当为dark时，显示深色底，和白色字

### color: string
主题颜色，只支持#ffffff这样的颜色格式。如果是其他颜色格式，请做一次转换。

### fit: boolean
深色适配，当标签显示在深色背景上时，自动做颜色调整

### onClick: (e:MouseEvent<HTMLDivElement>) => void;
点击事件回调


## SelectableTag参数说明

### selected?: boolean
标签的选中状态，true为选中，false为没选中

### size?: ESelectTagSize

标签的大小，默认为正常大小，可选有'lg'，更大一点

### onClick?: (e:MouseEvent<HTMLDivElement>) => void;
点击事件回调

### extraCls?: string
自定义组件容器class,一般用于覆盖组件默认样式使用

---
_Source: https://npm.io/package/@beisen-phoenix/tag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._