跳至主要內容
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