<Switch defaultChecked />
此组件继承自 Switch 原生组件 并支持 常用边距属性.
| 属性 | 类型 | 默认值 |
|---|---|---|
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "classic" | "surface" | "soft" | "surface" |
color | 枚举 | 无默认值 |
highContrast | 布尔值 | 无默认值 |
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>
将 Switch 放在 Text 中会自动将其与文本的第一行居中对齐。
<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>