切换按钮

¥Toggle

一个可切换为开启或关闭的双状态按钮。

import * as React from "react";
import { Toggle } from "radix-ui";
import { FontItalicIcon } from "@radix-ui/react-icons";
import "./styles.css";

const ToggleDemo = () => (
	<Toggle.Root className="Toggle" aria-label="Toggle italic">
		<FontItalicIcon />
	</Toggle.Root>
);

export default ToggleDemo;

Features

Full keyboard navigation.

Can be controlled or uncontrolled.

安装

¥Installation

从命令行安装组件。

¥Install the component from your command line.

npm install @radix-ui/react-toggle

结构

¥Anatomy

导入组件。

¥Import the component.

import { Toggle } from "radix-ui";

export default () => <Toggle.Root />;

API 参考

¥API Reference

根

¥Root

切换按钮。

¥The toggle.

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultPressed`	`boolean`	No default value
`pressed`	`boolean`	No default value
`onPressedChange`	`function`	No default value
`disabled`	`boolean`	No default value