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