组件 · 动作 · 04
开关 开关 = 44×26 的轨道，设置即时生效、无需保存按钮，这与表单里的复选框不同。
直达修改 Prompt →
Weekly digest One email every Monday. Product updates Shipping notes and breaking changes. Beta features
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a toggle component.
STYLE
- 44x26 track, 13px radius, 22px white knob with 2px inset
- off track #E5E5EA, on track #34C759
- knob travels 18px with a 160ms ease
- label sits left of the track, description under it in 12px
STATES
- off, on, focus-visible 2px accent ring on the track, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing toggles carry a description.
Use:
- a 12px #6E6E73 line under the label, 2px gap
- the description stays outside the clickable track
- keep track sizes, colors and motion unchanged
Only add the description.
Create a toggle component, replacing the existing one.
Requirements:
- track 44x26 default, 36x22 small; knob is track height minus 4px
- off #E5E5EA, on #34C759, knob white with a 1px shadow
- 160ms ease travel, no bounce
- label left of the track, optional 12px description below it
- disabled at 40% and removed from the tab order
Keep the settings list layout unchanged.
MOTION
- Thumb: 160ms ease-out translate. Track colour: same 160ms.
- Spring is allowed here (duration 0.3, bounce 0) but never with visible overshoot.
- Inner state icon: 120ms cross-fade.
- prefers-reduced-motion: instant position change.
修改类 Prompt 只动目标，不碰页面其余部分。
开关是什么？ 开关一动就改设置。点名轨道、滑块行程，以及被读屏播报的状态。
变体 点击属性即可在预览中高亮。
开关 在 Prompt 里写明这个类型。
带标签 在 Prompt 里写明这个类型。
带说明 在 Prompt 里写明这个类型。
尺寸 给具体值，不要只给感觉词。
轨道 给具体值，不要只给感觉词。
滑块 给具体值，不要只给感觉词。
标签 字段的名称文字，简短并置于输入框上方。
禁用 不可交互的控件，置灰且不可聚焦。 状态 点击属性即可在预览中高亮。
关 在 Prompt 里写明这个状态。
开 在 Prompt 里写明这个状态。
聚焦 键盘聚焦状态：清晰的焦点环或边框变化，永远不要去掉。
禁用 不可交互的控件，置灰且不可聚焦。 结构解剖 这些是 Prompt 里应该点名的部件。
01 轨道 02 滑块 03 标签 04 说明文字 什么时候用 立即生效的设置：深色模式、通知 管理后台表格里按行开关的功能 无需保存按钮即可持久化的偏好 什么时候别用 改动需要确认或保存步骤——改用复选框 两个互斥选项——改用下拉或单选 标签超过一行 Green means “on and already saved” — if the change waits for a save button, this is a checkbox wearing a switch.
复制 Prompt Create a toggle component.
STYLE
- 44x26 track, 13px radius, 22px white knob with 2px inset
- off track #E5E5EA, on track #34C759
- knob travels 18px with a 160ms ease
- label sits left of the track, description under it in 12px
STATES
- off, on, focus-visible 2px accent ring on the track, disabled 40%
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui