For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.1/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.1/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.1/components/kbd.md.
A3S UI
  • 简体中文
  • v0.4.1

      • Kbd

      键盘按键标记以平台熟悉的形式展示快捷键或按键序列，只用于说明真实可用的键盘操作。

      实时预览
      ⌘⇧⌥⌃Ctrl+B

      切换侧边栏

      用法

      引入 CSS

      导入 Tailwind 和一个完整的 A3S UI 样式包。

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      或者仅导入基本 CSS、Kbd 组件 CSS 和一个样式包。

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/button.css";
@import "@a3s-lab/ui/components/button-group.css";
@import "@a3s-lab/ui/components/input-group.css";
@import "@a3s-lab/ui/components/kbd.css";
@import "@a3s-lab/ui/components/tooltip.css";
@import "@a3s-lab/ui/styles/a3s.css";

      Kbd 示例由按钮、按钮组、输入组和工具提示样式组成。

      使用CDN或批量程序导入？请参见安装页。

      添加键盘按键 HTML

      Use <kbd class="kbd"> for a key label. Use an inline wrapper with utilities when grouping multiple keys.

      <kbd class="kbd">⌘K</kbd>

      键盘标签与方向无关。当位置很重要时，周围的空间应该使用逻辑工具类。

      示例

      组

      实时预览

      Use Ctrl+B Ctrl+K to open the command palette

      按钮

      实时预览

      输入组

      实时预览
      ⌘K

      RTL

      键盘标签与方向无关。当位置很重要时，周围的空间应该使用逻辑工具类。

      实时预览
      ⌘⇧⌥⌃Ctrl+B