Nuxt UI v3-alpha 已发布!

尝试一下
组件

徽章

显示简短文本以代表状态或类别。

使用

使用默认插槽设置徽章的文本。

徽章

<template>
  <UBadge>Badge</UBadge>
</template>

您也可以使用 label 道具

徽章
<template>
  <UBadge label="Badge" />
</template>

样式

使用 colorvariant 道具更改徽章的视觉样式。

  • variant 可以是 solid(默认)、outlinesoftsubtle

徽章

<template>
  <UBadge color="primary" variant="solid">Badge</UBadge>
</template>

除了 ui.colors 对象中的所有颜色,您还可以使用 whiteblack 颜色及其预定义变体。

白色

徽章

<template>
  <UBadge color="white" variant="solid">Badge</UBadge>
</template>

灰色

徽章

<template>
  <UBadge color="gray" variant="solid">Badge</UBadge>
</template>

黑色

徽章

<template>
  <UBadge color="black" variant="solid">Badge</UBadge>
</template>

尺寸

使用 size 道具更改徽章的大小。

徽章

<template>
  <UBadge size="sm">Badge</UBadge>
</template>

圆角

要自定义徽章的边框半径,可以使用 ui 道具。

徽章

<template>
  <UBadge :ui="{ rounded: 'rounded-full' }">Badge</UBadge>
</template>
您可以使用 ui 道具自定义整个 预设

道具

ui
{ base?: string; rounded?: string; font?: string; size?: DeepPartial<{ xs: string; sm: string; md: string; lg: string; }, any>; color?: DeepPartial<{ white: { solid: string; }; gray: { solid: string; }; black: { ...; }; }, any>; variant?: DeepPartial<...>; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}
size
BadgeSize
config.default.size
"sm""xs""md""lg"
label
string | number
null
color
string
config.default.color
variant
BadgeVariant
config.default.variant
"solid""outline""soft""subtle"

配置

{
  base: 'inline-flex items-center',
  rounded: 'rounded-md',
  font: 'font-medium',
  size: {
    xs: 'text-xs px-1.5 py-0.5',
    sm: 'text-xs px-2 py-1',
    md: 'text-sm px-2 py-1',
    lg: 'text-sm px-2.5 py-1.5'
  },
  color: {
    white: {
      solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
    },
    gray: {
      solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800'
    },
    black: {
      solid: 'text-white dark:text-gray-900 bg-gray-900 dark:bg-white'
    }
  },
  variant: {
    solid: 'bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900',
    outline: 'text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400',
    soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
    subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25'
  },
  default: {
    size: 'sm',
    variant: 'solid',
    color: 'primary'
  }
}