基础

Kbd 键盘快捷键

用于键盘快捷键场景的 MoriUI 组件。

资源

导入

import { Kbd, KbdGroup } from 'moriui'

组合方式

Kbd 表示单个按键，KbdGroup 将多个按键与分隔符作为一个快捷键序列排列。

RTL

快捷键字符本身保持原顺序；外围说明文字可继承 RTL 方向。

示例

概览

在说明文字中展示快捷键。

打开命令面板 ⌘ K

<script setup lang="ts">
  import { Kbd } from 'moriui'
</script>

<template>
  <p class="flex items-center gap-2 text-sm">
    打开命令面板 <Kbd>⌘ K</Kbd>
  </p>
</template>

组合键

多个按键组成快捷键序列。

⌘+Shift+P

<script setup lang="ts">
  import {
    Kbd,
    KbdGroup
  } from 'moriui'
</script>

<template>
  <KbdGroup><Kbd>⌘</Kbd><span>+</span><Kbd>Shift</Kbd><span>+</span><Kbd>P</Kbd></KbdGroup>
</template>

按钮

按钮同时提示键盘操作。

<script setup lang="ts">
  import { Button, Kbd } from 'moriui'
</script>

<template>
  <Button variant="outline">
    保存 <Kbd>⌘ S</Kbd>
  </Button>
</template>

提示

Tooltip 补充低频快捷键。

<script setup lang="ts">
  import {
    Button,
    Kbd,
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger
  } from 'moriui'
</script>

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger as-child>
        <Button variant="outline">
          格式化
        </Button>
      </TooltipTrigger><TooltipContent>格式化文档 <Kbd>⌥ ⇧ F</Kbd></TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

输入组合

搜索输入展示唤起快捷键。

⌘ K

<script setup lang="ts">
  import {
    InputGroup,
    InputGroupAddon,
    InputGroupInput,
    Kbd
  } from 'moriui'
</script>

<template>
  <InputGroup class="w-full max-w-sm">
    <InputGroupInput aria-label="搜索" placeholder="搜索命令" /><InputGroupAddon align="inline-end">
      <Kbd>⌘ K</Kbd>
    </InputGroupAddon>
  </InputGroup>
</template>

RTL

快捷键与 RTL 说明文字组合。

افتح البحث ⌘ K

<script setup lang="ts">
  import { Kbd } from 'moriui'
</script>

<template>
  <p dir="rtl" class="flex items-center gap-2 text-sm">
    افتح البحث <Kbd>⌘ K</Kbd>
  </p>
</template>

API

属性	类型	默认值	说明
Kbd class	`HTMLAttributes["class"]`	`undefined`	合并到单个键帽稳定样式上的调用方类。
KbdGroup class	`HTMLAttributes["class"]`	`undefined`	合并到快捷键序列稳定样式上的调用方类。

无障碍说明

Kbd 只呈现按键提示，不提供交互行为。快捷键必须有等价的可见操作；使用平台符号时应结合上下文确保用户能够理解。

关联组件

操作按钮悬停提示