Kbd
一个用于显示键盘按键的 kbd 元素。
用法
值
使用默认插槽设置 Kbd 的值。
K
<template>
<UKbd>K</UKbd>
</template>
通过使用 value 属性，你可以达到相同的效果。
K
<template>
<UKbd value="K" />
</template>
你可以向 value 属性传递特殊按键，这些按键会经过useKbd组合式函数处理。例如，meta 键在 macOS 上显示为 ⌘，在其他平台上显示为 Ctrl。
<template>
<UKbd value="meta" />
</template>
颜色 新
使用 color 属性改变 Kbd 的颜色。
K
<template>
<UKbd color="neutral">K</UKbd>
</template>
变体
使用 variant 属性改变 Kbd 的变体样式。
K
<template>
<UKbd color="neutral" variant="solid">K</UKbd>
</template>
尺寸
使用 size 属性改变 Kbd 的大小。
K
<template>
<UKbd size="lg">K</UKbd>
</template>
示例
class 属性
使用 class 属性覆盖徽章的基础样式。
K
<template>
<UKbd class="font-bold rounded-full" variant="subtle">K</UKbd>
</template>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
value |
| |
color |
|
|
variant |
|
|
尺寸 |
|
|
插槽
| 插槽 | 类型 |
|---|---|
默认值 |
|
主题
app.config.ts
export default defineAppConfig({
ui: {
kbd: {
base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans',
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: ''
},
size: {
sm: 'h-4 min-w-[16px] text-[10px]',
md: 'h-5 min-w-[20px] text-[11px]',
lg: 'h-6 min-w-[24px] text-[12px]'
}
},
compoundVariants: [
{
color: 'primary',
variant: 'solid',
class: 'text-inverted bg-primary'
},
{
color: 'primary',
variant: 'outline',
class: 'ring ring-inset ring-primary/50 text-primary'
},
{
color: 'primary',
variant: 'soft',
class: 'text-primary bg-primary/10'
},
{
color: 'primary',
variant: 'subtle',
class: 'text-primary ring ring-inset ring-primary/25 bg-primary/10'
},
{
color: 'neutral',
variant: 'solid',
class: 'text-inverted bg-inverted'
},
{
color: 'neutral',
variant: 'outline',
class: 'ring ring-inset ring-accented text-default bg-default'
},
{
color: 'neutral',
variant: 'soft',
class: 'text-default bg-elevated'
},
{
color: 'neutral',
variant: 'subtle',
class: 'ring ring-inset ring-accented text-default bg-elevated'
}
],
defaultVariants: {
variant: 'outline',
color: 'neutral',
size: 'md'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
kbd: {
base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans',
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: ''
},
size: {
sm: 'h-4 min-w-[16px] text-[10px]',
md: 'h-5 min-w-[20px] text-[11px]',
lg: 'h-6 min-w-[24px] text-[12px]'
}
},
compoundVariants: [
{
color: 'primary',
variant: 'solid',
class: 'text-inverted bg-primary'
},
{
color: 'primary',
variant: 'outline',
class: 'ring ring-inset ring-primary/50 text-primary'
},
{
color: 'primary',
variant: 'soft',
class: 'text-primary bg-primary/10'
},
{
color: 'primary',
variant: 'subtle',
class: 'text-primary ring ring-inset ring-primary/25 bg-primary/10'
},
{
color: 'neutral',
variant: 'solid',
class: 'text-inverted bg-inverted'
},
{
color: 'neutral',
variant: 'outline',
class: 'ring ring-inset ring-accented text-default bg-default'
},
{
color: 'neutral',
variant: 'soft',
class: 'text-default bg-elevated'
},
{
color: 'neutral',
variant: 'subtle',
class: 'ring ring-inset ring-accented text-default bg-elevated'
}
],
defaultVariants: {
variant: 'outline',
color: 'neutral',
size: 'md'
}
}
}
})
]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
ui: {
kbd: {
base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans',
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: ''
},
size: {
sm: 'h-4 min-w-[16px] text-[10px]',
md: 'h-5 min-w-[20px] text-[11px]',
lg: 'h-6 min-w-[24px] text-[12px]'
}
},
compoundVariants: [
{
color: 'primary',
variant: 'solid',
class: 'text-inverted bg-primary'
},
{
color: 'primary',
variant: 'outline',
class: 'ring ring-inset ring-primary/50 text-primary'
},
{
color: 'primary',
variant: 'soft',
class: 'text-primary bg-primary/10'
},
{
color: 'primary',
variant: 'subtle',
class: 'text-primary ring ring-inset ring-primary/25 bg-primary/10'
},
{
color: 'neutral',
variant: 'solid',
class: 'text-inverted bg-inverted'
},
{
color: 'neutral',
variant: 'outline',
class: 'ring ring-inset ring-accented text-default bg-default'
},
{
color: 'neutral',
variant: 'soft',
class: 'text-default bg-elevated'
},
{
color: 'neutral',
variant: 'subtle',
class: 'ring ring-inset ring-accented text-default bg-elevated'
}
],
defaultVariants: {
variant: 'outline',
color: 'neutral',
size: 'md'
}
}
}
})
]
})