切换开关，是复选框的替代方案。
<Switch defaultChecked />
此组件继承自 Switch primitive 的 props，并支持 通用的 margin props。
| 属性 | 类型 | 默认值 |
|---|---|---|
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "classic" | "surface" | "soft" | "surface" |
color | enum | 无默认值 |
highContrast | boolean | 无默认值 |
radius | "none" | "small" | "medium" | "large" | "full" | 无默认值 |
使用 size 属性来控制开关的尺寸。
<Flex align="center" gap="2">
<Switch size="1" defaultChecked />
<Switch size="2" defaultChecked />
<Switch size="3" defaultChecked />
</Flex>
使用 variant 属性来控制开关的视觉样式。
<Flex gap="2">
<Flex direction="column" gap="3">
<Switch variant="surface" />
<Switch variant="classic" />
<Switch variant="soft" />
</Flex>
<Flex direction="column" gap="3">
<Switch variant="surface" defaultChecked />
<Switch variant="classic" defaultChecked />
<Switch variant="soft" defaultChecked />
</Flex>
</Flex>
使用 color 属性来指定特定的 颜色。
<Flex gap="2">
<Switch color="indigo" defaultChecked />
<Switch color="cyan" defaultChecked />
<Switch color="orange" defaultChecked />
<Switch color="crimson" defaultChecked />
</Flex>
在亮色模式下，使用 highContrast 属性来增加颜色对比度。
<Grid rows="2" gapX="2" gapY="3" display="inline-grid" flow="column">
<Switch color="indigo" defaultChecked />
<Switch color="indigo" defaultChecked highContrast />
<Switch color="cyan" defaultChecked />
<Switch color="cyan" defaultChecked highContrast />
<Switch color="orange" defaultChecked />
<Switch color="orange" defaultChecked highContrast />
<Switch color="crimson" defaultChecked />
<Switch color="crimson" defaultChecked highContrast />
<Switch color="gray" defaultChecked />
<Switch color="gray" defaultChecked highContrast />
</Grid>
使用 radius 属性来指定特定的圆角值。
<Flex gap="3">
<Switch radius="none" defaultChecked />
<Switch radius="small" defaultChecked />
<Switch radius="full" defaultChecked />
</Flex>
在 Text 组件内组合 Switch 组件会自动将其与文本的第一行居中对齐。
<Flex direction="column" gap="3">
<Text as="label" size="2">
<Flex gap="2">
<Switch size="1" defaultChecked /> Sync settings
</Flex>
</Text>
<Text as="label" size="3">
<Flex gap="2">
<Switch size="2" defaultChecked /> Sync settings
</Flex>
</Text>
<Text as="label" size="4">
<Flex gap="2">
<Switch size="3" defaultChecked /> Sync settings
</Flex>
</Text>
</Flex>
它也能自动与多行文本良好对齐。
使用原生的 disabled 属性来创建一个禁用的开关。
<Flex direction="column" gap="2">
<Text as="label" size="2">
<Flex gap="2">
<Switch size="1" />
Off
</Flex>
</Text>
<Text as="label" size="2">
<Flex gap="2">
<Switch size="1" defaultChecked />
On
</Flex>
</Text>
<Text as="label" size="2" color="gray">
<Flex gap="2">
<Switch size="1" disabled />
On
</Flex>
</Text>
<Text as="label" size="2" color="gray">
<Flex gap="2">
<Switch size="1" disabled defaultChecked />
Off
</Flex>
</Text>
</Flex>