Skip to content

切换器的类型:

  • 多项切换器。在两个及两个以上可选项之间选中其一,例如 直播/推荐/关注
  • 单项切换器 / 布尔切换器。最常用的场景是 开/关,由于大部分情况下两个状态是互为反义且可通过用布尔值 true/false 来简单区分 ,因此单项切换器也可叫 布尔切换器

API

NameDescTypeDefaultVue OnlyReact Only
items选项名称数组string[]["Item A", "Item B"]
activeIndex默认选中的项number0
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>