File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 77<LivePlayground : code ="`
88() => {
99 return (
10- <Space >
10+ <div className = ' flex flex-wrap gap-2 ' >
1111 <Tag >默认</Tag >
1212 <Tag color =' success ' >成功</Tag >
1313 <Tag color =' warning ' >警告</Tag >
1414 <Tag color =' danger ' >错误</Tag >
15- </Space >
15+ <Tag closable closeAriaLabel =' 关闭标签 ' >可关闭</Tag >
16+ <Tag closable closeIcon =' 移除 ' closeAriaLabel =' 移除标签 ' >自定义关闭</Tag >
17+ </div >
1618 )
1719}
1820`" />
1921
22+ ## 可访问性
23+
24+ 可关闭标签会渲染一个真实按钮,并使用 ` closeAriaLabel ` 提供可访问名称。` onClose ` 会收到关闭按钮点击事件;调用 ` event.preventDefault() ` 可以阻止标签默认移除,适合需要二次确认或受控删除的场景。
25+
2026## API
2127
2228| 属性 | 说明 | 类型 | 默认值 |
2329| --- | --- | --- | --- |
24- | color | 颜色 | ` string ` | - |
30+ | color | 颜色 | ` 'default' \| 'success' \| 'warning' \| 'danger' ` | ` 'default' ` |
31+ | closable | 是否可关闭 | ` boolean ` | ` false ` |
32+ | closeIcon | 自定义关闭控件内容 | ` ReactNode ` | ` '×' ` |
33+ | closeAriaLabel | 关闭按钮的可访问名称 | ` string ` | ` 'Close tag' ` |
34+ | onClose | 关闭回调,调用 ` event.preventDefault() ` 可阻止默认移除 | ` (event: MouseEvent<HTMLButtonElement>) => void ` | - |
You can’t perform that action at this time.
0 commit comments