應用殼層與面板
快捷鍵總覽層
按 ? 呼出的快捷鍵速查浮層：分組列表、kbd 鍵帽、搜尋過濾。
按 ? 即可呼出的置中速查面板：快捷鍵依「導航／編輯／檢視」等分組排列，鍵帽以立體 kbd 樣式呈現、滑過該列會整排微微按下，頂部搜尋框即時過濾並螢光標記命中文字，Esc 先清空搜尋、再按一次關閉。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add shortcut-cheatsheetPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
編輯中的呼叫預設屬性
<ShortcutCheatsheet/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/shortcut-cheatsheet.json或在 components.json 設定 registries 後，改用 @webberui/shortcut-cheatsheet 安裝。
使用
import { ShortcutCheatsheet } from "@/components/ui/shortcut-cheatsheet";
<ShortcutCheatsheet
groups={[
{
title: "導航",
items: [
{ keys: ["⌘", "K"], label: "開啟指令面板" },
{ keys: ["G", "H"], label: "回到首頁" },
],
},
{
title: "編輯",
items: [{ keys: ["⌘", "Z"], label: "復原上一步" }],
},
]}
/>未傳入 open 時元件為非受控，按 ? 即開啟；需要自己的觸發按鈕時改用受控模式，同時傳 open 與 onOpenChange。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
groups | ShortcutGroup[] | — | 快捷鍵分組資料，形狀為 { title, items: { keys: string[], label }[] } |
open | boolean | — | 受控開關狀態；未提供時由元件內部管理 |
onOpenChange | (open: boolean) => void | — | 開關狀態變更回呼（? 開啟、Esc 或點遮罩關閉都會觸發） |
hotkey | boolean | true | 是否全域監聽 ? 鍵呼出面板 |
title | string | "鍵盤快捷鍵" | 面板標題 |
searchPlaceholder | string | "搜尋快捷鍵⋯" | 搜尋框的提示文字 |
className | string | — | 透傳到最外層浮層容器 |
可及性
- 面板使用
role="dialog"與aria-modal，開啟時自動聚焦搜尋框，關閉後焦點回到原本的元素 - 焦點位於輸入框、文字區等可編輯元素時，按
?不會誤觸開啟 - Esc 具兩段行為：搜尋框有文字時先清空，再按一次才關閉面板
- 鍵帽以語意化
kbd元素渲染，各分組為帶aria-label的section - 使用者系統開啟「減少動態效果」時，面板改為純淡入淡出，不做縮放與位移動畫