项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。

EtToolButton · 工具区按钮 ​

大钮(图标行 + caption)与小钮(图标 + ScreenTip)两种形态,尺寸走令牌、组内齐次。

API ​

import { EtToolButton } from '@wil-works/evoke-tools-ui'公共工具工具区原子件

Props

名称类型默认说明
sizeString'large'形态:large = 图标行 + caption 大钮;small = 图标 + ScreenTip 小钮
iconString''图标名:第 ② 层组件语义名或第 ③ 层领域名(交给 EtIcon 解析与兜底)
labelString''large = caption 文本;small = 可访问名来源(按钮文案 ≤4 字)
activeBooleanfalse命令激活/选中态(aria-pressed)
disabledBooleanfalse禁用态,点击双保险拦截
caretBooleanfalse「按钮+下拉」形态的下拉指示,渲染在 caption 行右侧
tipString | Objectnullsmall 钮的 ScreenTip:字符串 = 标题;对象 = { title, desc?, combo? }

Emits

事件载荷说明
clicke被点击;载荷 = 原生 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 字面量。