Skip to content

Commit 6f2b6c8

Browse files
committed
docs(ui): document closable Tag
1 parent 7e2d8c4 commit 6f2b6c8

1 file changed

Lines changed: 13 additions & 3 deletions

File tree

docs/components/tag.md

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,28 @@
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` | - |

0 commit comments

Comments
 (0)