EtToolButton · 工具区按钮
大钮(图标行 + caption)与小钮(图标 + ScreenTip)两种形态,尺寸走令牌、组内齐次。
API
Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| size | String | 'large' | 形态:large = 图标行 + caption 大钮;small = 图标 + ScreenTip 小钮 |
| icon | String | '' | 图标名:第 ② 层组件语义名或第 ③ 层领域名(交给 EtIcon 解析与兜底) |
| label | String | '' | large = caption 文本;small = 可访问名来源(按钮文案 ≤4 字) |
| active | Boolean | false | 命令激活/选中态(aria-pressed) |
| disabled | Boolean | false | 禁用态,点击双保险拦截 |
| caret | Boolean | false | 「按钮+下拉」形态的下拉指示,渲染在 caption 行右侧 |
| tip | String | Object | null | small 钮的 ScreenTip:字符串 = 标题;对象 = { title, desc?, combo? } |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
| click | e | 被点击;载荷 = 原生 MouseEvent。绑了 command 时执行由消费方在 @command 侧决定 |
键盘 · 可访问名 · 密度
| 键盘 | 不接管按键 |
|---|---|
| 可访问名 | aria-labelaria-pressedaria-label ← label |
| 密度 | --et-size-toolbtn-large--et-size-toolbtn-small--et-toolbtn-caption-fg--et-toolbtn-caption-font--et-toolbtn-caption-gap--et-toolbtn-caption-line-height--et-toolbtn-caption-max-width--et-toolbtn-caret-size--et-toolbtn-fg--et-toolbtn-gap--et-toolbtn-icon-box--et-toolbtn-radius--et-toolbtn-radius-large |
行为
- large:固定方形图标盒 + caption 行;caption 为空且无 caret 时 caption 整体不渲染。
- small:只渲染图标;有
tip时用EtScreenTip包裹,无tip走直通件(不多包 DOM,不破坏宿主 flex 行的条目间距)。 - 图标未命中不渲染空白:回落显式兜底图标 + dev warn(见 EtIcon)。
label为空时 small 钮没有可访问名,G4 会红。
令牌与门禁
--et-size-toolbtn-large/--et-size-toolbtn-small/--et-toolbtn-icon-box/--et-toolbtn-caption-line-height。- G2:同组条目要么全有图标要么全纯文字,禁混排。
- G7:本件不出现 px 字面量。