徽章 Badge - Svelte - Semi Design Next

代码演示

如何引入

<script lang="ts">
    import { Badge } from '@fibrae/semi-ui-svelte';
</script>

基本用法

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

count 接收数字、字符串或 snippet。snippet 用 {#snippet count()}...{/snippet} 写在 Badge 标签内，将直接渲染，并去掉 type 与 theme 对应的样式类。数字用 count={5} 传入：count="5" 是字符串，不会被 overflowCount 截断。Badge 依附的元素写在标签内，即 children snippet。

BM 5

YL

XZ

WF NEW

代码

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

    const style = 'width: 42px; height: 42px; border-radius: 4px';
</script>

<div>
    <Badge count={5}>
        <Avatar color="blue" shape="square" {style}>BM</Avatar>
    </Badge>
    <br />
    <br />
    <Badge dot>
        <Avatar color="blue" shape="square" {style}>YL</Avatar>
    </Badge>
    <br />
    <br />
    <Badge>
        {#snippet count()}
            <IconLock style="color: var(--semi-color-primary)" />
        {/snippet}
        <Avatar color="light-blue" shape="square" {style}>XZ</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count="NEW">
        <Avatar color="light-blue" shape="square" {style}>WF</Avatar>
    </Badge>
</div>

设置显示数字最大值

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

ZH 99

HS 100

DY 10+

TT 999+

代码

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

    const style = 'width: 42px; height: 42px; border-radius: 4px';
</script>

<div>
    <Badge count={99}>
        <Avatar color="teal" shape="square" {style}>ZH</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count={100}>
        <Avatar color="teal" shape="square" {style}>HS</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count={99} overflowCount={10}>
        <Avatar color="green" shape="square" {style}>DY</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count={1000} overflowCount={999}>
        <Avatar color="green" shape="square" {style}>TT</Avatar>
    </Badge>
</div>

设置徽标位置

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

ZH VIP

HS VIP

DY VIP

TT VIP

代码

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

    const style = 'width: 42px; height: 42px; border-radius: 4px';
</script>

<div>
    <Badge count="VIP" position="rightTop" type="danger">
        <Avatar color="amber" shape="square" {style}>ZH</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count="VIP" position="rightBottom" type="danger">
        <Avatar color="amber" shape="square" {style}>HS</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count="VIP" position="leftTop" type="danger">
        <Avatar color="orange" shape="square" {style}>DY</Avatar>
    </Badge>
    <br />
    <br />
    <Badge count="VIP" position="leftBottom" type="danger">
        <Avatar color="orange" shape="square" {style}>TT</Avatar>
    </Badge>
</div>

设置徽标样式

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

XZ 5

YB 5

LX 5

代码

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

    const bgStyle = 'padding: 8px';
    const style = 'width: 42px; height: 42px; border-radius: 4px';
</script>

<div style="display: flex">
    <div style={bgStyle}>
        <Badge count={5} theme="solid">
            <Avatar color="indigo" shape="square" {style}>XZ</Avatar>
        </Badge>
    </div>
    <div style={bgStyle}>
        <Badge count={5} theme="light">
            <Avatar color="indigo" shape="square" {style}>YB</Avatar>
        </Badge>
    </div>
    <div style={bgStyle}>
        <Badge count={5} theme="inverted">
            <Avatar color="light-green" shape="square" {style}>LX</Avatar>
        </Badge>
    </div>
    <br />
    <div style={bgStyle}>
        <Badge dot theme="solid">
            <Avatar color="light-green" shape="square" {style}>YZ</Avatar>
        </Badge>
    </div>
    <div style={bgStyle}>
        <Badge dot theme="light">
            <Avatar color="lime" shape="square" {style}>HW</Avatar>
        </Badge>
    </div>
    <div style="padding: 8px; border-radius: 4px; background-color: var(--semi-color-fill-0)">
        <Badge dot theme="inverted">
            <Avatar color="lime" shape="square" {style}>XM</Avatar>
        </Badge>
    </div>
</div>

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

MR 5

YL 5

ZW 5

JL 5

RT 5

代码

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

    const bgStyle = 'padding: 8px 8px 3px 8px';
    const style = 'width: 42px; height: 42px; border-radius: 4px';
</script>

<div style="display: flex">
    <div style={bgStyle}>
        <Badge count={5} type="primary">
            <Avatar color="violet" shape="square" {style}>MR</Avatar>
        </Badge>
    </div>
    <div style={bgStyle}>
        <Badge count={5} type="secondary">
            <Avatar color="violet" shape="square" {style}>YL</Avatar>
        </Badge>
    </div>
    <div style={bgStyle}>
        <Badge count={5} type="tertiary">
            <Avatar color="red" shape="square" {style}>ZW</Avatar>
        </Badge>
    </div>
    <br />
    <div style={bgStyle}>
        <Badge count={5} type="warning">
            <Avatar color="red" shape="square" {style}>JL</Avatar>
        </Badge>
    </div>
    <div style={bgStyle}>
        <Badge count={5} type="danger">
            <Avatar color="pink" shape="square" {style}>RT</Avatar>
        </Badge>
    </div>
    <div style={bgStyle}>
        <Badge dot type="primary">
            <Avatar color="pink" shape="square" {style}>YF</Avatar>
        </Badge>
    </div>
</div>

独立使用

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

5

NEW

10+

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

代码

<script lang="ts">
    import { Badge } from '@fibrae/semi-ui-svelte';
</script>

<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	徽章依附的元素的 snippet；缺省时徽章独立显示。	`Snippet`	-
count	徽章内容，数字、字符串或 snippet；传 snippet 时直接渲染该 snippet，并去掉类型与主题样式类。	`number \| string \| Snippet \| null`	-
countClassName	内容区域的类名。	`string`	-
countStyle	内容区域的样式字符串。	`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 与原生属性和事件（如 id、aria-*、onclick）落在根元素 <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	描边宽度