组件

切换

一个双状态按钮,可以为开启或关闭状态。

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;

特性

    完整的键盘导航。

    可以受控或不受控。

安装

从命令行安装组件。

npm install @radix-ui/react-toggle

解剖

导入组件。

import { Toggle } from "radix-ui";
export default () => <Toggle.Root />;

API 参考

切换组件。

属性类型默认值
asChild
布尔值
false
defaultPressed
布尔值
无默认值
pressed
布尔值
无默认值
onPressedChange
函数
无默认值
disabled
布尔值
无默认值
数据属性
[data-state]"on" |"off"
[data-disabled]

禁用时呈现

可访问性

键盘交互

描述
空格键
激活/停用切换。
回车键
激活/停用切换。
上一个提示
下一个切换组