nano-ui

Badge 徽章 ​

出现在按钮、图标旁的数字或状态标记。

基础用法 ​

展示新消息数量。

12
3
1
2

<template>
  <div class="demo-badge">
    <n-badge :value="12">
      <n-button>评论</n-button>
    </n-badge>
    <n-badge :value="3" type="primary">
      <n-button>回复</n-button>
    </n-badge>
    <n-badge :value="1" type="warning">
      <n-button>消息</n-button>
    </n-badge>
    <n-badge :value="2" type="info">
      <n-button>通知</n-button>
    </n-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  gap: 40px;
}
</style>

最大值 ​

可自定义最大值。

99+
10+

<template>
  <div class="demo-badge">
    <n-badge :value="200" :max="99">
      <n-button>评论</n-button>
    </n-badge>
    <n-badge :value="100" :max="10">
      <n-button>回复</n-button>
    </n-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  gap: 40px;
}
</style>

自定义内容 ​

可以显示数字以外的文本内容。

new
hot

<template>
  <div class="demo-badge">
    <n-badge value="new">
      <n-button>评论</n-button>
    </n-badge>
    <n-badge value="hot">
      <n-button>回复</n-button>
    </n-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  gap: 40px;
}
</style>

小圆点 ​

以红点的形式标注需要关注的内容。

<template>
  <div class="demo-badge">
    <n-badge is-dot>
      <n-button>消息</n-button>
    </n-badge>
    <n-badge is-dot type="primary">
      <n-button>评论</n-button>
    </n-badge>
    <n-badge is-dot type="success">
      <n-button>回复</n-button>
    </n-badge>
    <n-badge is-dot type="warning">
      <n-button>通知</n-button>
    </n-badge>
    <n-badge is-dot type="info">
      <n-button>提醒</n-button>
    </n-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  gap: 40px;
}
</style>

不同位置 ​

可以在组件的四个角显示徽章。

1
2
3
4

<template>
  <div class="demo-badge">
    <n-badge value="1" position="top-right">
      <n-button>右上</n-button>
    </n-badge>
    <n-badge value="2" position="top-left">
      <n-button>左上</n-button>
    </n-badge>
    <n-badge value="3" position="bottom-right">
      <n-button>右下</n-button>
    </n-badge>
    <n-badge value="4" position="bottom-left">
      <n-button>左下</n-button>
    </n-badge>
  </div>
</template>

<style scoped>
.demo-badge {
  display: flex;
  gap: 40px;
}
</style>

API ​

Props ​

名称说明类型默认值
value显示值string | number''
max最大值number99
type类型'primary' | 'success' | 'warning' | 'danger' | 'info''danger'
is-dot小圆点booleanfalse
hidden隐藏标记booleanfalse
position位置'top-right' | 'top-left' | 'bottom-right' | 'bottom-left''top-right'

Slots ​

插槽名说明
default徽章的内容

样式变量 ​

变量名说明默认值
--nano-badge-bg-color背景颜色var(--nano-color-danger)
--nano-badge-text-color文字颜色var(--nano-color-white)
--nano-badge-font-size字体大小12px
--nano-badge-size徽章大小18px
--nano-badge-dot-size圆点大小8px
--nano-badge-padding内边距0 6px
--nano-badge-border-radius圆角大小10px