Pill胶囊tab组件

pill组件是独立的tab切换组件,只包含tab头,没有tab体,类似胶囊形状,背景块可动画移动。

前言

Tab组件通常需要有tab头和tab体,而本组件只有tab头,任意的父子节点结构均可以作为tab体。另外本组件的选项背景可以像游标一样在被选中时以动画移动。

简单使用

使用ax-pill标签表示本组件。通过属性content传递简单的内容即可,多项则以英文逗号分隔。

  • 输出
  • HTML
  •                 
                    
                

内容直接写在标签内部也是可以的。

  • 输出
  • HTML
  • 军事类,人物志类,娱乐类
  •                 
                    
                

激活项

默认激活第一项,可通过属性active设置被激活项的索引,第一项为0

  • 输出
  • HTML
  •                 
                    
                

禁用项

可通过属性disable设置被激活项的索引,第一项为0;如果需要禁用多项则以英文逗号分隔索引。

  • 输出
  • HTML
  •                 
                    
                

尺寸

通过属性size定义胶囊尺寸,支持三种尺寸,详细说明如下:

  • size=sm:小尺寸,高度24px(2.4rem)
  • size=md:中尺寸,高度32px(3.2rem),默认
  • size=lg:大尺寸,高度40px(4rem)
  • 输出
  • HTML
  •