Components

切换

可以是开或关的双状态按钮。

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

    完全支持键盘导航。

    可以是受控或非受控。

安装

从命令行安装组件。

npm install @radix-ui/react-toggle

结构

导入组件。

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

API 参考

根节点

切换。

PropTypeDefault
asChild
boolean
false
defaultPressed
boolean
No default value
pressed
boolean
No default value
onPressedChange
function
No default value
disabled
boolean
No default value
Data attributeValues
[data-state]"on" | "off"
[data-disabled]

在禁用时存在

可访问性

键盘互动

KeyDescription
Space
激活/停用切换。
Enter
激活/停用切换。