繁簡切換
繁體/簡體切換開關，內文逐字交叉淡變轉換。
繁體與簡體中文的切換開關：切換鈕上的「簡／简」字樣會跟著變體一起轉換，內文中會變化的字則逐字 stagger 交叉淡變——舊字向上飄出、新字自下方浮入。內建 76 組常用單字對照供示範，可用 table 擴充；生產環境建議串接 opencc-js 等完整轉換庫。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.02
0.4
<TraditionalSimplifiedToggle />
安裝
npx shadcn@latest add https://webberui.com/r/traditional-simplified-toggle.json或在 components.json 設定 registries 後，改用 @webberui/traditional-simplified-toggle 安裝。
安裝依賴後，從 registry JSON（/r/traditional-simplified-toggle.json 的 files[0].content）複製 traditional-simplified-toggle.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { TraditionalSimplifiedToggle } from "@/components/ui/traditional-simplified-toggle";
<TraditionalSimplifiedToggle
text="我們熱愛繁體中文的美，也理解簡體中文的便利。"
defaultVariant="traditional"
onVariantChange={(variant) => console.log(variant)}
table={{ "鳳": "凤" }}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 要顯示與轉換的文字，繁體或簡體輸入皆可（內部先正規化為繁體），支援 \n 換行 |
variant | ScriptVariant | — | 受控模式的當前變體："traditional" 或 "simplified" |
defaultVariant | ScriptVariant | "traditional" | 非受控模式的初始變體 |
onVariantChange | (variant: ScriptVariant) => void | — | 變體切換時回呼 |
table | Record<string, string> | 內建 76 組 | 額外的繁→簡對照，與內建表合併（同鍵覆蓋內建） |
stagger | number | 0.02 | 變化字逐字交叉淡變的間隔（秒） |
duration | number | 0.4 | 單一字交叉淡變的時長（秒） |
className | string | — | 透傳到最外層容器 |
textClassName | string | — | 透傳到內文段落 |
可及性
- 切換鈕為真實
button，以aria-pressed標示當前變體，並附aria-label說明，可用鍵盤 Tab／Enter 操作 - 轉換後的完整文字以
sr-only提供給螢幕閱讀器，逐字動畫的字素對輔助科技隱藏（aria-hidden） - 使用者系統開啟「減少動態效果」時，切換為即時靜態替換，不播放逐字動畫與膠囊彈跳