切换器的类型:
多项切换器
。在两个及两个以上可选项之间选中其一,例如直播/推荐/关注
。单项切换器
/布尔切换器
。最常用的场景是开/关
,由于大部分情况下两个状态是互为反义且可通过用布尔值true/false
来简单区分 ,因此单项切换器也可叫布尔切换器
。
API
Name | Desc | Type | Default | Vue Only | React Only |
---|---|---|---|---|---|
items | 选项名称数组 | string[] | ["Item A", "Item B"] | ||
activeIndex | 默认选中的项 | number | 0 | ||
onSwitch | 选项切换后自动调用此函数 | (itemIndex: number) => {} |
Usage
多项切换单项切换
jsx
<div className="flex flex-col gap-4 p-5 rounded-lg bg-light dark:bg-dark">
多项切换
<Switch items={["Light Mode", "Dark Mode"]} />
<Switch items={["直播", "推荐", "热门"]} />
单项切换
<Switch items={["开", "关"]} />
<Switch items={["已启用", "未启用"]} />
</div>