Skip to content

FaKbd 键盘按键

用于展示键盘按键组合的视觉样式,常用于快捷键提示。

使用场景

  • 快捷键提示
  • 操作指南中的按键说明
  • 命令面板的快捷键展示
  • 帮助文档中的键盘操作说明

Props

属性类型默认值说明
classHTMLAttributes['class']-自定义 CSS 类

Slots

名称说明
default按键内容(字符、图标等)

注意事项

样式特点

  • 小号字体(text-xs
  • 中等字重(font-medium
  • 圆角背景
  • 内边距适当
  • 支持 SVG 图标(自动调整尺寸)
  1. 配合使用:组合按键时请使用 FaKbdGroup 包裹多个 FaKbd
  2. 内容长度:按键内容不宜过长,适合单个字符或简短单词
  3. 图标支持:可以使用 FaIcon 组件显示图标,图标会自动调整为合适尺寸

FaKbdGroup 键盘组合

用于包裹多个 FaKbd 组件,展示组合按键的容器组件。

使用场景

  • 快捷键组合展示
  • 键盘操作说明
  • 命令面板提示
  • 帮助文档中的多键组合说明

Props

属性类型默认值说明
classHTMLAttributes['class']-自定义 CSS 类

Slots

名称说明
default包含的 FaKbd 组件

注意事项

  1. 仅用于组合:此组件仅用于包裹多个 FaKbd,不建议单独使用
  2. 间距自动:内部的 FaKbd 会自动添加适当间距
  3. 灵活内容:除了 FaKbd 外,也可以放入其他内容(如分隔符)