组件

切换按钮

一个具有两种状态的按钮,可以是打开或关闭。

import React from 'react';
import * as Toggle from '@radix-ui/react-toggle';
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 * as Toggle from '@radix-ui/react-toggle';
export default () => <Toggle.Root />;

API 参考

根元素

切换按钮。

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

禁用时出现

无障碍性

键盘交互

按键描述
空格
激活/停用切换按钮。
回车
激活/停用切换按钮。
上一个吐司提示