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 的浏览器会把边角绘制成圆角。