Kbd 键盘按键

用于显示键盘快捷键和按键组合的像素风格组件。方向键使用像素图标渲染，修饰键使用 Unicode 符号。

?

名称	分类	说明	类型	默认值
size	? 尺寸	尺寸	'large' | 'default' | 'small'	'default'
keys	? 内容	特殊按键标识数组，支持: command, shift, ctrl, alt, option, enter, delete, escape, tab, capslock, up, down, left, right, space, win, fn, home, end, pageup, pagedown	KbdKey[]	—
default	? 插槽	键盘按键显示内容		—

基础用法

使用文本内容展示简单的键盘按键。

<template>
  <div class="demo-kbd">
    <px-kbd>K</px-kbd>
    <px-kbd>F1</px-kbd>
    <px-kbd>Ctrl</px-kbd>
    <px-kbd>Enter</px-kbd>
    <px-kbd>Space</px-kbd>
  </div>
</template>

<style scoped>
.demo-kbd {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

特殊按键

使用 keys 属性渲染特殊按键符号。方向键自动使用像素图标，修饰键使用 Unicode 符号。

<template>
  <div class="demo-kbd">
    <px-kbd :keys="['command']">K</px-kbd>
    <px-kbd :keys="['ctrl']">C</px-kbd>
    <px-kbd :keys="['shift']">A</px-kbd>
    <px-kbd :keys="['alt']">F4</px-kbd>
    <px-kbd :keys="['enter']" />
    <px-kbd :keys="['escape']" />
    <px-kbd :keys="['tab']" />
    <px-kbd :keys="['delete']" />
  </div>
</template>

<style scoped>
.demo-kbd {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

按键组合

将 keys 属性与插槽内容结合使用来展示键盘快捷键。

<template>
  <div class="demo-kbd">
    <div class="demo-kbd-row">
      <span>Copy:</span>
      <px-kbd :keys="['ctrl']">C</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Paste:</span>
      <px-kbd :keys="['ctrl']">V</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Undo:</span>
      <px-kbd :keys="['ctrl']">Z</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Save:</span>
      <px-kbd :keys="['command']">S</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Search:</span>
      <px-kbd :keys="['ctrl', 'shift']">P</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Screenshot:</span>
      <px-kbd :keys="['command', 'shift']">4</px-kbd>
    </div>
  </div>
</template>

<style scoped>
.demo-kbd {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.demo-kbd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--px-font-family);
  font-size: 14px;
}
</style>

尺寸

使用 size 属性来设置按键大小。

<template>
  <div class="demo-kbd">
    <div class="demo-kbd-row">
      <span>Small:</span>
      <px-kbd size="small" :keys="['ctrl']">C</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Default:</span>
      <px-kbd :keys="['ctrl']">C</px-kbd>
    </div>
    <div class="demo-kbd-row">
      <span>Large:</span>
      <px-kbd size="large" :keys="['ctrl']">C</px-kbd>
    </div>
  </div>
</template>

<style scoped>
.demo-kbd {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.demo-kbd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--px-font-family);
  font-size: 14px;
}
</style>

所有按键参考

所有支持的特殊按键标识及其渲染符号的完整参考。

<template>
  <div class="demo-kbd">
    <div class="demo-kbd-section">
      <h4>Modifier Keys</h4>
      <div class="demo-kbd-grid">
        <div class="demo-kbd-item">
          <px-kbd :keys="['command']" />
          <span>command</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['shift']" />
          <span>shift</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['ctrl']" />
          <span>ctrl</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['alt']" />
          <span>alt</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['option']" />
          <span>option</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['win']" />
          <span>win</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['fn']" />
          <span>fn</span>
        </div>
      </div>
    </div>

    <div class="demo-kbd-section">
      <h4>Action Keys</h4>
      <div class="demo-kbd-grid">
        <div class="demo-kbd-item">
          <px-kbd :keys="['enter']" />
          <span>enter</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['delete']" />
          <span>delete</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['escape']" />
          <span>escape</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['tab']" />
          <span>tab</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['capslock']" />
          <span>capslock</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['space']" />
          <span>space</span>
        </div>
      </div>
    </div>

    <div class="demo-kbd-section">
      <h4>Arrow Keys</h4>
      <div class="demo-kbd-grid">
        <div class="demo-kbd-item">
          <px-kbd :keys="['up']" />
          <span>up</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['down']" />
          <span>down</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['left']" />
          <span>left</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['right']" />
          <span>right</span>
        </div>
      </div>
    </div>

    <div class="demo-kbd-section">
      <h4>Navigation Keys</h4>
      <div class="demo-kbd-grid">
        <div class="demo-kbd-item">
          <px-kbd :keys="['home']" />
          <span>home</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['end']" />
          <span>end</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['pageup']" />
          <span>pageup</span>
        </div>
        <div class="demo-kbd-item">
          <px-kbd :keys="['pagedown']" />
          <span>pagedown</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.demo-kbd {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.demo-kbd-section h4 {
  margin: 0 0 12px;
  font-family: var(--px-font-family);
  font-size: 14px;
}
.demo-kbd-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.demo-kbd-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.demo-kbd-item span {
  font-family: var(--px-font-family);
  font-size: 10px;
  color: var(--px-text-color-secondary);
}
</style>