Toggle 切换按钮
用于在按下与未按下之间切换一个可立即生效的选项。
使用概览
适合使用
- 工具栏格式、收藏或显示偏好需要双态切换时。
不建议使用
- 设置需要提交表单后才生效或代表长期系统开关时。
真实示例
文字加粗切换
通过按下状态反映当前格式是否启用。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/toggle.json基础用法
导入
import { Toggle } from "@richardqiu/quartz/toggle";JSX
<Toggle aria-label="加粗" pressed>B</Toggle>状态与控制摘要
默认
悬停
键盘焦点可见
激活
已禁用
已按下
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
pressed | boolean | false | 受控表示切换按钮当前是否处于按下状态。 |
组合结构
- 01
Toggle
键盘约定
- Enter 或空格键切换按下状态。
可访问性契约
- 可访问名称应描述被切换的操作。
- 按下状态通过 aria-pressed 与 data-state 暴露。