设计
设计指南
设计原则
样式指南
设计资源
Klein - Figma
Klein Font
官方图标库
开发
开发文档
React
Vue Web
敬请期待
开发资源
GitHub 代码仓库
生态产品
生态产品
Orion Fonts
敬请期待
Orio Market
敬请期待
Klein Pro
敬请期待
Klein Editor
敬请期待
标签 Tag
用于标记事物的属性和维度。
进行分类。
基础示例
基础使用。
省略用法
超出长度省略。
删除标签
支持标签删除功能。
不同类型的标签
通过type属性展示不同类型的标签。
字号搭配
不同大小标签和字体的搭配建议。
标签可选中
通过checked属性控制选中状态。
包含辅助文案
通过help属性定义辅助文案。
内容为image
支持背景为图片。
Tag Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| size | 尺寸 | "large" | - |
| closable | 标签是否可以关闭 | boolean | - |
| closeIcon | 自定义关闭按钮 | ReactNode | - |
| color | 标签色 | string | - |
| visible | 是否显示标签 | boolean | - |
| onClose | 关闭标签后的回调 | ((e: MouseEvent<HTMLElement, MouseEvent>) => void) | - |
| iconNode | 自定义icon | ReactNode | - |
| disabled | 是否禁用 | boolean | - |
| type | 类型 | "line" | - |
| width | 设置宽度超出省略 | number | - |
| maxWidth | 设置最大宽度超出省略 | number | - |
CheckAbleTag Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| checked | 是否选中 | boolean | - |
| help | 辅助文案 | ReactNode | - |
| onChange | 选择事件 | ((tag: string, checked: boolean) => void) | - |
| imageProps | 设置Image组件属性 | ImageProps | - |
| size | 尺寸 | "large" | - |
| closable | 标签是否可以关闭 | boolean | - |
| closeIcon | 自定义关闭按钮 | ReactNode | - |
| color | 标签色 | string | - |
| visible | 是否显示标签 | boolean | - |
| onClose | 关闭标签后的回调 | ((e: MouseEvent<HTMLElement, MouseEvent>) => void) | - |
| iconNode | 自定义icon | ReactNode | - |
| disabled | 是否禁用 | boolean | - |
| type | 类型 | "line" | - |
| width | 设置宽度超出省略 | number | - |
| maxWidth | 设置最大宽度超出省略 | number | - |
贡献者
