组件
ToggleGroup
使用共享移动激活层的互斥单选控件
ToggleGroup
ToggleGroup 用于把多个互斥选项组合成一个切换栏。所有选项共享同一个移动激活层。
导入
import { ToggleGroup, ToggleGroupItem } from "@downcity/ui";示例
import { ToggleGroup, ToggleGroupItem } from "@downcity/ui";
export function ViewModeToggle() {
return (
<ToggleGroup defaultValue={["list"]}>
<ToggleGroupItem value="list">List</ToggleGroupItem>
<ToggleGroupItem value="grid">Grid</ToggleGroupItem>
</ToggleGroup>
);
}可用附加能力
orientationspacingvariantsize
使用建议
- 2 到 5 个清晰选项很适合
ToggleGroup - ToggleGroup 固定为互斥单选；并行状态请使用多个独立的
Toggle - 如果是面板切换，优先考虑 Tabs