跳转到主内容
Frutjam logo Frutjam
v2.2.5
Theme

切换组件

最后更新:

仅 CSS Tailwind CSS 切换开关，具有主要、次要、重音和语义颜色变体。尺寸为 xs-xl。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

切换组件是二进制开关，允许用户打开和关闭功能或设置。切换使用本机 HTML 复选框输入构建并通过 Tailwind CSS 动画增强，提供了一种直观的方式来控制布尔状态。 Frutjam 切换系统支持多种颜色、尺寸和禁用状态，非常适合设置面板、功能标志和首选项控件。

仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

班级 类型 描述
toggle根据动画开/关开关输入
toggle-xs尺寸特小号
toggle-sm尺寸小的
toggle-md尺寸中（默认）
toggle-lg尺寸大的
toggle-xl尺寸特大号
toggle-primary颜色主要主题颜色
toggle-secondary颜色次要主题色
toggle-accent颜色强调主题颜色
toggle-neutral颜色中性主题色
toggle-info颜色信息语义颜色
toggle-success颜色成功语义色
toggle-warning颜色警告语义颜色
toggle-error颜色错误语义颜色

基本用法

1
2
<input type="checkbox" class="toggle">
<input type="checkbox" class="toggle" checked>

1
2
<input type="checkbox" className="toggle">
<input type="checkbox" className="toggle" checked>

切换尺寸

html 
1
2
3
4
5
<input type="checkbox" class="toggle toggle-xs">
<input type="checkbox" class="toggle toggle-sm">
<input type="checkbox" class="toggle toggle-md">
<input type="checkbox" class="toggle toggle-lg">
<input type="checkbox" class="toggle toggle-xl">

切换颜色

html 
1
2
3
4
5
6
7
8
<input type="checkbox" class="toggle" checked>
<input type="checkbox" class="toggle toggle-primary" checked>
<input type="checkbox" class="toggle toggle-secondary" checked>
<input type="checkbox" class="toggle toggle-accent" checked>
<input type="checkbox" class="toggle toggle-info" checked>
<input type="checkbox" class="toggle toggle-success" checked>
<input type="checkbox" class="toggle toggle-warning" checked>
<input type="checkbox" class="toggle toggle-error" checked>

禁用切换

html 
1
2
<input type="checkbox" class="toggle" disabled>
<input type="checkbox" class="toggle" disabled checked>

用标签切换

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-primary" checked>
  <span>Enable notifications</span>
</label>

<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-success" checked>
  <span>Dark mode</span>
</label>

<label class="flex items-center gap-2">
  <input type="checkbox" class="toggle toggle-warning">
  <span>Analytics</span>
</label>

切换状态

Off

On

Disabled

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="flex gap-4 items-center">
  <div>
    <p class="text-sm font-medium mb-2">Off</p>
    <input type="checkbox" class="toggle toggle-primary">
  </div>
  <div>
    <p class="text-sm font-medium mb-2">On</p>
    <input type="checkbox" class="toggle toggle-primary" checked>
  </div>
  <div>
    <p class="text-sm font-medium mb-2">Disabled</p>
    <input type="checkbox" class="toggle toggle-primary" disabled>
  </div>
</div>

使用 Claude Code、Cursor 或其他 AI 编辑器？

Cherry MCP 为您的 AI 编辑器按需提供准确的 切换 类名称和结构。不再有幻觉课程。

尝试Cherry MCP