徽章 - Semi Design Next

代码演示

如何引入

import { Badge } from '@fibrous/semi-ui-react';

基本用法

Badge 的基本类型为 count。如果传入 dot 则显示为小圆点，两者互斥，优先渲染小圆点。

当 count 是节点类型时，将直接渲染该节点。

BM5

YL

XZ

WFNEW

代码

import { IconLock } from '@fibrous/semi-icons-react';
import { Badge, Avatar } from '@fibrous/semi-ui-react';

export default function BadgeDemo() {
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
    return (
        <div>
            <Badge count={5}>
                <Avatar color="blue" shape="square" style={style}>
                    BM
                </Avatar>
            </Badge>
            <br />
            <br />
            <Badge dot>
                <Avatar color="blue" shape="square" style={style}>
                    YL
                </Avatar>
            </Badge>
            <br />
            <br />
            <Badge count={<IconLock style={{ color: 'var(--semi-color-primary)' }} />}>
                <Avatar color="light-blue" shape="square" style={style}>
                    XZ
                </Avatar>
            </Badge>
            <br />
            <br />
            <Badge count="NEW">
                <Avatar color="light-blue" shape="square" style={style}>
                    WF
                </Avatar>
            </Badge>
        </div>
    );
}

设置显示数字最大值

可以通过设置 overflowCount 值设置显示数字的最大值，当实际数值超过该值时将以 ${overflowCount}+ 的格式显示。

ZH99

HS100

DY10+

TT999+

代码

import { Badge, Avatar } from '@fibrous/semi-ui-react';

export default function BadgeDemo() {
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
    return (
        <div>
            <Badge count={99}>
                <Avatar color="teal" shape="square" style={style}>
                    ZH
                </Avatar>
            </Badge>
            <br />
            <br />
            <Badge count={100}>
                <Avatar color="teal" shape="square" style={style}>
                    HS
                </Avatar>
            </Badge>
            <br />
            <br />
            <Badge count={99} overflowCount={10}>
                <Avatar color="green" shape="square" style={style}>
                    DY
                </Avatar>
            </Badge>
            <br />
            <br />
            <Badge count={1000} overflowCount={999}>
                <Avatar color="green" shape="square" style={style}>
                    TT
                </Avatar>
            </Badge>
        </div>
    );
}

设置徽标位置

可以通过设置 position 设置位置，支持：leftTop， leftBottom， rightTop（默认）， rightBottom。在 RTL 的 ConfigProvider 下默认值为 leftTop。

ZHVIP

HSVIP

DYVIP

TTVIP

代码

import { Badge, Avatar } from '@fibrous/semi-ui-react';

export default function BadgeDemo() {
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
    return (
        <div>
            <Badge count="VIP" position="rightTop" type="danger">
                <Avatar color="amber" shape="square" style={style}>
                    ZH
                </Avatar>
            </Badge>
            <br />
            <br />
            <Badge count="VIP" position="rightBottom" type="danger">
                <Avatar color="amber" shape="square" style={style}>
                    HS
                </Avatar>
            </Badge>
            <br />
            <br />
            <Badge count="VIP" position="leftTop" type="danger">
                <Avatar color="orange" shape="square" style={style}>
                    DY
                </Avatar>
            </Badge>
            <br />
            <br />
            <Badge count="VIP" position="leftBottom" type="danger">
                <Avatar color="orange" shape="square" style={style}>
                    TT
                </Avatar>
            </Badge>
        </div>
    );
}

设置徽标样式

可以通过设置 theme 和 type 设置徽标的样式。其中 theme 支持三种形式：solid, light, inverted。默认形式为 solid。

XZ5

YB5

LX5

代码

import { Badge, Avatar } from '@fibrous/semi-ui-react';

