徽章 - Semi Design Next

代码演示

如何引入

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

基本用法

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

count 接收数字、字符串或 JSX 元素。数字和字符串按文字显示，count="5" 是字符串，同样不会被 overflowCount 截断。传入 JSX 元素时直接渲染该元素，并去掉 type 与 theme 对应的样式类。

BM5

YL

XZ

WFNEW

代码

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

const style = {
    width: '42px',
    height: '42px',
    'border-radius': '4px',
};

export default function BadgeDemo() {
    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 { Avatar, Badge } from '@fibrous/semi-ui-solid';

const style = {
    width: '42px',
    height: '42px',
    'border-radius': '4px',
};

export default function BadgeDemo() {
    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 { Avatar, Badge } from '@fibrous/semi-ui-solid';

const style = {
    width: '42px',
    height: '42px',
    'border-radius': '4px',
};

export default function BadgeDemo() {
    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 { Avatar, Badge } from '@fibrous/semi-ui-solid';

const bgStyle = {
    padding: '8px',
};

const style = {
    width: '42px',
    height: '42px',
    'border-radius': '4px',
};

const invertedBgStyle = {
    padding: '8px',
    'border-radius': '4px',
    'background-color': 'var(--semi-color-fill-0)',
};

export default function BadgeDemo() {
    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={invertedBgStyle}>
                <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 { Avatar, Badge } from '@fibrous/semi-ui-solid';

const bgStyle = {
    padding: '8px 8px 3px 8px',
};

const style = {
    width: '42px',
    height: '42px',
    'border-radius': '4px',
};

export default function BadgeDemo() {
    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-solid';

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

属性	说明	类型	默认值
count	徽章内容，数字或字符串按文字显示；传入 JSX 元素时直接渲染该元素，并去掉 type 与 theme 对应的样式类。	`JSX.Element`	-
countClassName	内容区域的类名。	`string`	-
countStyle	内容区域的样式，可传 CSS 对象（键为 kebab-case）或字符串。	`JSX.CSSProperties \| string`	-
dot	显示为小圆点，不展示内容。	`boolean`	`false`
overflowCount	数字内容的最大展示值，超出后显示为 `${overflowCount}+`；只对数字生效，0 视为未设置。	`number`	-
position	徽章相对被包裹元素的位置；缺省时 RTL 的 ConfigProvider 下为 leftTop，否则为 rightTop。	`BadgePosition`	-
theme	徽章主题，可选 solid、light、inverted。	`BadgeTheme`	`"solid"`
type	徽章类型，可选 primary、secondary、tertiary、danger、warning、success。	`BadgeType`	`"primary"`

class、style、ref 与原生属性和事件（如 id、aria-*、onClick、onMouseEnter）落在根元素 <span> 上。countClassName 与 countStyle 只作用于内容区域。

文案规范

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	描边宽度