@beisen-phoenix/tag v3.3.55
标签组件
@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,一般用于覆盖组件默认样式使用
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago