Group Button按钮组

按钮组是tab头的一种形式,已经被集成在Tab组件模块使用;因其由css+html打造,当然也可以用在网页body部分的任何地方,也可以被其他自定义组件或模块打包引用。

简单使用

将多个ax-btn按钮组件使用_group-btn元素包裹即可。

  • 输出
  • HTML
  • wrap为SPAN标签

    读书 看报 玩手机 旅行

    wrap为A标签

    读书 看报 玩手机 旅行
  •                 
                    
                

状态

分组按钮有三种状态:regular常规、selected选中和disabled禁用。

disabled是按钮自身就有的属性,selected是分组按钮下的特有属性。

  • 输出
  • HTML
  • wrap为SPAN标签

    读书 看报 玩手机 旅行

    wrap为A标签

    读书 看报 玩手机 旅行
  •                 
                    
                

彩色按钮

可以对ax-btn标签使用theme属性,以创建多色按钮组。

  • 输出
  • HTML
  • 单色

    读书 看报 玩手机 旅行

    多色

    读书 看报 玩手机 旅行
  •                 
                    
                

分割线

如果对ax-btn标签使用theme属性,会导致背景色连成一片,所以可以对_group-btn追加separated属性以实现按钮分割线效果。

  • 输出
  • HTML
  • 读书 看报 玩手机 旅行
  •                 
                    
                

自定义圆角

按钮组的首尾按钮均有圆角,该圆角可通过按钮组css中的--_radius-btn变量来定义。

  • 输出
  • HTML
  • 读书 看报 玩手机 旅行
  •