Badge

GitHub
用于表示状态或类别的简短文本。

用法

标签

使用默认插槽设置 Badge 的标签。

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

也可以通过使用 label 属性来实现同样的效果。

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

颜色

使用 color 属性更改 Badge 的颜色。

<template>
  <UBadge color="neutral">Badge</UBadge>
</template>

变体

使用 variant 属性更改 Badge 的变体样式。

<template>
  <UBadge color="neutral" variant="outline">Badge</UBadge>
</template>

尺寸

使用 size 属性更改 Badge 的尺寸。

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

Icon

使用 icon 属性在 Badge 内显示一个 Icon。

<template>
  <UBadge icon="i-lucide-rocket" size="md" color="primary" variant="solid">Badge</UBadge>
</template>

使用 leading 和 trailing 属性设置图标位置，或使用 leading-icon 和 trailing-icon 属性为每个位置设置不同的图标。

<template>
  <UBadge trailing-icon="i-lucide-arrow-right" size="md">Badge</UBadge>
</template>

Avatar

使用 avatar 属性在 Badge 内显示一个 Avatar。

<template>
  <UBadge
    :avatar="{
      src: 'https://github.com/nuxt.png'
    }"
    size="md"
    color="neutral"
    variant="outline"
  >
    Badge
  </UBadge>
</template>

示例

class 属性

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

<template>
  <UBadge class="font-bold rounded-full">Badge</UBadge>
</template>

API

属性

属性默认值类型
as

'span'

any

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

label

string | number

color

'primary'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

variant

'solid'

"solid" | "outline" | "soft" | "subtle"

size

'md'

"md" | "xs" | "sm" | "lg" | "xl"

icon

string

根据 leading 和 trailing 属性显示图标。

avatar

AvatarProps

在左侧显示 Avatar。

leading

boolean

当为 true 时，图标将显示在左侧。

leadingIcon

string

在左侧显示图标。

trailing

boolean

当为 true 时，图标将显示在右侧。

trailingIcon

string

在右侧显示图标。

ui

{ base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }

插槽

插槽类型
leading

{}

default

{}

trailing

{}

主题

app.config.ts
export default defineAppConfig({
  ui: {
    badge: {
      slots: {
        base: 'font-medium inline-flex items-center',
        label: 'truncate',
        leadingIcon: 'shrink-0',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailingIcon: 'shrink-0'
      },
      variants: {
        buttonGroup: {
          horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none',
          vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none'
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        variant: {
          solid: '',
          outline: '',
          soft: '',
          subtle: ''
        },
        size: {
          xs: {
            base: 'text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm',
            leadingIcon: 'size-3',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-3'
          },
          sm: {
            base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm',
            leadingIcon: 'size-3',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-3'
          },
          md: {
            base: 'text-xs px-2 py-1 gap-1 rounded-md',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-4'
          },
          lg: {
            base: 'text-sm px-2 py-1 gap-1.5 rounded-md',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-5'
          },
          xl: {
            base: 'text-base px-2.5 py-1 gap-1.5 rounded-md',
            leadingIcon: 'size-6',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-6'
          }
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: 'solid',
          class: 'bg-primary text-inverted'
        },
        {
          color: 'primary',
          variant: 'outline',
          class: 'text-primary ring ring-inset ring-primary/50'
        },
        {
          color: 'primary',
          variant: 'soft',
          class: 'bg-primary/10 text-primary'
        },
        {
          color: 'primary',
          variant: 'subtle',
          class: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
        },
        {
          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: {
        color: 'primary',
        variant: 'solid',
        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: {
        badge: {
          slots: {
            base: 'font-medium inline-flex items-center',
            label: 'truncate',
            leadingIcon: 'shrink-0',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            trailingIcon: 'shrink-0'
          },
          variants: {
            buttonGroup: {
              horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none',
              vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none'
            },
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            variant: {
              solid: '',
              outline: '',
              soft: '',
              subtle: ''
            },
            size: {
              xs: {
                base: 'text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm',
                leadingIcon: 'size-3',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-3'
              },
              sm: {
                base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm',
                leadingIcon: 'size-3',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-3'
              },
              md: {
                base: 'text-xs px-2 py-1 gap-1 rounded-md',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-4'
              },
              lg: {
                base: 'text-sm px-2 py-1 gap-1.5 rounded-md',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-5'
              },
              xl: {
                base: 'text-base px-2.5 py-1 gap-1.5 rounded-md',
                leadingIcon: 'size-6',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-6'
              }
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: 'solid',
              class: 'bg-primary text-inverted'
            },
            {
              color: 'primary',
              variant: 'outline',
              class: 'text-primary ring ring-inset ring-primary/50'
            },
            {
              color: 'primary',
              variant: 'soft',
              class: 'bg-primary/10 text-primary'
            },
            {
              color: 'primary',
              variant: 'subtle',
              class: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
            },
            {
              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: {
            color: 'primary',
            variant: 'solid',
            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: {
        badge: {
          slots: {
            base: 'font-medium inline-flex items-center',
            label: 'truncate',
            leadingIcon: 'shrink-0',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            trailingIcon: 'shrink-0'
          },
          variants: {
            buttonGroup: {
              horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none',
              vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none'
            },
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            variant: {
              solid: '',
              outline: '',
              soft: '',
              subtle: ''
            },
            size: {
              xs: {
                base: 'text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm',
                leadingIcon: 'size-3',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-3'
              },
              sm: {
                base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm',
                leadingIcon: 'size-3',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-3'
              },
              md: {
                base: 'text-xs px-2 py-1 gap-1 rounded-md',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-4'
              },
              lg: {
                base: 'text-sm px-2 py-1 gap-1.5 rounded-md',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-5'
              },
              xl: {
                base: 'text-base px-2.5 py-1 gap-1.5 rounded-md',
                leadingIcon: 'size-6',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-6'
              }
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: 'solid',
              class: 'bg-primary text-inverted'
            },
            {
              color: 'primary',
              variant: 'outline',
              class: 'text-primary ring ring-inset ring-primary/50'
            },
            {
              color: 'primary',
              variant: 'soft',
              class: 'bg-primary/10 text-primary'
            },
            {
              color: 'primary',
              variant: 'subtle',
              class: 'bg-primary/10 text-primary ring ring-inset ring-primary/25'
            },
            {
              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: {
            color: 'primary',
            variant: 'solid',
            size: 'md'
          }
        }
      }
    })
  ]
})
compoundVariants 中的一些颜色为了可读性被省略了。请查看 GitHub 上的源代码。

AvatarGroup

将多个 Avatar 堆叠在一起。

Breadcrumb

网站导航链接的层级结构。