Badge 徽章

小型状态标识组件，用于标签和标记。

?

名称	分类	说明	类型	默认值
type	? 风格	类型	'primary' | 'success' | 'info' | 'warning' | 'danger'	'primary'
outline	? 风格	轮廓边框样式	boolean	false
dash	? 风格	虚线边框样式	boolean	false
round	? 风格	圆角像素风格	boolean	false
size	? 尺寸	尺寸	'large' | 'default' | 'small'	'default'
color	? 颜色	自定义十六进制颜色	string	—
icon	? 内容	图标名称	string	—
default	? 插槽	徽章内容		—

基础用法

基础的徽章展示。

<template>
  <div class="demo-badge">
    <px-badge>Badge</px-badge>
    <px-badge type="primary">Primary</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

类型

使用 type 属性来定义不同类型。

<template>
  <div class="demo-badge">
    <px-badge type="primary">Primary</px-badge>
    <px-badge type="success">Success</px-badge>
    <px-badge type="info">Info</px-badge>
    <px-badge type="warning">Warning</px-badge>
    <px-badge type="danger">Danger</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

尺寸

使用 size 属性来设置徽章大小。

<template>
  <div class="demo-badge">
    <px-badge type="primary" size="large">Large</px-badge>
    <px-badge type="primary">Default</px-badge>
    <px-badge type="primary" size="small">Small</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

图标

使用 icon 属性在徽章内添加像素图标，可与文本内容组合使用。

<template>
  <div class="demo-badge">
    <px-badge type="primary" icon="heart">Like</px-badge>
    <px-badge type="success" icon="check">Done</px-badge>
    <px-badge type="warning" icon="notification">Alert</px-badge>
    <px-badge type="info" icon="bookmark">Saved</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

空徽章

省略插槽内容可渲染为空心圆点指示器，随 size 自动缩放。

<template>
  <div class="demo-badge-group">
    <div class="demo-badge">
      <px-badge type="primary" />
      <px-badge type="success" />
      <px-badge type="info" />
      <px-badge type="warning" />
      <px-badge type="danger" />
    </div>
    <div class="demo-badge">
      <px-badge type="primary" size="large" />
      <px-badge type="primary" />
      <px-badge type="primary" size="small" />
    </div>
  </div>
</template>

<style scoped>
.demo-badge-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

圆角样式

使用 round 属性来应用像素风格的圆角。

<template>
  <div class="demo-badge">
    <px-badge type="primary" round>Primary</px-badge>
    <px-badge type="success" round>Success</px-badge>
    <px-badge type="info" round>Info</px-badge>
    <px-badge type="warning" round>Warning</px-badge>
    <px-badge type="danger" round>Danger</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

轮廓样式

使用 outline 属性来显示实线边框、透明背景。

<template>
  <div class="demo-badge">
    <px-badge type="primary" outline>Primary</px-badge>
    <px-badge type="success" outline>Success</px-badge>
    <px-badge type="info" outline>Info</px-badge>
    <px-badge type="warning" outline>Warning</px-badge>
    <px-badge type="danger" outline>Danger</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

虚线样式

使用 dash 属性来显示虚线边框、浅色背景。

<template>
  <div class="demo-badge">
    <px-badge type="primary" dash>Primary</px-badge>
    <px-badge type="success" dash>Success</px-badge>
    <px-badge type="info" dash>Info</px-badge>
    <px-badge type="warning" dash>Warning</px-badge>
    <px-badge type="danger" dash>Danger</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

自定义颜色

使用 color 属性来设置自定义十六进制颜色。可与默认、轮廓和虚线样式搭配使用。

<template>
  <div class="demo-badge">
    <px-badge color="#8b5cf6">Purple</px-badge>
    <px-badge color="#f97316">Orange</px-badge>
    <px-badge color="#8b5cf6" outline>Outline</px-badge>
    <px-badge color="#f97316" dash>Dash</px-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>

文本中的徽章

徽章可以内联放置在标题和段落中。

<template>
  <div class="demo-badge-text">
    <h2>
      Inbox
      <px-badge type="danger">99+</px-badge>
    </h2>
    <p>
      This feature is
      <px-badge type="success" size="small">NEW</px-badge>
      and ready to use.
    </p>
    <h3>
      Messages
      <px-badge type="primary" />
    </h3>
  </div>
</template>

<style scoped>
.demo-badge-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

按钮中的徽章

徽章可以嵌套在按钮内部，作为计数指示器或圆点标记。

<template>
  <div class="demo-badge">
    <px-button type="primary">
      Inbox
      <px-badge type="danger" size="small">8</px-badge>
    </px-button>
    <px-button type="info">
      Notifications
      <px-badge type="danger" size="small" />
    </px-button>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
</style>