---
name: Badge 徽章
route: /guide/badge
menu: data
---

import JsxParser from "react-jsx-parser";
import {
  MessageBox,
  InlineCode,
  Example,
  Code,
  PropsTable
} from "theme";
import { Badge } from "shineDev";
import code from "./demo";
import "./demo/index.scss";

# Badge 徽章

## 概述

徽章主要用于突出显示新的或未读的项，或对某些内容进行高亮标注。

## 代码示例

<MessageBox messageType="info">
  为了让用户直观地查看代码演示，我们加入了{" "}
  <InlineCode>shine-badge-helper</InlineCode>{" "}
  修饰符，在开发过程中无需配置该字段。
</MessageBox>

#### 基础徽章

在合适的位置引入 `Badge`  即可创建一个基础徽章，通过 `bgColor` 可以配置徽章的状态颜色，颜色信息可参考[Color 色彩](./color)。

  <Example
    display={<JsxParser {...code.basic} />}
    code={{code:code.basic.jsx}}
    components={code.basic.components}
  />

#### 点状徽章

在某些应用场景，例如展示用户在线状态时，仅需点状徽章即可表达含义，只需设置内容为空，即可展示点状徽章。

  <Example
    display={<JsxParser {...code.dot} />}
    code={{code:code.dot.jsx}}
    components={code.dot.components}
  />

#### 徽章边框

除了默认的圆形边框，徽章还支持直角矩形（加宽）和圆角矩形（加宽）的应用场景，且不同边框支持设置不同的尺寸（sm尺寸除外）。

  <Example
    display={<JsxParser {...code.border} />}
    code={{code:code.border.jsx}}
    components={code.border.components}
  />

#### 长文本

我们为更长的文本内容，准备了加宽的徽章样式。

  <Example
    display={<JsxParser {...code.inline} />}
    code={{code:code.inline.jsx}}
    components={code.inline.components}
  />

#### 统一样式

圆形、圆角矩形、直角矩形的统一样式。

  <Example
    display={<JsxParser {...code.unified} />}
    code={{code:code.unified.jsx}}
    components={code.unified.components}
  />

## 配置参数

<PropsTable of={Badge} />

## FAQ

##### 徽章和标签的区别是什么？
答：在 Bootstrap 中，徽章和标签类似，区别只是徽章的边角更加圆滑，在 Shine Design 中，我们将徽章和标签进行了整合，标签的应用场景均可以用徽章替代。

##### 徽章可以用在哪些地方？
答：徽章组件本身是一个基础组件，它可以被嵌入到任何想展现的位置，例如菜单项 /  导航栏 等，也可以作为状态展示，例如用户登录状态（在线 / 离线）。