表格选择工具栏
@astryxdesign/core v0.7.1 · TableSelectionToolbar
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
count | number | 0 | 选中了几行。没给 selection 时用它。 |
selection | TableSelectionState | — | useTableSelectionState 返回的 selectionState。给了就代替 count,并由它驱动清空命令。 |
label | string | 内置文案 | 工具栏的无障碍名称。默认是 Bulk actions。 |
clearLabel | string | 内置文案 | 清空整个选择的按钮文字。默认是 Unselect All。 |
size | 'sm' | 'md' | 'lg' | 'sm' | 工具栏高度档。清空按钮跟着它走。 |
variant | SectionVariant | 'muted' | 底色:section 用表面色,muted 用弱化底,transparent 不铺底。 |
事件
clear():点击清空按钮时触发。传了selection时,组件自己先把选中的键清空,再发出这个事件。
插槽
| 插槽 | 插槽参数 | 说明 |
|---|---|---|
start | — | 产品自己的操作按钮,排在逻辑起点。里面的控件不会自动继承 size,需要自己设。 |
default | — | 位置和 start 一样。留给旧代码;两个都给时以 start 为准。 |
label | { count: number } | 换掉可视的计数文字,用来做本地化或业务自己的说法。 |
原生属性
根元素是一个带 role="toolbar" 和 aria-orientation="horizontal" 的 <div>。
以下内容落到根元素上:
- HTML 属性。
aria-*属性。data-*属性。class。style。- 原生事件监听器。
三句文案来自多语言消息:无障碍名称(Bulk actions)、计数文字({count} selected)和清空按钮文字(Unselect All)。调用 provideAstryxLocale('zh-CN') 后变成中文;label、clearLabel 和 label 插槽可以逐个替换它们。
传了 selection 且一个都没选中时,整条不渲染。用 count 的老写法始终渲染,固定条数的工具栏位置不会跳。
React 专有的两个属性不在 Vue 版里:xstyle 换成 class 或 style,工具栏的位置交给外层布局。renderSelectionLabel 和 startContent 换成了 label 和 start 插槽。