切换开关，替代复选框。
<Switch defaultChecked />
该组件继承自 Switch 原语 的属性，并支持 常见的边距属性。
| Prop | Type | Default |
|---|---|---|
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "classic" | "surface" | "soft" | "surface" |
color | enum | No default value |
highContrast | boolean | No default value |
radius | "none" | "small" | "medium" | "large" | "full" | No default value |
使用 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>
将 Switch 组合在 Text 中自动与第一行文本居中对齐。
<Flex direction="column" gap="3">
<Text as="label" size="2">
<Flex gap="2">
<Switch size="1" defaultChecked /> 同步设置
</Flex>
</Text>
<Text as="label" size="3">
<Flex gap="2">
<Switch size="2" defaultChecked /> 同步设置
</Flex>
</Text>
<Text as="label" size="4">
<Flex gap="2">
<Switch size="3" defaultChecked /> 同步设置
</Flex>
</Text>
</Flex>
它也自动与多行文本良好对齐。
使用原生 disabled 属性来创建一个禁用的开关。
<Flex direction="column" gap="2">
<Text as="label" size="2">
<Flex gap="2">
<Switch size="1" />
关闭
</Flex>
</Text>
<Text as="label" size="2">
<Flex gap="2">
<Switch size="1" defaultChecked />
开启
</Flex>
</Text>
<Text as="label" size="2" color="gray">
<Flex gap="2">
<Switch size="1" disabled />
开启
</Flex>
</Text>
<Text as="label" size="2" color="gray">
<Flex gap="2">
<Switch size="1" disabled defaultChecked />
关闭
</Flex>
</Text>
</Flex>