为 <a>
、<button>
或 <input>
元素添加按钮类(button class)即可使用 AuxUI 提供的样式。
针对组件的注意事项
虽然按钮类可以应用到 <a>
和 <button>
元素上,但是,导航和导航条组件只支持 <button>
元素。
链接被作为按钮使用时的注意事项
如果 <a>
元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置 role="button"
属性。
预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
尺寸
需要让按钮具有不同尺寸吗?使用 .btn-lg
、.btn-sm
或 .btn-xs
就可以获得不同尺寸的按钮。
通过给按钮添加 .btn-block
类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
激活状态
当按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于 <button>
元素,是通过 :active
状态实现的。对于 <a>
元素,是通过 .active
类实现的。然而,你还可以将 .active
应用到 <button>
上(包含 aria-pressed="true"
属性)),并通过编程的方式使其处于激活状态。
button 元素
由于 :active
是伪状态,因此无需额外添加,但是在需要让其表现出同样外观的时候可以添加 .active
类。
链接(<a>
)元素
可以为基于 <a>
元素创建的按钮添加 .active
类。
禁用状态
通过为按钮的背景设置 opacity
属性就可以呈现出无法点击的效果。
button 元素
为 <button>
元素添加 disabled
属性,使其表现出禁用状态。
跨浏览器兼容性
如果为 <button>
元素添加 disabled
属性,Internet Explorer 9 及更低版本的浏览器将会把按钮中的文本绘制为灰色,并带有恶心的阴影,目前我们还没有解决办法。
链接(<a>
)元素
为基于 <a>
元素创建的按钮添加 .disabled
类。
我们把 .disabled
作为工具类使用,就像 .active
类一样,因此不需要增加前缀。