组件
键盘键
在文本块中显示键盘键。
用法
使用默认插槽设置 Kbd 的文本。
K
<template>
<UKbd>K</UKbd>
</template>
您也可以使用 value 属性
K
<template>
<UKbd value="K" />
</template>
如 快捷键 页面所述，您可以使用 useShortcuts 组合式函数的 metaSymbol 属性根据用户的操作系统显示 Meta 键。
K
<script setup lang="ts">
const { metaSymbol } = useShortcuts()
</script>
<template>
<div class="flex items-center gap-0.5">
<UKbd>{{ metaSymbol }}</UKbd>
<UKbd>K</UKbd>
</div>
</template>
尺寸
使用 size 属性更改 Kbd 的尺寸。
U
<template>
<UKbd size="sm">U</UKbd>
</template>
属性
ui
{ base?: string; padding?: string; size?: DeepPartial<{ xs: string; sm: string; md: string; }, any>; rounded?: string; font?: string; background?: string; ring?: string; default?: DeepPartial<{ size: string; }, any>; } & { ...; } & { ...; }
{}size
KbdSize
config.default.size"sm""xs""md"value
字符串
null配置
{
base: 'inline-flex items-center justify-center text-gray-900 dark:text-white',
padding: 'px-1',
size: {
xs: 'h-4 min-w-[16px] text-[10px]',
sm: 'h-5 min-w-[20px] text-[11px]',
md: 'h-6 min-w-[24px] text-[12px]'
},
rounded: 'rounded',
font: 'font-medium font-sans',
background: 'bg-gray-100 dark:bg-gray-800',
ring: 'ring-1 ring-gray-300 dark:ring-gray-700 ring-inset',
default: {
size: 'sm'
}
}