切换

¥Switch

允许用户在选中和未选中之间切换的控件。

import * as React from "react";
import { Switch } from "radix-ui";
import "./styles.css";

const SwitchDemo = () => (
	<form>
		<div style={{ display: "flex", alignItems: "center" }}>
			<label
				className="Label"
				htmlFor="airplane-mode"
				style={{ paddingRight: 15 }}
			>
				Airplane mode
			</label>
			<Switch.Root className="SwitchRoot" id="airplane-mode">
				<Switch.Thumb className="SwitchThumb" />
			</Switch.Root>
		</div>
	</form>
);

export default SwitchDemo;
Expand code

安装

¥Installation

从命令行安装组件。

¥Install the component from your command line.

npm install @radix-ui/react-switch

结构

¥Anatomy

导入所有部分并将它们组合在一起。

¥Import all parts and piece them together.

import { Switch } from "radix-ui";

export default () => (
	<Switch.Root>
		<Switch.Thumb />
	</Switch.Root>
);

API 参考

¥API Reference

根

¥Root

包含开关的所有部分。input 在 form 中使用时也会渲染，以确保事件正确传播。

¥Contains all the parts of a switch. An input will also render when used within a form to ensure events propagate correctly.

缩略图

¥Thumb

用于直观指示开关开启或关闭状态的滑块。

¥The thumb that is used to visually indicate whether the switch is on or off.

可访问性

¥Accessibility

遵循 switch 角色要求。

¥Adheres to the switch role requirements.

键盘交互

¥Keyboard Interactions