勾选指示器
@astryxdesign/core v0.7.1 · CheckIndicator
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
state | 'unchecked' | 'checked' | — | 必需。默认在未选中时什么都不画。替换图形可以两种状态都画。 |
size | 'sm' | 'md' | 'md' | 写到元素上。图形本身两种尺寸都是 1rem,和小图标一致。 |
isDisabled | boolean | false | 只改变外观。选中的图形用禁用色。禁用的语义留在外面的行上。 |
插槽
- 默认插槽在每种状态都替换标记,选中与否都一样。宿主用它传入等待中的转圈。
- 插槽里有可渲染内容时,用 1rem 的盒子占住位置。
- 没有可渲染内容时,未选中的勾不渲染。用 isRenderable 判断。条件为假时不能把已选中的勾删掉。
- 插槽内容只作装饰。不要放可聚焦控件。
无障碍
- 勾被画出来,或插槽占住位置时,根元素是
aria-hidden="true"。 - 组件不设置交互角色,也不提供点击或键盘行为。
- 传入的角色、Tab 顺序、可编辑属性,以及以 aria 开头的属性会被丢掉。
- 未选中且插槽为空时,暴露的元素为空。
主题
没有外框类。选中的勾就是图标本身。插槽占位是 .astryx-check-indicator,宽高 1rem。
- 选中用强调色图标,禁用用禁用色。
data-size是 sm 或 md。- 行禁用时设置
data-disabled。