nuiButton 指令为原生的 <button> 或 <a> 添加样式。元素原有的语义、键盘行为以及在表单中的作用都保持不变;指令只负责把输入属性同步到样式表所匹配的 data 属性上。
执行操作时用 <button>,页面导航时用 <a>。两者外观相同,也都支持 disabled。
变体
四种填充样式,从最醒目到最低调。每个视图只用一个实心按钮来承载主要操作。
色调
色调决定配色:accent 用于主要流程,neutral 用于次要操作,danger 用于破坏性操作。
尺寸
三种高度:28、36 和 44 像素。即使是最小的尺寸,也满足 WCAG 2.2 的最小目标尺寸要求。
链接与禁用按钮
原生链接无法禁用,因此禁用的链接会获得 aria-disabled="true",其点击也会被拦截,即使使用了 routerLink 也是如此。
按压效果
依次按住每个按钮试试。press 决定按钮被按住时的效果,motion 决定它回弹时使用的弹簧。在任意元素上设置 data-nui-press,即可作用于其中的所有内容。
边角、圆角与密度
corners 改变边角的形状,radius 改变边角的大小,density 改变按钮占用的空间,但按钮绝不会小于 24px 的目标尺寸。不支持 corner-shape 的浏览器会把边角绘制成圆角。