AKbd
AKbd renders a keyboard-key indicator, styled like a physical key cap. Use it to display shortcuts and hotkeys in help text, tooltips, or menus.
Import
import { Kbd } from '@any-design/anyui/vue';
// React: import { Kbd } from '@any-design/anyui/react';
// Svelte: import { Kbd } from '@any-design/anyui/svelte';Basic usage
<template>
Press <AKbd>Enter</AKbd> to submit.
</template>Examples
Multiple keys
Compose several keys to show a chord.
<template>
<AKbd>Ctrl</AKbd> + <AKbd>K</AKbd> opens the command palette.
</template>Small size
Use size="small" for tighter contexts like menu items.
<template>
<AKbd size="small">Esc</AKbd>
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
size |
‘default’ | ‘small’ | ‘default’ | Key size. |
Slots
| Slot | Props | Description |
|---|---|---|
default |
— | Key label. |
AKbd
AKbd 渲染键盘按键标识，外观类似物理键帽。用于在帮助文字、提示气泡或菜单中展示快捷键与热键。
引入
import { Kbd } from '@any-design/anyui/vue';
// React: import { Kbd } from '@any-design/anyui/react';
// Svelte: import { Kbd } from '@any-design/anyui/svelte';基础用法
<template>
按 <AKbd>Enter</AKbd> 提交。
</template>示例
组合键
组合多个按键以展示组合快捷键。
<template>
<AKbd>Ctrl</AKbd> + <AKbd>K</AKbd> 打开命令面板。
</template>小尺寸
使用 size="small" 适配菜单项等紧凑场景。
<template>
<AKbd size="small">Esc</AKbd>
</template>属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size |
‘default’ | ‘small’ | ‘default’ | 按键尺寸。 |
插槽
| 插槽 | 作用域参数 | 说明 |
|---|---|---|
default |
— | 按键文案。 |