@beisen-phoenix/tag

标签组件

@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,一般用于覆盖组件默认样式使用