Kbd 键盘键

键盘按键，用于说明快捷键。

打开命令面板

Ctrl

K

<script setup lang="ts">
  import { Inline, Kbd, Text } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center">
    <Text>打开命令面板</Text>
    <Inline align="center" gap="xs">
      <Kbd>Ctrl</Kbd>
      <Text tone="faint">+</Text>
      <Kbd>K</Kbd>
    </Inline>
  </Inline>
</template>

vue

用法

import { Kbd } from '@hina-ui/vue'

组件渲染为原生的 kbd，使用等宽字体，底边比其余三边更粗，呈现键帽的轮廓。一个组件对应一个按键。

Esc

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

<template>
  <Kbd>Esc</Kbd>
</template>

vue

示例

组合键

多个按键各用一个组件，之间的连接符号由调用方决定。同时按下的按键之间写加号，先后按下的用文字说明。

Ctrl

Shift

P

G

随后

H

<script setup lang="ts">
  import { Inline, Kbd, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack>
    <Inline align="center" gap="xs">
      <Kbd>Ctrl</Kbd>
      <Text tone="faint">+</Text>
      <Kbd>Shift</Kbd>
      <Text tone="faint">+</Text>
      <Kbd>P</Kbd>
    </Inline>
    <Inline align="center" gap="xs">
      <Kbd>G</Kbd>
      <Text tone="faint">随后</Text>
      <Kbd>H</Kbd>
    </Inline>
  </Stack>
</template>

vue

跟随上下文缩放

字号是相对值，取所在文字的 81.25%。用在小字号的段落中时会一同缩小。

按 Enter 提交，按 Esc 取消。

小字号中的 Enter 会一同缩小。

<script setup lang="ts">
  import { Kbd, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-lg">
    <Text>
      按
      <Kbd>Enter</Kbd>
      提交，按
      <Kbd>Esc</Kbd>
      取消。
    </Text>
    <Text size="sm">
      小字号中的
      <Kbd>Enter</Kbd>
      会一同缩小。
    </Text>
  </Stack>
</template>

vue

正文中的按键

Prose 会为其中的原生 kbd 标签应用同一套样式。渲染 Markdown 或者富文本时不需要替换标签。

正文中的 kbd 标签不需要单独引入组件。

<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-lg">
    <p>
      正文中的
      <kbd>kbd</kbd>
      标签不需要单独引入组件。
    </p>
  </Prose>
</template>

vue

API

Props

属性	类型	默认值	说明
`class`	`string`	—	追加至根元素的类名

Slots

插槽	说明
`default`	按键名称

用法

示例

组合键

跟随上下文缩放

正文中的按键

无障碍

API

Props

Slots