模态还是内联react-command-palette 显示模式与 trigger 触发器定制全解析【免费下载链接】react-command-paletteAn accessible browser compatible javascript command palette项目地址: https://gitcode.com/gh_mirrors/re/react-command-palettereact-command-palette 是一个符合 WAI-ARIA 标准的 React 命令面板Command Palette组件让你像使用 Atom、VS Code 一样在网页中按快捷键呼出命令列表。这篇文章带你快速搞懂它的两种显示模式 modal 与 inline以及如何用 trigger 属性自由定制触发按钮一篇就够。两种显示模式怎么选modal 与 inline 对比 react-command-palette 通过display属性控制显示模式只有两个取值默认是modal对比维度displaymodal默认displayinline渲染位置页面居中的模态框带半透明遮罩层像普通 DOM 一样嵌入页面内容流中出现时机点击触发器、按快捷键或open为 true 时组件挂载即显示输入框焦点打开后自动聚焦挂载时自动聚焦command-palette.js 中componentDidMount直接调用focusInput()关闭方式按esc、点击遮罩或open变 false常驻显示无关闭概念触发器按钮会渲染可设为 null 隐藏不渲染触发器closeOnSelect选中后立即关闭不关闭而是显示加载 spinner模态模式三步开启默认命令面板 ⌨️模态模式是大多数场景的首选使用步骤非常直接安装依赖npm i --save react-command-palette传入 commands每个命令是一个含name展示名和command回调函数的对象等待触发默认触发器是一个写着 Command Palette ⇧⌘P 的按钮点击即打开或者直接按默认快捷键commandshiftp呼出模态模式的细节都封装在 command-palette.js 的renderModalCommandPalette()中它基于 react-modal 渲染自带焦点管理——关闭后焦点会自动回到之前的元素shouldReturnFocusAfterClose默认为 true这对可访问性非常友好。内联模式把命令面板嵌进页面正文 当命令面板是你页面的常驻功能区比如一个侧边栏搜索框而不是呼出式交互时内联模式更合适CommandPalette commands{commands} displayinline /只需一个属性。渲染结果就是一个输入框加下方建议列表直接混排在你的布局里源码见 command-palette.js 中的renderInlineCommandPalette()。内联模式有三个行为差异需要注意没有触发器按钮它自己就是界面挂载后输入框自动获得焦点选中不关闭closeOnSelect只在 modal 模式下生效内联模式下选中命令后面板会保持打开并显示加载指示器spinner适合选一项、再加载更多项的级联命令场景没有遮罩层不会拦截页面上其他区域的交互trigger 触发器定制从字符串到 React 组件 trigger属性决定了打开命令面板的那个按钮长什么样它接受三种值实现代码在 palette-trigger.js不传 trigger使用默认按钮不设置时默认渲染一个语义化button文案是 Command Palette 并附带⇧⌘P快捷键标签——对屏幕阅读器友好零配置可用。用字符串定制最简单的方式CommandPalette commands{commands} triggerClick Me! /字符串会被自动包进一个rolebutton且tabIndex{0}的 div可点击、可 Tab 聚焦、回车/空格可激活你完全不需要自己绑事件。用 React 组件定制想要什么样式都可以传任何 React 元素都行组件同样会被包进可访问的 div点击和键盘事件都由库接管CommandPalette commands{commands} trigger{button typebutton按 shft / 运行命令/button} hotKeysshift/ /更多完整示例可参考 index.stories.js 中的WithACustomTrigger和WithEverything两个 story官方文档说明也在 README.md 的 trigger 条目下。隐藏触发器trigger 设为 nullCommandPalette commands{commands} trigger{null} open /设为null后触发器完全不再渲染此时面板只由外部控制open为 true 时打开open变 false 时关闭逻辑在 command-palette.js 的componentDidUpdate中监听 prop 变化。这非常适合页面某处自己的按钮控制面板开关的场景。自定义快捷键hotKeys 属性怎么配 ⚡hotKeys接受字符串或字符串数组语法基于 mousetrap 键位组合默认值commandshiftpMac 风格自定义单个hotKeysshift/自定义多个hotKeys{[/, commandk]}面板打开后esc始终可用用于关闭面板并恢复焦点。进阶theme 属性与 DOM 结构对应关系 自定义样式时theme属性是一个类名映射表把每个 UI 区域绑定到你的 CSS 类名。内置了 Atom、Chrome、Sublime 三套主题默认 Atom完整键名见 atom-theme.jsmodal/overlay/header模态框主体、遮罩层、顶部说明区container/input/suggestion等输入区与建议列表trigger触发器按钮的类名spinner加载指示器的类名上文的 DOM 结构图images/dom-structure.png直观展示了这些 key 与组件层级的对应关系外层由 react-modal 负责overlay modal内层由 react-autosuggest 负责container input suggestion 列表trigger 和 spinner 则是独立于模态框的两个部件。想给顶部加一行操作提示传一个header即可参考 sampleHeader.js。快速决策清单 ✅你的需求推荐配置标准呼出式命令面板什么都不改用默认 modal 默认触发器面板常驻在页面某个区块displayinline触发器要有自己的样式/图标trigger{你的组件/}用外部按钮控制开关trigger{null} 外部切换open快捷键与 Chrome/浏览器冲突换一组hotKeys如shift/匹配编辑器风格的视觉直接套用theme{chrome}等内置主题react-command-palette 的核心思路是少配置即可用每一步都能定制显示模式二选一、触发器三态可配、快捷键随你定义配合主题系统就能让命令面板无缝融入任意 React 应用。【免费下载链接】react-command-paletteAn accessible browser compatible javascript command palette项目地址: https://gitcode.com/gh_mirrors/re/react-command-palette创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考