Kbd

用于显示来自键盘的文本用户输入。

⌘⇧⌥⌃Ctrl+B

安装 ​

pnpm dlx shadcn-vue@latest add kbd

使用 ​

vue
<script setup lang="ts">
import { Kbd } from '@/components/ui/kbd'
</script>

<template>
  <Kbd>Ctrl</Kbd>
</template>

示例 ​

分组 ​

使用 KbdGroup 组件将键盘按键组合在一起。

⌘⇧⌥⌃Ctrl+B

按钮 ​

在 Button 组件内使用 Kbd 组件，在按钮中显示键盘按键。

工具提示 ​

您可以在 Tooltip 组件内使用 Kbd 组件，在工具提示中显示键盘按键。

输入组 ​

您可以在 InputGroupAddon 组件内使用 Kbd 组件，在输入组中显示键盘按键。

⌘K

API 参考 ​

Kbd ​

使用 Kbd 组件显示键盘按键。

属性类型默认值
classstring``
vue
<Kbd>
Ctrl
</Kbd>

KbdGroup ​

使用 KbdGroup 组件将 Kbd 组件组合在一起。

属性类型默认值
classstring``
vue
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>
Edit this page on GitHub