标签组件

@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 |

用法

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) => void;

点击事件回调

SelectableTag参数说明

selected?: boolean

标签的选中状态，true为选中，false为没选中

size?: ESelectTagSize

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

onClick?: (e:MouseEvent) => void;

点击事件回调

extraCls?: string

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