徽章 - Semi Design Next

代码演示

如何引入

<script setup lang="ts">
    import { Badge } from '@fibrous/semi-ui-vue';
</script>

基本用法

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

count 接收数字或字符串。节点内容放进 #count 插槽，将直接渲染该节点，两者同时给出时以插槽为准。数字用 :count="5" 绑定：count="5" 是字符串，不会被 overflowCount 截断。

BM5

YL

XZ

WFNEW

代码

<script setup lang="ts">
    import { IconLock } from '@fibrous/semi-icons-vue';
    import { Avatar, Badge } from '@fibrous/semi-ui-vue';

    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
</script>

<template>
    <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>
            <template #count>
                <IconLock :style="{ color: 'var(--semi-color-primary)' }" />
            </template>
            <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>
</template>

设置显示数字最大值

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

ZH99

HS100

DY10+

TT999+

代码

<script setup lang="ts">
    import { Avatar, Badge } from '@fibrous/semi-ui-vue';

    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
</script>

<template>
    <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>
</template>

设置徽标位置

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

ZHVIP

HSVIP

DYVIP

TTVIP

代码

<script setup lang="ts">
    import { Avatar, Badge } from '@fibrous/semi-ui-vue';

    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
</script>

<template>
    <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>
</template>

设置徽标样式

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

XZ5

YB5

LX5

代码

<script setup lang="ts">
    import { Avatar, Badge } from '@fibrous/semi-ui-vue';

    const bgStyle = {
        padding: '8px',
    };
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
</script>

<template>
    <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>
</template>

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

MR5

YL5

ZW5

JL5

RT5

代码

<script setup lang="ts">
    import { Avatar, Badge } from '@fibrous/semi-ui-vue';

    const bgStyle = {
        padding: '8px 8px 3px 8px',
    };
    const style = {
        width: '42px',
        height: '42px',
        borderRadius: '4px',
    };
</script>

<template>
    <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>
</template>

独立使用

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

5

NEW

10+

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

代码

<script setup lang="ts">
    import { Badge } from '@fibrous/semi-ui-vue';
</script>

<template>
    <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>
</template>

API参考

Props

属性	说明	类型	默认值
count	徽章内容，数字或字符串；其他内容使用 count 插槽。	`string \| number`	`semiGlobalDefault("Badge", "count")`
dot	显示为小圆点，不展示内容。	`boolean`	`semiDefault("Badge", "dot", false)`
type	徽章类型，可选 primary、secondary、tertiary、danger、warning、success。	`BadgeType`	`semiDefault("Badge", "type", "primary")`
theme	徽章主题，可选 solid、light、inverted。	`BadgeTheme`	`semiDefault("Badge", "theme", "solid")`
position	徽章相对被包裹元素的位置；缺省时 RTL 的 ConfigProvider 下为 leftTop，否则为 rightTop。	`BadgePosition`	`semiGlobalDefault("Badge", "position")`
overflowCount	数字内容的最大展示值，超出后显示为 `${overflowCount}+`；只对数字生效，0 视为未设置。	`number`	`semiGlobalDefault("Badge", "overflowCount")`
countClassName	内容区域的类名。	`string`	`semiGlobalDefault("Badge", "countClassName")`
countStyle	内容区域的样式。	`CSSProperties`	`semiGlobalDefault("Badge", "countStyle")`

Events

事件	说明	回调参数
无

Slots

插槽	说明	作用域参数
default	徽章依附的元素；缺省时徽章独立显示。	`any`
count	自定义徽章内容，同时传入 count 时以插槽为准，并去掉类型与主题样式类。	`any`

Exposes

名称	说明	类型
无

class、style、原生属性与 @click、@mouseenter 等原生事件经 attrs 落在根元素上。徽章内容区域只接收 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	描边宽度