Kbd

显示键盘按键和快捷键。

导入

import { Kbd } from 'asterui'

示例

基础

简单的键盘按键显示。

</>

K

import { Kbd } from 'asterui'

function App() {
  return (
      <Kbd>K</Kbd>
    )
}

export default App

尺寸

用于各种上下文的不同尺寸。

</>

xssmmdlgxl

import { Kbd, Space } from 'asterui'

function App() {
  return (
      <Space align="center">
        <Kbd size="xs">xs</Kbd>
        <Kbd size="sm">sm</Kbd>
        <Kbd size="md">md</Kbd>
        <Kbd size="lg">lg</Kbd>
        <Kbd size="xl">xl</Kbd>
      </Space>
    )
}

export default App

按键组合

显示键盘快捷键。

</>

⌘+K

import { Kbd, Space } from 'asterui'

function App() {
  return (
      <Space align="center" size="xs">
        <Kbd>⌘</Kbd>
        <span>+</span>
        <Kbd>K</Kbd>
      </Space>
    )
}

export default App

文本中

在文本中内联使用 kbd。

</>

Press F to pay respects.

import { Kbd, Typography } from 'asterui'

function App() {
  const { Paragraph } = Typography
  
  return (
      <Paragraph>
        Press <Kbd size="sm">F</Kbd> to pay respects.
      </Paragraph>
    )
}

export default App

方向键

用于导航说明的方向键显示。

</>

▲

◀▼▶

import { Kbd, Space } from 'asterui'

function App() {
  return (
      <div className="flex flex-col items-center gap-1">
        <Kbd>▲</Kbd>
        <Space size="xs">
          <Kbd>◀</Kbd>
          <Kbd>▼</Kbd>
          <Kbd>▶</Kbd>
        </Space>
      </div>
    )
}

export default App

完整键盘

完整键盘布局示例。

</>

qwertyuiop

asdfghjkl

zxcvbnm

import { Kbd } from 'asterui'

function App() {
  return (
      <div className="flex flex-col gap-1">
        <div className="flex gap-1">
          <Kbd>q</Kbd><Kbd>w</Kbd><Kbd>e</Kbd><Kbd>r</Kbd><Kbd>t</Kbd>
          <Kbd>y</Kbd><Kbd>u</Kbd><Kbd>i</Kbd><Kbd>o</Kbd><Kbd>p</Kbd>
        </div>
        <div className="flex gap-1 ml-2">
          <Kbd>a</Kbd><Kbd>s</Kbd><Kbd>d</Kbd><Kbd>f</Kbd><Kbd>g</Kbd>
          <Kbd>h</Kbd><Kbd>j</Kbd><Kbd>k</Kbd><Kbd>l</Kbd>
        </div>
        <div className="flex gap-1 ml-6">
          <Kbd>z</Kbd><Kbd>x</Kbd><Kbd>c</Kbd><Kbd>v</Kbd>
          <Kbd>b</Kbd><Kbd>n</Kbd><Kbd>m</Kbd>
        </div>
      </div>
    )
}

export default App

API

Kbd

属性	描述	类型	默认值
size	kbd 的尺寸	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
children	按键内容	React.ReactNode	-
className	额外的 CSS 类名	string	-

无障碍

• 使用语义化的 <kbd> HTML 元素
• 屏幕阅读器适当地朗读键盘按键
• 高对比度样式确保可见性