互動編排
圓角陰影調整器
可直接拖曳把手調整方塊的圓角、陰影與內距，並即時顯示數值讀數與對應 CSS，適合文件站示範設計 token。
給文件站與設計系統頁用的互動示範。中央方塊預設 240×160，右上角的圓形把手沿對角線往內拖調整圓角、方塊下方的把手往下拖加深陰影、右側把手水平拖改內距；每個把手旁都有跟著走的讀數標籤，數字逐位滾動。下方的 code 面板同步顯示 border-radius、box-shadow、padding，一鍵複製。數值會 snap 到 step 的倍數並限制在 max 內，支援受控／非受控雙模式，初始值可直接傳入你的設計 token。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add radius-shadow-tunerPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1
500
編輯中的呼叫預設屬性
<RadiusShadowTuner/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/radius-shadow-tuner.json或在 components.json 設定 registries 後，改用 @webberui/radius-shadow-tuner 安裝。
使用
import { RadiusShadowTuner } from "@/components/ui/radius-shadow-tuner";
<RadiusShadowTuner
defaultValues={{ radius: 24, shadow: 32, padding: 16 }}
step={4}
onChange={(v) => console.log(v.radius, v.shadow, v.padding)}
>
<p className="text-sm font-semibold">訂單已出貨</p>
</RadiusShadowTuner>
// 只示範圓角，上限 40px
<RadiusShadowTuner properties={["radius"]} max={{ radius: 40 }} showCode={false} />可在外層覆寫 CSS 變數調整外觀：
.my-docs {
--wb-radius-drag-accent: #3b82f6; /* 把手與讀數顏色 */
--wb-radius-drag-roll: 160ms; /* 數字逐位滾動時長 */
}Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
values | RadiusShadowValues | — | 受控數值；未提供時由元件內部管理（非受控） |
defaultValues | Partial<RadiusShadowValues> | { radius: 16, shadow: 24, padding: 16 } | 非受控模式的初始數值，可直接傳入設計 token；缺的欄位用內建預設 |
onChange | (values: RadiusShadowValues) => void | — | 任一數值變動時回呼，參數為三個屬性的完整數值 |
properties | RadiusShadowProperty[] | ["radius", "shadow", "padding"] | 要顯示哪些把手（同時決定 code 面板列出的 CSS） |
max | Partial<RadiusShadowValues> | { radius: 64, shadow: 48, padding: 48 } | 每個屬性的上限（px），缺的欄位用預設 |
step | number | 1 | 拖曳與方向鍵的步進值，數值會 snap 到它的倍數（常用 1 或 4） |
showCode | boolean | true | 是否顯示下方的 CSS 程式碼面板與複製按鈕 |
stiffness | number | 500 | 放手時把手回彈彈簧的剛度 |
damping | number | 30 | 放手時把手回彈彈簧的阻尼 |
children | React.ReactNode | — | 方塊內的內容；未提供時顯示提示文字 |
className | string | — | 透傳到最外層容器 |
RadiusShadowValues
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
radius | number | 16 | 圓角半徑（px） |
shadow | number | 24 | 陰影模糊半徑（px）；垂直位移自動取模糊的 3/8 |
padding | number | 16 | 內距（px） |
RadiusShadowProperty 為 "radius" \| "shadow" \| "padding"。
細節
- 圓角把手位於方塊內
(寬 − r, r)的位置，拖曳時只取指標位移投影到「往內」對角線的分量，所以斜著拖、歪一點拖都不會抖動。 - 拖曳用 pointer events 加
setPointerCapture，指標滑出把手也能繼續拖；沒有拖曳慣性，放手即停。 - 方塊的
border-radius、box-shadow、padding由 motion value 直接驅動，拖曳過程不必等整個元件樹重新渲染；React 狀態只在 snap 後的數值真的改變時才更新。 - 陰影的 y 位移取模糊的 3/8（例如 32px 模糊對應 12px 位移），顏色固定
rgba(0, 0, 0, 0.18)。 - 右側內距把手開啟時，方塊內會出現一圈虛線參考框，標出內容區的邊界。
- 讀數的逐位滾輪每一位是一欄 0–9，以
translateY滾到目標數字，時長由--wb-radius-drag-roll控制。 - 複製按鈕在點擊事件中呼叫
navigator.clipboard.writeText，成功後顯示「已複製」1.5 秒。
可及性
- 每個把手都是
role="slider"，帶有aria-label（圓角／陰影／內距）、aria-valuemin、aria-valuemax、aria-valuenow與帶單位的aria-valuetext - 聚焦把手後可用方向鍵 ±step、Shift+方向鍵或 PageUp／PageDown ±10、Home／End 跳到 0 與上限；鍵盤聚焦時顯示 focus-visible 外框
- 逐位滾動的讀數對輔助科技隱藏，避免重複朗讀；複製結果透過
role="status"的即時區域朗讀 - 使用者系統開啟「減少動態效果」時，讀數數字直接替換不滾動，把手按下時不放大、放手也不回彈