cnd-components-mcp/componentData/components/徽标 Badge.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 简介

徽标常用于透出新消息的数量，或者提醒用户关注新功能、热门功能等。

## 示例

```tsx
import React from 'react';
import { Badge } from '@alicloud/console-components';

const badgeTextStyle = {
  backgroundColor: '#D50B16',
  color: '#fff',
  borderRadius: '10px',
  lineHeight: '18px',
};

export default function Demo1() {
  return (
    <div>
      <div style={{ display: 'flex', gap: '50px' }}>
        <Badge count={1} />
        <Badge count={23} overflowCount={99} />
        <Badge count={456} overflowCount={999} />
        <Badge content="NEW" style={badgeTextStyle} />
        <Badge content="最新上线" style={badgeTextStyle} />
      </div>
    </div>
  );
}

export const meta = {
  title: '单独使用',
  describe: '不包裹任何元素即独立使用，可自定样式展现。',
};

```

```tsx
import React from 'react';
import { Badge } from '@alicloud/console-components';

const badgeTextStyle = {
  backgroundColor: '#D50B16',
  color: '#fff',
  borderRadius: '10px',
  lineHeight: '18px',
};

const squareStyles = {
  display: 'inline-block',
  borderRadius: '4px',
  background: '#eee',
  width: '32px',
  height: '32px',
};
const Square = () => <div style={squareStyles} />;

export default () => {
  return (
    <div style={{ display: 'flex', gap: '50px' }}>
      <Badge count={1}>
        <Square />
      </Badge>
      <Badge count={23}>
        <Square />
      </Badge>
      <Badge count={456} overflowCount={999}>
        <Square />
      </Badge>
      <Badge content={'NEW'} style={badgeTextStyle}>
        <Square />
      </Badge>
      <Badge content={'最新上线'} style={badgeTextStyle}>
        <Square />
      </Badge>
    </div>
  );
};

export const meta = {
  title: '徽标与标识组合',
  describe: '超过overflow的数值，会显示overflow+，overflow默认值为99。',
};

```

```tsx
import React from 'react';
import { Badge } from '@alicloud/console-components';

const badgeTextStyle = {
  backgroundColor: '#D50B16',
  color: '#fff',
  borderRadius: '10px',
  lineHeight: '20px',
};

const flexStyle = {
  display: 'flex',
  alignItems: 'center',
  marginBottom: '8px',
};

export default function Demo3() {
  return (
    <div>
      <div style={flexStyle}>
        <span style={{ marginRight: '8px' }}>文字描述</span>
        <Badge count={1} />
      </div>
      <div style={flexStyle}>
        <span style={{ marginRight: '8px' }}>文字描述</span>
        <Badge count={23} overflowCount={999} />
      </div>
      <div style={flexStyle}>
        <span style={{ marginRight: '8px' }}>文字描述</span>
        <Badge count={456} overflowCount={999} />
      </div>
      <div style={flexStyle}>
        <span style={{ marginRight: '8px' }}>文字描述</span>
        <Badge content={'NEW'} style={badgeTextStyle} />
      </div>
      <div style={flexStyle}>
        <span style={{ marginRight: '8px' }}>文字描述</span>
        <Badge content={'最新上线'} style={badgeTextStyle} />
      </div>
    </div>
  );
}

export const meta = {
  title: '徽标与文字组合',
  describe: '不包裹任何元素即独立使用，可自定样式展现。',
};

```

```tsx
import React from 'react';
import { Badge } from '@alicloud/console-components';

const squareStyles = {
  display: 'inline-block',
  borderRadius: '4px',
  background: '#eee',
  width: '32px',
  height: '32px',
};

const circleStyles = {
  display: 'inline-block',
  borderRadius: '16px',
  background: '#eee',
  width: '32px',
  height: '32px',
};

const contentStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(3, 1fr)',
  gap: 36,
  alignItems: 'center',
};

const Square = () => <div style={squareStyles} />;
const Circle = () => <div style={circleStyles} />;

export default function Demo4() {
  return (
    <div style={contentStyle}>
      <Badge dot>
        <Square />
      </Badge>
      <Badge dot>
        <Circle />
      </Badge>
      <Badge dot>
        <span style={{ marginRight: '6px' }}>文字描述</span>
      </Badge>
    </div>
  );
}

export const meta = {
  title: '小红点',
  describe: 'dot 属性控制不展示数字，只展示一个小红点',
};

```

## API

### Badge

| 参数          | 说明                                                                | 类型             | 默认值 | 是否必填 |
| ------------- | ------------------------------------------------------------------- | ---------------- | ------ | -------- |
| children      | 徽章依托的内容                                                      | React.ReactNode  | -      |          |
| count         | 展示的数字，大于 overflowCount 时显示为 overflowCount+，为 0 时隐藏 | number | string | 0      |          |
| content       | 自定徽标中的内容                                                      | React.ReactNode  | -      |          |
| overflowCount | 展示的封顶的数字                                                    | number | string | 99     |          |
| dot           | 不展示数字，只展示一个小红点                                        | boolean          | false  |          |
| showZero      | 当 count 为 0 时，默认不显示，但是可以使用 showZero 修改为显示      | boolean          | false  |          |