ICEN UI 键盘键
Docs ⌘K
Core · 稳定

键盘键

键帽与行内代码片:键盘按键和行内代码的排版件。

Preview
数据展示 kbd

按 Ctrl + K 打开命令面板,输入 preset piano dark 切换预设,Esc 关闭。

html
<p style="margin:0">按 <kbd class="icen-kbd">Ctrl</kbd> + <kbd class="icen-kbd">K</kbd> 打开命令面板,输入 <code class="icen-code-inline">preset piano dark</code> 切换预设,<kbd class="icen-kbd icen-kbd--sm">Esc</kbd> 关闭。</p>

特性

安装

bun add @icen.ai/ui

一行引入该组件(CSS 与 behavior 自动带上,无需关心内部 CSS 文件名):

js
import '@icen.ai/ui/kit/kbd';

也可以用脚手架直接打印引入行:

bash
bunx --bun @icen.ai/ui add kbd

Astro 项目注意:kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS(import '@icen.ai/ui/components/content.css';),JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

html
<kbd class="icen-kbd">Ctrl</kbd> + <kbd class="icen-kbd icen-kbd--sm">K</kbd><code class="icen-code-inline">行内代码</code>