键盘按键

GitHub
用于显示键盘按键的 kbd 元素。

用法

值

使用默认插槽设置 Kbd 的值。

<template>
  <UKbd>K</UKbd>
</template>

使用 value 属性也能达到同样的效果。

<template>
  <UKbd value="K" />
</template>

你可以将特殊按键传递给 value 属性，它会通过useKbd组合式函数。例如，meta 键在 macOS 上显示为 ⌘，在其他平台显示为 ⊞。

<template>
  <UKbd value="meta" />
</template>

变体

使用 variant 属性改变 Kbd 的变体。

<template>
  <UKbd variant="solid">K</UKbd>
</template>

尺寸

使用 size 属性改变 Kbd 的尺寸。

<template>
  <UKbd size="lg">K</UKbd>
</template>

示例

class 属性

使用 class 属性覆盖 Badge 的基础样式。

<template>
  <UKbd class="font-bold rounded-full" variant="subtle">K</UKbd>
</template>

API

属性

属性默认值类型
as

'kbd'

any

此组件应渲染为的元素或组件。

value

string

variant

'outline'

"outline" | "subtle" | "solid"

size

'md'

"sm" | "md" |lg"

插槽

插槽类型
default

{}

主题

app.config.ts
export default defineAppConfig({
  ui: {
    kbd: {
      base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans',
      variants: {
        variant: {
          solid: 'bg-inverted text-inverted',
          outline: 'bg-default text-highlighted ring ring-inset ring-accented',
          subtle: 'bg-elevated text-default ring ring-inset ring-accented'
        },
        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]'
        }
      },
      defaultVariants: {
        variant: 'outline',
        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: {
            variant: {
              solid: 'bg-inverted text-inverted',
              outline: 'bg-default text-highlighted ring ring-inset ring-accented',
              subtle: 'bg-elevated text-default ring ring-inset ring-accented'
            },
            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]'
            }
          },
          defaultVariants: {
            variant: 'outline',
            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: {
            variant: {
              solid: 'bg-inverted text-inverted',
              outline: 'bg-default text-highlighted ring ring-inset ring-accented',
              subtle: 'bg-elevated text-default ring ring-inset ring-accented'
            },
            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]'
            }
          },
          defaultVariants: {
            variant: 'outline',
            size: 'md'
          }
        }
      }
    })
  ]
})

InputNumber

输入具有可自定义范围的数值。

Link

对 <NuxtLink> 的封装，具有额外属性。