Badge徽标数

图标右上角的圆形徽标数字。

何时使用#

一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

代码演示

⁵⁰

基本

简单的徽章展示，当 count 为 0 时，默认不显示，但是可以使用 showZero 修改为显示。

import { Badge, Avatar } from 'sld';
import { ClockCircleOutlined } from '@sld-icon/icons';

ReactDOM.render(
  <>
    <Badge count={5}>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={0} showZero>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
      <Avatar shape="square" size="large" />
    </Badge>
  </>,
  mountNode,
);

⁹⁹⁹⁹⁺¹⁰⁺⁹⁹⁹⁺

封顶数字

超过 overflowCount 的会显示为 ${overflowCount}+，默认的 overflowCount 为 99。

import { Badge, Avatar } from 'sld';

ReactDOM.render(
  <>
    <Badge count={99}>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={100}>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={99} overflowCount={10}>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge count={1000} overflowCount={999}>
      <Avatar shape="square" size="large" />
    </Badge>
  </>,
  mountNode,
);

⁵

动态

展示动态变化的效果。

import { Badge, Button, Switch, Divider, Avatar } from 'sld';
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@sld-icon/icons';

const ButtonGroup = Button.Group;

class Demo extends React.Component {
  state = {
    count: 5,
    show: true,
  };

  increase = () => {
    const count = this.state.count + 1;
    this.setState({ count });
  };

  decline = () => {
    let count = this.state.count - 1;
    if (count < 0) {
      count = 0;
    }
    this.setState({ count });
  };

  random = () => {
    const count = Math.floor(Math.random() * 100);
    this.setState({ count });
  };

  onChange = show => {
    this.setState({ show });
  };

