logo
简体中文

导航菜单

文档
Vue

Badge

简介

Badge Vue 组件用于突出显示少量信息，如标签、状态或计数。这是 Vue 版本的实现，提供了响应式的交互体验。

组件特性：

  • 支持多种预设颜色
  • 支持多种尺寸
  • 支持描边样式
  • 响应式设计，适配不同屏幕尺寸
  • Vue 3 Composition API 支持

案例

默认PrimarySecondaryAccent
 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;">
        <Badge>默认</Badge>
        <Badge variant="primary">Primary</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="accent">Accent</Badge>
    </div>
</template>

Props

class

自定义 CSS 类名，用于覆盖默认样式。

默认样式
自定义类名
圆角样式
阴影效果 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge>默认样式</Badge>
</template>
默认样式
自定义类名
圆角样式
阴影效果 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge class="custom-badge">自定义类名</Badge>
</template>

<style>
.custom-badge {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    color: white;
    font-weight: bold;
}
</style>
默认样式
自定义类名
圆角样式
阴影效果 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge class="rounded-full px-3 py-1">圆角样式</Badge>
</template>

<style>
.rounded-full {
    border-radius: 9999px;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
</style>
默认样式
自定义类名
圆角样式
阴影效果 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge class="shadow-lg">阴影效果</Badge>
</template>

<style>
.shadow-lg {
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
</style>

outline

徽章是否为描边样式，设置为 true 时显示为描边风格。

primary
secondary
accent 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge :outline="true" variant="primary">primary</Badge>
</template>
primary
secondary
accent 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge :outline="true" variant="secondary">secondary</Badge>
</template>
primary
secondary
accent 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge :outline="true" variant="accent">accent</Badge>
</template>

size

徽章的尺寸，支持 xs、sm、md、lg 四种尺寸。

987,654
987,654
987,654
987,654 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge size="lg">987,654</Badge>
</template>
987,654
987,654
987,654
987,654 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge size="md">987,654</Badge>
</template>
987,654
987,654
987,654
987,654 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge size="sm">987,654</Badge>
</template>
987,654
987,654
987,654
987,654 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge size="xs">987,654</Badge>
</template>

variant

徽章的颜色变体，支持多种预设颜色主题。

default
primary
secondary
accent
ghost
info
success
warning
error 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge>default</Badge>
</template>
default
primary
secondary
accent
ghost
info
success
warning
error 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge variant="primary">primary</Badge>
</template>
default
primary
secondary
accent
ghost
info
success
warning
error 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge variant="secondary">secondary</Badge>
</template>
default
primary
secondary
accent
ghost
info
success
warning
error 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge variant="accent">accent</Badge>
</template>
default
primary
secondary
accent
ghost
info
success
warning
error 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge variant="ghost">ghost</Badge>
</template>
default
primary
secondary
accent
ghost
info
success
warning
error 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge variant="info">info</Badge>
</template>
default
primary
secondary
accent
ghost
info
success
warning
error 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge variant="success">success</Badge>
</template>
default
primary
secondary
accent
ghost
info
success
warning
error 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge variant="warning">warning</Badge>
</template>
default
primary
secondary
accent
ghost
info
success
warning
error 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Badge variant="error">error</Badge>
</template>

Slots

default

徽章内容，支持任意文本内容。

默认PrimarySecondaryAccent
 
<script setup lang="ts">
import { Badge } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;">
        <Badge>默认</Badge>
        <Badge variant="primary">Primary</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="accent">Accent</Badge>
    </div>
</template>

搜索