export default function BadgeDemo() {
    const bgStyle = {
        padding: '8px',
    };
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
    return (
        <div style={{ display: 'flex' }}>
            <div style={bgStyle}>
                <Badge count={5} theme="solid">
                    <Avatar color="indigo" shape="square" style={style}>
                        XZ
                    </Avatar>
                </Badge>
            </div>
            <div style={bgStyle}>
                <Badge count={5} theme="light">
                    <Avatar color="indigo" shape="square" style={style}>
                        YB
                    </Avatar>
                </Badge>
            </div>
            <div style={bgStyle}>
                <Badge count={5} theme="inverted">
                    <Avatar color="light-green" shape="square" style={style}>
                        LX
                    </Avatar>
                </Badge>
            </div>
            <br />
            <div style={bgStyle}>
                <Badge dot theme="solid">
                    <Avatar color="light-green" shape="square" style={style}>
                        YZ
                    </Avatar>
                </Badge>
            </div>
            <div style={bgStyle}>
                <Badge dot theme="light">
                    <Avatar color="lime" shape="square" style={style}>
                        HW
                    </Avatar>
                </Badge>
            </div>
            <div style={{ padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)' }}>
                <Badge dot theme="inverted">
                    <Avatar color="lime" shape="square" style={style}>
                        XM
                    </Avatar>
                </Badge>
            </div>
        </div>
    );
}

type 支持如下类型：primary，secondary，tertiary，warning 和 danger。默认类型为 primary。

MR5

YL5

ZW5

JL5

RT5

代码

import { Badge, Avatar } from '@fibrous/semi-ui-react';

export default function BadgeDemo() {
    const bgStyle = {
        padding: '8px 8px 3px 8px',
    };
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
    return (
        <div style={{ display: 'flex' }}>
            <div style={bgStyle}>
                <Badge count={5} type="primary">
                    <Avatar color="violet" shape="square" style={style}>
                        MR
                    </Avatar>
                </Badge>
            </div>
            <div style={bgStyle}>
                <Badge count={5} type="secondary">
                    <Avatar color="violet" shape="square" style={style}>
                        YL
                    </Avatar>
                </Badge>
            </div>
            <div style={bgStyle}>
                <Badge count={5} type="tertiary">
                    <Avatar color="red" shape="square" style={style}>
                        ZW
                    </Avatar>
                </Badge>
            </div>
            <br />
            <div style={bgStyle}>
                <Badge count={5} type="warning">
                    <Avatar color="red" shape="square" style={style}>
                        JL
                    </Avatar>
                </Badge>
            </div>
            <div style={bgStyle}>
                <Badge count={5} type="danger">
                    <Avatar color="pink" shape="square" style={style}>
                        RT
                    </Avatar>
                </Badge>
            </div>
            <div style={bgStyle}>
                <Badge dot type="primary">
                    <Avatar color="pink" shape="square" style={style}>
                        YF
                    </Avatar>
                </Badge>
            </div>
        </div>
    );
}

独立使用

当 Badge 作为独立元素时可以单独使用。

5

NEW

10+

进行中 processing
信息 info
成功 success
提醒 warning
错误 error

代码

import { Badge } from '@fibrous/semi-ui-react';

export default function BadgeDemo() {
    return (
        <div>
            <Badge count={5} />
            <br />
            <br />
            <Badge count="NEW" theme="light" />
            <br />
            <br />
            <Badge count={99} overflowCount={10} type="danger" />
            <br />
            <br />
            <span>
                <Badge dot type="primary" /> 进行中 processing
            </span>
            <br />
            <span>
                <Badge dot type="tertiary" /> 信息 info
            </span>
            <br />
            <span>
                <Badge dot type="success" /> 成功 success
            </span>
            <br />
            <span>
                <Badge dot type="warning" /> 提醒 warning
            </span>
            <br />
            <span>
                <Badge dot type="danger" /> 错误 error
            </span>
        </div>
    );
}

API参考

Props

属性	说明	类型	默认值
children	徽章所附着的元素，徽章相对它定位；不传时徽章作为独立元素显示。	`React.ReactNode`	-
className	根元素（`span`）的类名。	`string`	-
count	徽章内容，数字和字符串按文字显示；其他 ReactNode 直接渲染，此时不带 `type` 与 `theme` 对应的样式类。	`React.ReactNode`	-
countClassName	内容区域的类名。	`string`	-
countStyle	内容区域的样式，仅在未设置 `style` 时生效。	`React.CSSProperties`	-
dot	显示为小圆点，不展示 `count`。	`boolean`	`false`
onClick	点击根元素时调用。	`Type`	-
onMouseEnter	鼠标移入根元素时调用。	`Type`	-
onMouseLeave	鼠标移出根元素时调用。	`Type`	-
overflowCount	数字 `count` 的最大展示值，超出后显示为 `${overflowCount}+`；只对数字生效，`0` 视为未设置。	`number`	-
position	徽章相对被包裹元素的位置，可选 `leftTop`、`leftBottom`、`rightTop`、`rightBottom`；未设置时在 RTL 的 ConfigProvider 下为 `leftTop`，否则为 `rightTop`。	`BadgePosition`	-
ref	根元素（`span`）的引用。	`Type`	-
style	内容区域的样式，设置后替代 `countStyle` 而不是与其合并；不作用于根元素。	`React.CSSProperties`	-
theme	徽章主题，可选 `solid`、`light`、`inverted`。	`BadgeTheme`	`"solid"`
type	徽章类型，可选 `primary`、`secondary`、`tertiary`、`danger`、`warning`、`success`。	`BadgeType`	`"primary"`

其他原生属性（如 id、aria-*、data-*）落在根元素 span 上。

文案规范

Badge内容若为英文时，首字母应大写

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$color-badge_default-border-default	var(--semi-color-bg-1)	描边颜色 - 默认
$color-badge_default-bg-default	var(--semi-color-bg-1)	背景颜色 - 默认
$color-badge_default-text-default	var(--semi-color-bg-2)	文字颜色 - 默认
$color-badge_primary_solid-bg-default	var(--semi-color-primary)	背景颜色 - 主色
$color-badge_primary_light-bg-default	var(--semi-color-primary-light-default)	背景颜色 - 浅版主色
$color-badge_primary_light-text-default	var(--semi-color-primary)	文字颜色 - 浅版主色
$color-badge_primary_inverted-text-default	var(--semi-color-primary)	文字颜色 - 白底
$color-badge_secondary_solid-bg-default	var(--semi-color-secondary)	背景颜色 - 次要
$color-badge_secondary_light-bg-default	var(--semi-color-secondary-light-default)	背景颜色 - 浅版次要
$color-badge_secondary_light-text-default	var(--semi-color-secondary)	文字颜色 - 浅版次要
$color-badge_secondary_inverted-text-default	var(--semi-color-secondary)	文字颜色 - 白底
$color-badge_tertiary_solid-bg-default	var(--semi-color-tertiary)	背景颜色 - 第三
$color-badge_tertiary_light-bg-default	var(--semi-color-tertiary-light-default)	背景颜色 - 第三
$color-badge_tertiary_light-text-default	var(--semi-color-tertiary)	文字颜色 - 浅版第三
$color-badge_tertiary_inverted-text-default	var(--semi-color-tertiary)	文字颜色 - 白底
$color-badge_danger_solid-bg-default	var(--semi-color-danger)	背景颜色 - 危险
$color-badge_danger_light-bg-default	var(--semi-color-danger-light-default)	背景颜色 - 浅版危险
$color-badge_danger_light-text-default	var(--semi-color-danger)	文字颜色 - 浅版危险
$color-badge_danger_inverted-text-default	var(--semi-color-danger)	文字颜色 - 白底
$color-badge_warning_solid-bg-default	var(--semi-color-warning)	背景颜色 - 警告
$color-badge_warning_light-bg-default	var(--semi-color-warning-light-default)	背景颜色 - 浅版警告
$color-badge_warning_light-text-default	var(--semi-color-warning)	文字颜色 - 浅版危险
$color-badge_warning_inverted-text-default	var(--semi-color-warning)	文字颜色 - 白底
$color-badge_success_solid-bg-default	var(--semi-color-success)	背景颜色 - 成功
$color-badge_success_light-bg-default	var(--semi-color-success-light-default)	背景颜色 - 浅版成功
$color-badge_success_light-text-default	var(--semi-color-success)	文字颜色 - 浅版成功
$color-badge_success_inverted-text-default	var(--semi-color-success)	文字颜色 - 白底
$width-badge_dot	8px	点状徽标宽度
$height-badge_dot	8px	点状徽标高度
$radius-badge_dot	var(--semi-border-radius-circle)	点状徽标圆角
$height-badge_count	18px	数字徽标宽度
$spacing-badge_count-paddingY	0px	数字徽标上下内边距
$spacing-badge_count-paddingX	4px	数字徽标左右内边距
$width-badge-border	1px	描边宽度