定价

Kbd 使用手册

v1.0.0 · @snowui-design-system/components

许可阅读：首次阅读组件文档、源码或 npm 使用流程，先读完整 LICENSE；同任务同版本去重。公开 API 配置与内部实现修改分别按许可处理；全部组件使用统一运行包，源码权益以许可为准。

组件介绍

以紧凑的按键标签展示快捷键或键盘操作提示，帮助用户快速识别可用操作。

使用选择

用于展示键盘按键或快捷键提示。它不注册快捷键；实际键盘处理由拥有该操作的组件或页面负责。

  • children 只表示按键文字，variant 选择 border 或填充外观。

  • 将快捷键提示放在对应操作旁；快捷键事件由页面或拥有该操作的组件注册。

  • 多个按键组成一个快捷键时，使用 Frame singleLine 保持一行及至少 4 CSS px 间距；极窄容器由外层横向 ScrollArea 保留完整按键。

快速开始

以下示例展示推荐的基本组合。更多场景与组合限制见后文。

<script lang="ts">	import { Frame, Kbd, ScrollArea } from '@snowui-design-system/components';</script> <div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gap-4) var(--gap-3);">	<Kbd variant="border">⌘K</Kbd>	<Kbd variant="solid">⌘K</Kbd>	<ScrollArea axis="horizontal" ariaLabel="Shift plus K" style="width: max-content; max-width: 100%;">		<Frame singleLine gap={1} style="width: max-content;">		<Kbd style="font-size: var(--text-18); line-height: var(--leading-18);">Shift</Kbd>		<span aria-hidden="true">+</span>		<Kbd style="font-size: var(--text-18); line-height: var(--leading-18);">K</Kbd>		</Frame>	</ScrollArea></div>

API

关键字 类型 默认值 描述
variant "border" | "solid" "border" 样式 A（描边）或样式 B（实心底色）
children Snippet — 按键内容

未重新声明的继承能力请查所属基础组件文档；本表只列本组件源码具名公开属性。

使用边界与详细说明

功能概览

  • 两种视觉样式：描边（border）与实心底色（solid），通过 variant 切换

  • 语义化 <kbd> 元素输出

  • 内联行内元素，可嵌入任何文本流中

基础用法（样式 A — 描边）

<Kbd>⌘K</Kbd><Kbd>Ctrl</Kbd><Kbd>Enter</Kbd>

样式 B（实心底色）

<Kbd variant="solid">⌘K</Kbd><Kbd variant="solid">Ctrl</Kbd>

组合键

<ScrollArea axis="horizontal" ariaLabel="Command plus K" style="width: max-content; max-width: 100%;">    <Frame singleLine gap={1} style="width: max-content;">        <Kbd>⌘</Kbd>        <span aria-hidden="true">+</span>        <Kbd>K</Kbd>    </Frame></ScrollArea>

此区域的内容受保护。AI 在修改此区域前必须请求用户审查。

Kbd 样式覆盖

先阅读 完整 LICENSE；同任务、同版本、同范围去重。

优先用组件公开 Props 匹配合适样式，尽可能保留原有视觉。确需改写时按 样式选择与改写顺序 使用自己的 class（含项目已有 Tailwind）或实例 style。以下名称来自源码实际消费的公开 override；先核对目标作用域，不修改私有 DOM。采用 SnowUI Token 时选择正确类别，外部应用不被要求安装一方 utilities。

变量 用途与默认参考
--snowui-kbd-bg-override 背景（默认值见组件源码）
--snowui-kbd-font-size-override font-size（默认值见组件源码）
--snowui-kbd-line-height-override line-height（默认值见组件源码）
--snowui-kbd-padding-override padding y+x（默认 0 4px）
--snowui-kbd-radius-override border-radius（默认 calc(var(--radius-1) * 1.5) = 6px）
--snowui-kbd-shadow-override 阴影（默认值见组件源码）

设计指南 · Token · 组合边界

Kbd 类型与状态

必填属性：无具名必填属性。

可双向绑定：本组件未声明具名双向绑定属性；状态更新通过公开回调或所属宿主处理。

继承声明：FrameProps。继承能力以基类公开文档为准；Omit 中的字段已排除，不能按基类原样使用。

共享 Frame API · 返回 API

以下为公开属性实际引用的类型声明，来自源码；Svelte Snippet 表示内容片段，ComponentProps 表示对应组件的 Props。