  render() {
    return (
      <>
        <Badge count={this.state.count}>
          <Avatar shape="square" size="large" />
        </Badge>
        <ButtonGroup>
          <Button onClick={this.decline}>
            <MinusOutlined />
          </Button>
          <Button onClick={this.increase}>
            <PlusOutlined />
          </Button>
          <Button onClick={this.random}>
            <QuestionOutlined />
          </Button>
        </ButtonGroup>
        <Divider />
        <Badge dot={this.state.show}>
          <Avatar shape="square" size="large" />
        </Badge>
        <Switch onChange={this.onChange} checked={this.state.show} />
      </>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

⁵

自定义位置偏移

设置状态点的位置偏移，格式为 [left, top]，表示状态点距默认位置左侧、上方的偏移量。

import { Badge, Avatar } from 'sld';

ReactDOM.render(
  <Badge count={5} offset={[10, 10]}>
    <Avatar shape="square" size="large" />
  </Badge>,
  mountNode,
);

Success
Error
Default
Processing
Warning

状态点

用于表示状态的小圆点。

import { Badge } from 'sld';

ReactDOM.render(
  <>
    <Badge status="success" />
    <Badge status="error" />
    <Badge status="default" />
    <Badge status="processing" />
    <Badge status="warning" />
    <br />
    <Badge status="success" text="Success" />
    <br />
    <Badge status="error" text="Error" />
    <br />
    <Badge status="default" text="Default" />
    <br />
    <Badge status="processing" text="Processing" />
    <br />
    <Badge status="warning" text="Warning" />
  </>,
  mountNode,
);

Pushes open the window

and raises the spyglass.

Hippies

Pushes open the window

and raises the spyglass.

Hippies

Pushes open the window

and raises the spyglass.

Hippies

Pushes open the window

and raises the spyglass.

Hippies

Pushes open the window

and raises the spyglass.

Hippies

Pushes open the window

and raises the spyglass.

Hippies

Pushes open the window

and raises the spyglass.

Hippies

Pushes open the window

and raises the spyglass.

Hippies

缎带

使用缎带型的徽标。

import { Badge, Card } from 'sld';

ReactDOM.render(
  <>
    <Badge.Ribbon text="Hippies">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="pink">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="red">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="cyan">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="green">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="purple">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="volcano">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
    <Badge.Ribbon text="Hippies" color="magenta">
      <Card title="Pushes open the window" size="small">
        and raises the spyglass.
      </Card>
    </Badge.Ribbon>
  </>,
  mountNode,
);
.ant-card {
  margin-bottom: 16px;
}

²⁵

⁹⁹⁺

独立使用

不包裹任何元素即是独立使用，可自定样式展现。

在右上角的 badge 则限定为红色。

import { Badge, Space, Switch } from 'sld';
import { ClockCircleOutlined } from '@sld-icon/icons';

const Demo = () => {
  const [show, setShow] = React.useState(true);

  return (
    <Space>
      <Switch checked={show} onChange={() => setShow(!show)} />
      <Badge count={show ? 25 : 0} />
      <Badge count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0} />
      <Badge
        className="site-badge-count-109"
        count={show ? 109 : 0}
        style={{ backgroundColor: '#52c41a' }}
      />
    </Space>
  );
};

ReactDOM.render(<Demo />, mountNode);

Link something

讨嫌的小红点

没有具体的数字。

import { Badge } from 'sld';
import { NotificationOutlined } from '@sld-icon/icons';

ReactDOM.render(
  <>
    <Badge dot>
      <NotificationOutlined style={{ fontSize: 16 }} />
    </Badge>
    <Badge dot>
      <a href="#">Link something</a>
    </Badge>
  </>,
  mountNode,
);

⁵

可点击

用 a 标签进行包裹即可。

import { Badge, Avatar } from 'sld';

ReactDOM.render(
  <a href="#">
    <Badge count={5}>
      <Avatar shape="square" size="large" />
    </Badge>
  </a>,
  mountNode,
);

⁵⁵

大小

可以设置有数字徽标的大小。

import { Badge, Avatar } from 'sld';

ReactDOM.render(
  <>
    <Badge size="default" count={5}>
      <Avatar shape="square" size="large" />
    </Badge>
    <Badge size="small" count={5}>
      <Avatar shape="square" size="large" />
    </Badge>
  </>,
  mountNode,
);

Presets

pink

red

yellow

orange

cyan

green

blue

purple

geekblue

magenta

volcano

gold

lime

Custom

#f50
#2db7f5
#87d068
#108ee9

多彩徽标

我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。

import { Badge, Divider } from 'sld';

const colors = [
  'pink',
  'red',
  'yellow',
  'orange',
  'cyan',
  'green',
  'blue',
  'purple',
  'geekblue',
  'magenta',
  'volcano',
  'gold',
  'lime',
];

ReactDOM.render(
  <>
    <Divider orientation="left">Presets</Divider>
    <div>
      {colors.map(color => (
        <div key={color}>
          <Badge color={color} text={color} />
        </div>
      ))}
    </div>
    <Divider orientation="left">Custom</Divider>
    <>
      <Badge color="#f50" text="#f50" />
      <br />
      <Badge color="#2db7f5" text="#2db7f5" />
      <br />
      <Badge color="#87d068" text="#87d068" />
      <br />
      <Badge color="#108ee9" text="#108ee9" />
    </>
  </>,
  mountNode,
);
.ant-tag {
  margin-bottom: 8px;
}

API#

Badge#

参数	说明	类型	默认值	版本
color	自定义小圆点的颜色	string	-
count	展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏	ReactNode	-
dot	不展示数字，只有一个小红点	boolean	false
offset	设置状态点的位置偏移	[number, number]	-
overflowCount	展示封顶的数字值	number	99
showZero	当数值为 0 时，是否展示 Badge	boolean	false
size	在设置了 `count` 的前提下有效，设置小圆点的大小	`default` \| `small`	-	-
status	设置 Badge 为状态点	`success` \| `processing` \| `default` \| `error` \| `warning`	-
text	在设置了 `status` 的前提下有效，设置状态点的文本	ReactNode	-
title	设置鼠标放在状态点上时显示的文字	string	-

Badge.Ribbon (4.5.0+)#

参数	说明	类型	默认值
color	自定义缎带的颜色	string	-
placement	缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动	`start` \| `end`	`end`
text	缎带中填入的内容	ReactNode	-

基本
独立使用
封顶数字
讨嫌的小红点
动态
可点击
自定义位置偏移
大小
状态点
多彩徽标
缎带
API