---
nav: default
---
### Badge
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fbadge"/>
<a href="demo/#/component/badge" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/badge</a>

#### 交互&设计参考
- [这个控件叫：Badge/徽标/小红点](https://zhuanlan.zhihu.com/p/26107887)

---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/badge" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <badge text="1" />
    <br>
    <badge text="123" />
    <br>
    <group>
      <cell
        title="Used in a Cell"
        is-link
      >
        <div
          slot="value"
          class="badge-value vux-center-v"
        >
          New Message &nbsp;
          <badge text="8" />
        </div>
      </cell>
      <cell
        title="Used in a Cell"
        is-link
      >
        <div
          slot="value"
          class="badge-value vux-center-v"
        >
          New Message &nbsp;
          <badge text="888" />
        </div>
      </cell>
    </group>
  </div>
</template>

<script>
import { Badge, Group, Cell } from '../components/_index'

export default {
  components: {
    Badge,
    Group,
    Cell
  }
}
</script>

<style>
.badge-value {
  display: inline-block;
}
</style>

```

#### Github Issue