前端UI组件【免费下载链接】uiThe Intuitive Vue UI Library powered by Reka UI Tailwind CSS.项目地址https://gitcode.com/gh_mirrors/ui4/ui点击查看免费下载ProseKbd 是 Nuxt UIgh_mirrors/ui4/ui 仓库中负责在富文本内容里渲染键盘按键的排版组件它把 Markdown/MDC 中写下的:kbd{valuemeta}这类指令转换成带统一样式的kbd元素并自动适配不同操作系统上的按键符号。本文以 docs/content/docs/4.typography/kbd.md 为主线结合底层组件 Kbd.vue、按键映射 composable useKbd.ts 与主题配置 kbd.ts完整讲解在文档、博客等排版内容中展示快捷键组合的用法、API 与主题定制方案。组件定位排版内容里的 Prose 组件在 Nuxt UI 的排版Typography体系中所有 Markdown 内容默认渲染的 HTML 元素都会映射为对应的 Prose 组件如ProseH1、ProseP、ProseCode等。ProseKbd正是其中的一员它负责在.md或.mdc内容文件中将键盘按键渲染为带样式的kbd元素用于文档中说明快捷键、热键hotkey与按键组合。ProseKbd 本身是一个轻量包装组件源码 src/runtime/components/prose/Kbd.vue 在内部直接复用了通用组件库中的UKbd即 src/runtime/components/Kbd.vue并叠加了 Prose 场景专属的主题样式。这意味着你在排版内容中得到的渲染效果与在模板里直接使用UKbd是完全一致的只是外层额外套了一层.align-text-top对齐修正让按键符号与相邻文字的对齐更协调见 src/theme/prose/kbd.ts。Usage在 MDC 内容中使用 kbd 组件在 docs/content/docs/4.typography/kbd.md 中给出的核心用法是在 Markdown 内容中通过 MDCMarkdown Components内联组件语法使用kbd组件配合value属性传入要展示的按键。原始示例:kbd{valuemeta} :kbd{valueK}渲染结果即为一个带样式的键盘按键组合例如在 macOS 上显示为⌘ K在其他平台上则显示为Ctrl K。这种写法可以直接嵌入段落文字中例如复制快捷键为 :kbd{valuectrl} :kbd{valueC}在 macOS 上则是 :kbd{valuemeta} :kbd{valueC}。在实际渲染时MDC 语法中的:kbd会解析到 Prose 命名空间下的kbd组件。此外你完全可以在模板中使用等价的UKbd valuemeta /二者的渲染路径最终都收敛到同一个底层组件。特殊按键与平台自适应useKbd 的按键映射机制value属性不仅支持普通字符如K、C还支持一批特殊按键名。这些按键名会经过useKbdcomposable 的getKbdKey函数转换成对应的 Unicode 按键符号。完整映射表定义在 src/runtime/composables/useKbd.ts 的kbdKeysMap中按键名渲染符号按键名渲染符号win⊞command⌘shift⇧control⌃option⌥enter↵delete⌦backspace⌫escapeEsctab⇥capslock⇪arrowup↑arrowright→arrowdown↓arrowleft←pageup⇞pagedown⇟home↖end↘其中meta、alt、ctrl三个按键是平台自适应的useKbd会通过navigator.userAgent检测当前是否运行在 macOS 上源码第 39 行的macOS计算属性并在组件挂载onMounted后把这三个键映射为对应平台的符号metamacOS 上渲染为⌘command其他平台渲染为CtrlctrlmacOS 上渲染为⌃control其他平台渲染为CtrlaltmacOS 上渲染为⌥option其他平台渲染为Alt。对于不在映射表中的任意字符串getKbdKey会原样返回该字符串源码第 62 行因此你也可以传入F2、Space这类自定义按键文本。这一点也体现在文档 docs/content/docs/2.components/kbd.md 的 Value 示例列表中meta、win、command、shift、ctrl、option、alt、enter、delete、backspace、escape、tab、capslock、arrowup、arrowright、arrowdown、arrowleft、pageup、pagedown、home、end均可直接使用。API 一览Props 与 SlotsPropsProseKbd 对外暴露的属性定义在 src/runtime/components/prose/Kbd.vue 的ProseKbdProps接口中value?: string— 要显示的按键名或按键文本会透传给底层UKbd并经过useKbd映射class?: any— 覆盖或追加自定义类名作用于根元素ui?: { base?: any }— 针对 base 样式的定向覆盖与 Nuxt UI 的uiprop 约定一致。需要说明的是ProseKbd 将 props 通过useComponentProps(prose.kbd, _props)进行解析即支持 app.config.ts 中ui.prose.kbd的全局配置合并而更丰富的样式控制能力来自其底层组件Kbd。若你在模板中直接使用 src/runtime/components/Kbd.vue则额外支持as?: any默认kbd— 渲染为的元素或组件由 reka-ui 的Primitive提供可改为span、strong等color?默认neutral— 颜色默认包含主题配置中的所有颜色与neutralvariant?默认outline— 变体solid、outline、soft、subtlesize?默认md— 尺寸sm、md、lg。Slotsdefault— 默认插槽。若提供了插槽内容则优先渲染插槽内容否则渲染value经过useKbd映射后的符号对应Kbd.vue模板中的slot{{ getKbdKey(props.value) }}/slot。Theme主题结构与 Tailwind 实现ProseKbd 的主题机制与 Nuxt UI 其他组件一致在运行时通过tv({ extend: theme, ...(appConfig.ui?.prose?.kbd || {}) })将构建期生成的默认主题与用户全局配置合并src/runtime/components/prose/Kbd.vue 第 35 行。Prose 场景的默认主题非常克制仅包含// src/theme/prose/kbd.ts export default { base: align-text-top }真正的视觉样式由底层Kbd主题 src/theme/kbd.ts 提供其 base 类为inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase并定义了三种尺寸size、四种变体variant与颜色color的组合sizesmh-4 min-w-[16px] text-[10px]、mdh-5 min-w-[20px] text-[11px]、lgh-6 min-w-[24px] text-[12px]variant × color通过 compoundVariants 组合出完整的按键观感例如neutraloutline为ring ring-inset ring-accented text-default bg-defaultprimarysolid为text-inverted bg-primaryneutralsolid为text-inverted bg-inverted等。颜色会依据模块配置options.theme.colors动态生成因此只要在 Nuxt UI 主题中启用了某种颜色Kbd就能直接使用。实际渲染出的 HTML 可参考测试快照 test/components/snapshots/Kbd.spec.ts.snap例如默认mdneutraloutline渲染为kbd classinline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-defaultK/kbd从快照可以看出底层的font-sans uppercase使所有按键文本统一为小尺寸大写样式视觉上与代码块中的kbd风格保持一致的“键盘键”辨识度。源码实现与测试验证ProseKbd → Kbd 的调用链完整调用链如下MDC 内容中的:kbd{valuemeta}被解析为ProseKbdProseKbd通过useComponentProps(prose.kbd, _props)合并全局 app config计算主题后渲染UKbd :valueprops.value :classui(...)底层Kbd使用 reka-ui 的Primitive渲染为kbd或as指定的元素并调用useKbd().getKbdKey(props.value)生成按键符号。测试覆盖test/components/Kbd.spec.ts 使用 Vitest 对底层组件做了较完整的覆盖针对所有size、variantprimary/neutral 两种颜色进行参数化渲染覆盖as如渲染为span、class如追加font-bold与默认插槽如渲染 Default slot等场景额外通过vitest-axe的axe断言组件通过无障碍测试toHaveNoViolations确保键盘按键以原生kbd语义输出便于屏幕阅读器与搜索引擎理解。kbd组件同样被CommandPalette、DropdownMenu、Tooltip、DashboardSearchButton等组件的快照测试引用见 test/components/snapshots下的相关.snap文件说明它是文档、菜单、工具栏等场景中展示快捷键的通用基础单元。应用建议与 Changelog在文档/博客内容中展示快捷键时优先使用 MDC 语法:kbd{value...}并搭配连接多个按键即可构成组合键说明涉及跨平台快捷键时使用meta、ctrl、alt等自适应键名让 macOS 与 Windows/Linux 用户各自看到熟悉的符号避免硬编码⌘或Ctrl若需要对按键样式做整体微调如加大内边距、改为圆角胶囊可以在app.config.ts中配置ui.prose.kbd与ui.kbd的覆盖或通过class/ui.baseprop 按实例调整需要自定义显示文本时直接填充默认插槽即可例如:kbd{valuemeta}F无法表达的复杂内容可用插槽兜底。Changelog 部分对应文档中的:component-changelog{prefixprose}记录了ProseKbd各版本的变更历史可在仓库的 CHANGELOG.md 中查阅该组件相关的演进记录便于在升级 Nuxt UI 时了解行为变化。赞分享前端UI组件【免费下载链接】uiThe Intuitive Vue UI Library powered by Reka UI Tailwind CSS.项目地址https://gitcode.com/gh_mirrors/ui4/ui点击查看免费下载相关推荐RSuite Kbd 组件深度指南在 React 应用中优雅展示键盘快捷键RSuite Kbd 组件深度指南在 React 应用中优雅展示键盘快捷键 导读 Kbd 是 RSuite 提供的键盘快捷键展示组件它将 kbd 语义化标前端UI组件daisyUI Kbd 组件实战指南在网页中优雅展示键盘快捷键daisyUI Kbd 组件实战指南在网页中优雅展示键盘快捷键 Kbd 是 daisyUI 中用于展示键盘快捷键按键的轻量组件基于原生 kbd 标签加前端UI组件Nuxt UI V4 UTooltip 提示气泡组件全解内容、定位、快捷键与跟随光标实战Nuxt UI V4 UTooltip 提示气泡组件全解内容、定位、快捷键与跟随光标实战 本文以 Nuxt UI基于 Reka UI 与 Tailwind前端UI组件上一篇一张海报从4小时压到20分钟8GB显卡跑AI图像编辑关键在3个参数下一篇AALC 完整上手指南Limbus Company 自动刷日常与镜牢坐牢每天省下30分钟以上创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
前端UI组件【免费下载链接】uiThe Intuitive Vue UI Library powered by Reka UI Tailwind CSS.项目地址https://gitcode.com/gh_mirrors/ui4/ui点击查看免费下载ProseKbd 是 Nuxt UIgh_mirrors/ui4/ui 仓库中负责在富文本内容里渲染键盘按键的排版组件它把 Markdown/MDC 中写下的:kbd{valuemeta}这类指令转换成带统一样式的kbd元素并自动适配不同操作系统上的按键符号。本文以 docs/content/docs/4.typography/kbd.md 为主线结合底层组件 Kbd.vue、按键映射 composable useKbd.ts 与主题配置 kbd.ts完整讲解在文档、博客等排版内容中展示快捷键组合的用法、API 与主题定制方案。组件定位排版内容里的 Prose 组件在 Nuxt UI 的排版Typography体系中所有 Markdown 内容默认渲染的 HTML 元素都会映射为对应的 Prose 组件如ProseH1、ProseP、ProseCode等。ProseKbd正是其中的一员它负责在.md或.mdc内容文件中将键盘按键渲染为带样式的kbd元素用于文档中说明快捷键、热键hotkey与按键组合。ProseKbd 本身是一个轻量包装组件源码 src/runtime/components/prose/Kbd.vue 在内部直接复用了通用组件库中的UKbd即 src/runtime/components/Kbd.vue并叠加了 Prose 场景专属的主题样式。这意味着你在排版内容中得到的渲染效果与在模板里直接使用UKbd是完全一致的只是外层额外套了一层.align-text-top对齐修正让按键符号与相邻文字的对齐更协调见 src/theme/prose/kbd.ts。Usage在 MDC 内容中使用 kbd 组件在 docs/content/docs/4.typography/kbd.md 中给出的核心用法是在 Markdown 内容中通过 MDCMarkdown Components内联组件语法使用kbd组件配合value属性传入要展示的按键。原始示例:kbd{valuemeta} :kbd{valueK}渲染结果即为一个带样式的键盘按键组合例如在 macOS 上显示为⌘ K在其他平台上则显示为Ctrl K。这种写法可以直接嵌入段落文字中例如复制快捷键为 :kbd{valuectrl} :kbd{valueC}在 macOS 上则是 :kbd{valuemeta} :kbd{valueC}。在实际渲染时MDC 语法中的:kbd会解析到 Prose 命名空间下的kbd组件。此外你完全可以在模板中使用等价的UKbd valuemeta /二者的渲染路径最终都收敛到同一个底层组件。特殊按键与平台自适应useKbd 的按键映射机制value属性不仅支持普通字符如K、C还支持一批特殊按键名。这些按键名会经过useKbdcomposable 的getKbdKey函数转换成对应的 Unicode 按键符号。完整映射表定义在 src/runtime/composables/useKbd.ts 的kbdKeysMap中按键名渲染符号按键名渲染符号win⊞command⌘shift⇧control⌃option⌥enter↵delete⌦backspace⌫escapeEsctab⇥capslock⇪arrowup↑arrowright→arrowdown↓arrowleft←pageup⇞pagedown⇟home↖end↘其中meta、alt、ctrl三个按键是平台自适应的useKbd会通过navigator.userAgent检测当前是否运行在 macOS 上源码第 39 行的macOS计算属性并在组件挂载onMounted后把这三个键映射为对应平台的符号metamacOS 上渲染为⌘command其他平台渲染为CtrlctrlmacOS 上渲染为⌃control其他平台渲染为CtrlaltmacOS 上渲染为⌥option其他平台渲染为Alt。对于不在映射表中的任意字符串getKbdKey会原样返回该字符串源码第 62 行因此你也可以传入F2、Space这类自定义按键文本。这一点也体现在文档 docs/content/docs/2.components/kbd.md 的 Value 示例列表中meta、win、command、shift、ctrl、option、alt、enter、delete、backspace、escape、tab、capslock、arrowup、arrowright、arrowdown、arrowleft、pageup、pagedown、home、end均可直接使用。API 一览Props 与 SlotsPropsProseKbd 对外暴露的属性定义在 src/runtime/components/prose/Kbd.vue 的ProseKbdProps接口中value?: string— 要显示的按键名或按键文本会透传给底层UKbd并经过useKbd映射class?: any— 覆盖或追加自定义类名作用于根元素ui?: { base?: any }— 针对 base 样式的定向覆盖与 Nuxt UI 的uiprop 约定一致。需要说明的是ProseKbd 将 props 通过useComponentProps(prose.kbd, _props)进行解析即支持 app.config.ts 中ui.prose.kbd的全局配置合并而更丰富的样式控制能力来自其底层组件Kbd。若你在模板中直接使用 src/runtime/components/Kbd.vue则额外支持as?: any默认kbd— 渲染为的元素或组件由 reka-ui 的Primitive提供可改为span、strong等color?默认neutral— 颜色默认包含主题配置中的所有颜色与neutralvariant?默认outline— 变体solid、outline、soft、subtlesize?默认md— 尺寸sm、md、lg。Slotsdefault— 默认插槽。若提供了插槽内容则优先渲染插槽内容否则渲染value经过useKbd映射后的符号对应Kbd.vue模板中的slot{{ getKbdKey(props.value) }}/slot。Theme主题结构与 Tailwind 实现ProseKbd 的主题机制与 Nuxt UI 其他组件一致在运行时通过tv({ extend: theme, ...(appConfig.ui?.prose?.kbd || {}) })将构建期生成的默认主题与用户全局配置合并src/runtime/components/prose/Kbd.vue 第 35 行。Prose 场景的默认主题非常克制仅包含// src/theme/prose/kbd.ts export default { base: align-text-top }真正的视觉样式由底层Kbd主题 src/theme/kbd.ts 提供其 base 类为inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase并定义了三种尺寸size、四种变体variant与颜色color的组合sizesmh-4 min-w-[16px] text-[10px]、mdh-5 min-w-[20px] text-[11px]、lgh-6 min-w-[24px] text-[12px]variant × color通过 compoundVariants 组合出完整的按键观感例如neutraloutline为ring ring-inset ring-accented text-default bg-defaultprimarysolid为text-inverted bg-primaryneutralsolid为text-inverted bg-inverted等。颜色会依据模块配置options.theme.colors动态生成因此只要在 Nuxt UI 主题中启用了某种颜色Kbd就能直接使用。实际渲染出的 HTML 可参考测试快照 test/components/snapshots/Kbd.spec.ts.snap例如默认mdneutraloutline渲染为kbd classinline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-defaultK/kbd从快照可以看出底层的font-sans uppercase使所有按键文本统一为小尺寸大写样式视觉上与代码块中的kbd风格保持一致的“键盘键”辨识度。源码实现与测试验证ProseKbd → Kbd 的调用链完整调用链如下MDC 内容中的:kbd{valuemeta}被解析为ProseKbdProseKbd通过useComponentProps(prose.kbd, _props)合并全局 app config计算主题后渲染UKbd :valueprops.value :classui(...)底层Kbd使用 reka-ui 的Primitive渲染为kbd或as指定的元素并调用useKbd().getKbdKey(props.value)生成按键符号。测试覆盖test/components/Kbd.spec.ts 使用 Vitest 对底层组件做了较完整的覆盖针对所有size、variantprimary/neutral 两种颜色进行参数化渲染覆盖as如渲染为span、class如追加font-bold与默认插槽如渲染 Default slot等场景额外通过vitest-axe的axe断言组件通过无障碍测试toHaveNoViolations确保键盘按键以原生kbd语义输出便于屏幕阅读器与搜索引擎理解。kbd组件同样被CommandPalette、DropdownMenu、Tooltip、DashboardSearchButton等组件的快照测试引用见 test/components/snapshots下的相关.snap文件说明它是文档、菜单、工具栏等场景中展示快捷键的通用基础单元。应用建议与 Changelog在文档/博客内容中展示快捷键时优先使用 MDC 语法:kbd{value...}并搭配连接多个按键即可构成组合键说明涉及跨平台快捷键时使用meta、ctrl、alt等自适应键名让 macOS 与 Windows/Linux 用户各自看到熟悉的符号避免硬编码⌘或Ctrl若需要对按键样式做整体微调如加大内边距、改为圆角胶囊可以在app.config.ts中配置ui.prose.kbd与ui.kbd的覆盖或通过class/ui.baseprop 按实例调整需要自定义显示文本时直接填充默认插槽即可例如:kbd{valuemeta}F无法表达的复杂内容可用插槽兜底。Changelog 部分对应文档中的:component-changelog{prefixprose}记录了ProseKbd各版本的变更历史可在仓库的 CHANGELOG.md 中查阅该组件相关的演进记录便于在升级 Nuxt UI 时了解行为变化。赞分享前端UI组件【免费下载链接】uiThe Intuitive Vue UI Library powered by Reka UI Tailwind CSS.项目地址https://gitcode.com/gh_mirrors/ui4/ui点击查看免费下载相关推荐RSuite Kbd 组件深度指南在 React 应用中优雅展示键盘快捷键RSuite Kbd 组件深度指南在 React 应用中优雅展示键盘快捷键 导读 Kbd 是 RSuite 提供的键盘快捷键展示组件它将 kbd 语义化标前端UI组件daisyUI Kbd 组件实战指南在网页中优雅展示键盘快捷键daisyUI Kbd 组件实战指南在网页中优雅展示键盘快捷键 Kbd 是 daisyUI 中用于展示键盘快捷键按键的轻量组件基于原生 kbd 标签加前端UI组件Nuxt UI V4 UTooltip 提示气泡组件全解内容、定位、快捷键与跟随光标实战Nuxt UI V4 UTooltip 提示气泡组件全解内容、定位、快捷键与跟随光标实战 本文以 Nuxt UI基于 Reka UI 与 Tailwind前端UI组件上一篇一张海报从4小时压到20分钟8GB显卡跑AI图像编辑关键在3个参数下一篇AALC 完整上手指南Limbus Company 自动刷日常与镜牢坐牢每天省下30分钟以上创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
