Kbd

⌘⇧⌥⌃Ctrl+B

用途

Include 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或批量程序导入？请参见安装页。

Add your kbd 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

#Kbd

#用途

Include CSS

Add your kbd HTML

#示例

#组

#按钮

#输入组

#RTL

Kbd

用途

示例

组

按钮

输入组

RTL