# Badge 徽章

[toc]

`Badge` 组件是放置在元素右上角的圆形徽标内容或小红点，用来展示消息提醒。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-badge": "../dist/badge/index"
  }
}

```

## 用法

### 基础用法

通过 `info` 属性来指定显示文案内容，内容可为数字或文本。

```html
<tea-badge info="9">
  <view class="demo-badge"></view>
</tea-badge>
```

### 展示小红点

通过 `dot` 属性来控制小红点，此时不展示 `info` 属性值。

```html
<tea-badge dot>
  <view class="demo-badge"></view>
</tea-badge>
```

## Props

| 参数   | 描述            | 类型        | 默认值     |
| ---- | ------------- | --------- | ------- |
| dot  | 不展示文字，只有一个小红点 | `Boolean` | `false` |
| info | 显示的文案内容       | `String`  | -       |

## Slots

| 名称  | 描述      |
| --- | ------- |
| -   | 自定义显示内容 |

## 外部样式类

| 类名               | 描述       |
| ---------------- | -------- |
| `ext-class`      | 组件根节点样式类 |
| `ext-class-info` | 文案内容样式类  |
| `ext-class-dot`  | 圆点样式类    |

## CSS变量属性表

| 变量名                    | 默认值                         | 描述  |
| ---------------------- | --------------------------- | --- |
| badge-dot-size         | 10px                        | -   |
| badge-dot-color        | @background-danger-color    | -   |
| badge-size             | @badge-dot-size \* 2        | -   |
| badge-info-text-size   | @font-size-xs               | -   |
| badge-info-text-color  | @text-base-inverse-color    | -   |
| badge-background-color | @background-danger-color    | -   |
| badge-padding          | @padding-none @padding-base | -   |
| badge-border-radius    | @badge-dot-size             | -   |