Badge 提示徽章

提示徽章一般出现在图标或文字的右上角，以提供及时、重要的信息提示。

基本用法

⁰

^new

<template>
  <div className="idesign-demo-block-row">
    <i-badge>
      <i-button>按钮</i-button>
    </i-badge>
    <i-badge count="new">
      <i-button>按钮</i-button>
    </i-badge>
  </div>
</template>

最大数字

可通过 maxCount 属性设置最大数字，默认为 99，超出则加上 +。

⁹⁺

⁹⁹⁺

⁹⁹⁹⁺

<template>
  <div className="idesign-demo-block-row">
    <i-badge :count="10" :maxCount="9">
      <i-button>按钮</i-button>
    </i-badge>
    <i-badge :count="100">
      <i-button>按钮</i-button>
    </i-badge>
    <i-badge :count="1000" :maxCount="999">
      <i-button>按钮</i-button>
    </i-badge>
  </div>
</template>

自定义颜色

可通过 color 属性自定义徽标颜色。

⁰

<template>
  <div className="idesign-demo-block-row">
    <i-badge color="#7EBF50">
      <i-button>按钮</i-button>
    </i-badge>
    <i-badge color="#F2AD4E">
      <i-button>按钮</i-button>
    </i-badge>
  </div>
</template>

小红点徽章

可通过 dot 属性控制为小红点样式。

<template>
  <div className="idesign-demo-block-row">
    <i-badge dot>
      <i-button>按钮</i-button>
    </i-badge>
    <i-badge dot count="new">
      <i-button>按钮</i-button>
    </i-badge>
  </div>
</template>

自定义尺寸

可通过 size 属性自定义徽标尺寸。

⁰

<template>
  <div className="idesign-demo-block-row">
    <i-badge size="medium">
      <i-button>按钮</i-button>
    </i-badge>
    <i-badge size="small">
      <i-button>按钮</i-button>
    </i-badge>
  </div>
</template>

自定义形状

可通过 shape 属性自定义徽标形状。

⁰

<template>
  <div className="idesign-demo-block-row">
    <i-badge shape="circle">
      <i-button>按钮</i-button>
    </i-badge>
    <i-badge shape="round">
      <i-button>按钮</i-button>
    </i-badge>
  </div>
</template>

徽标位置偏移

可通过 offset 属性设置徽标位置偏移量。

⁶

<template>
  <div className="idesign-demo-block-row">
    <i-badge :count="6">
      <i-button>按钮</i-button>
    </i-badge>
    <i-badge :count="6" :offset="[10, 10]">
      <i-button>按钮</i-button>
    </i-badge>
    <i-badge :count="6" :offset="[-10, 10]">
      <i-button>按钮</i-button>
    </i-badge>
  </div>
</template>

Badge Attributes

属性	说明	类型	默认值
count	徽标内容，可为任意内容	`string〡HTMLElement`	`0`
maxCount	封顶的数字值	`number`	`99`
color	徽标颜色	`string`	`--`
dot	是否为红点	`boolean`	`false`
size	尺寸	`'small'〡'medium'`	`medium`
shape	徽标形状	`'circle'〡'round'`	`circle`
showZero	当数值为 0 时，是否展示徽标	`boolean`	`true`
offset	徽标偏移量	`Array<string〡number>`	`--`

# Badge 提示徽章

# 基本用法

# 最大数字

# 自定义颜色

# 小红点徽章

# 自定义尺寸

# 自定义形状

# 徽标位置偏移

# Badge Attributes