{ "slug": "shortcutpanel", "curated": true, "mode": "single", "examples": [ { "id": "shortcutpanel-ex-1", "title": "基础用法", "titleSrc": "", "desc": "", "html": "
\n

ShortcutPanel 快捷键面板

\n

展示全部快捷键,支持搜索过滤。

\n
\n
\n \n
\n
\n
\n
", "preview": { "show": [ [ 0 ] ], "hide": [], "mode": "single" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "

ShortcutPanel 快捷键面板

\n

展示全部快捷键,支持搜索过滤。

\n
\n \n
\n
", "jsx": "import { KoleShortcutPanel } from 'kole-ui/react';\n\nconst items = [\n { name: '保存', key: 'Ctrl + S' },\n { name: '搜索', key: 'Ctrl + K' },\n { name: '新建', key: 'Ctrl + N' },\n { name: '刷新', key: 'F5' },\n { name: '关闭页签', key: 'Ctrl + W' },\n { name: '全屏', key: 'F11' },\n { name: '帮助', key: '?' },\n { name: '命令面板', key: 'Ctrl + P' }\n];\n\nexport default function Demo() {\n return ;\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleShortcutPanel } from 'kole-ui/react';\n\nconst items = [\n { name: '保存', key: 'Ctrl + S' },\n { name: '搜索', key: 'Ctrl + K' },\n { name: '新建', key: 'Ctrl + N' },\n { name: '刷新', key: 'F5' },\n { name: '关闭页签', key: 'Ctrl + W' },\n { name: '全屏', key: 'F11' },\n { name: '帮助', key: '?' },\n { name: '命令面板', key: 'Ctrl + P' }\n];\n\nexport default function Demo(): JSX.Element {\n return ;\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/ShortcutPanel.html 第 24-33 行的 8 条 items(name + key:保存 Ctrl + S、搜索 Ctrl + K、新建 Ctrl + N、刷新 F5、关闭页签 Ctrl + W、全屏 F11、帮助 ?、命令面板 Ctrl + P)。", "组件对外只有一个 prop items(frameworks/ShortcutPanel.jsx 第 15 行参数表与第 4-13 行 DEFAULT_ITEMS,Vue3 见 ShortcutPanel.vue3.vue 第 16-30 行);搜索框与过滤在组件内部完成(ShortcutPanel.jsx 第 16-21 行),宿主只需给数据。" ] } ] }