等化器開關
聲音開關：開啟時等化器條跳動、關閉凍結灰階。
把跳動的等化器條本身變成開關：開啟時 4–6 根音量條以不同相位、不同週期持續起伏並泛出主色光暈，關閉時全部條依序收攏到低點並轉為灰階凍結，播放與靜音狀態一眼可辨，特別適合作為背景音樂或音效的靜音鈕。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
5
<EqualizerToggle />
安裝
npx shadcn@latest add https://webberui.com/r/equalizer-toggle.json或在 components.json 設定 registries 後，改用 @webberui/equalizer-toggle 安裝。
安裝依賴後，從 registry JSON（/r/equalizer-toggle.json 的 files[0].content）複製 equalizer-toggle.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { EqualizerToggle } from "@/components/ui/equalizer-toggle";
<EqualizerToggle
defaultOn
color="#8b5cf6"
label="背景音樂開關"
onChange={(on) => console.log(on ? "播放中" : "已靜音")}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
on | boolean | — | 受控模式：目前是否開啟；不傳則為非受控 |
defaultOn | boolean | false | 非受控模式的初始狀態 |
onChange | (on: boolean) => void | — | 切換時回呼，參數為切換後的新狀態 |
color | string | "#10b981" | 開啟時等化器條的主色，接受任何合法 CSS 顏色 |
bars | number | 5 | 等化器條數量（自動夾在 3–8 之間） |
size | "sm" | "md" | "lg" | "md" | 尺寸 |
disabled | boolean | false | 是否停用（不可點擊、半透明） |
label | string | "聲音開關" | 無障礙標籤，朗讀給輔助科技的開關名稱 |
className | string | — | 透傳合併到按鈕外層 |
可及性
- 使用原生
button搭配role="switch"與aria-checked，狀態切換會被輔助科技即時朗讀，Space 與 Enter 皆可操作 labelprop 提供開關的無障礙名稱（預設「聲音開關」），跳動的等化器條為純裝飾並標記aria-hidden- 具備
focus-visible焦點環，鍵盤操作時清楚可見 - 使用者系統開啟「減少動態效果」時不做跳動動畫，改以靜態高低差（開啟）與灰階低點（關閉）呈現狀態
- 狀態不只靠顏色區分：關閉時條高同時收攏到低點，色弱使用者也能辨識