徽标 Badge

图标或者文字右上角的圆形徽标数字

使用

API

安装使用

import { TiBadge } from '@titian-design/mobile-vue'

用法示例

基础用法

codesanbox

copy

code

<template>
  <TiBadge content="5">
    <div className="content" />
  </TiBadge>
  <TiBadge dot>
    <div className="content" />
  </TiBadge>
  <TiBadge icon="home">
    <div className="content" />
  </TiBadge>
</template>

<script lang="ts" setup>
import { TiBadge } from 'titian-h5-vue';
</script>

普通展示，无定位

例如在cell组件中使用

codesanbox

copy

code

<template>
  <TiCell title="标题文字">
    <TiBadge static slot="desc" content="6" />
  </TiCell>
</template>

<script lang="ts" setup>
import { TiCell, TiBadge } from 'titian-h5-vue';
</script>

自定义偏移

codesanbox

copy

code

<template>
  <TiBadge content="6" :offset="[-6, -2]">
    <div className="content" />
  </TiBadge>
</template>

<script lang="ts" setup>
import { TiBadge } from 'titian-h5-vue';
</script>

置于元素内部

置于目标元素内部，外部元素如 box 需添加 position: relative;

codesanbox

copy

code

<template>
  <TiBadge content="6" />
  <TiBadge dot />
  <TiBadge icon="home" />
</template>

<script lang="ts" setup>
import { TiBadge } from 'titian-h5-vue';
</script>

使用在文字右上角

Title Text

codesanbox

copy

code

<template>
  <TiBadge content="6" atText>
    <div>Title Text</div>
  </TiBadge>
</template>

<script lang="ts" setup>
import { TiBadge } from 'titian-h5-vue';
</script>

文字延展

codesanbox

copy

code

<template>
  <TiBadge content="99" spread="bothSides">
    <div className="content" />
  </TiBadge>
  <TiBadge content="99" spread="toRight">
    <div className="content" />
  </TiBadge>
</template>

<script lang="ts" setup>
import { TiBadge } from 'titian-h5-vue';
</script>

TiBadge API

属性 Properties

名称	类型	必填	默认值	说明	备注
dot	boolean	否	false	不展示数字，只有一个小红点	-
content	string	否	-	展示的内容	-
spread	string	否	bothSides	内容的撑开方向，可选值：bothSides toRight	-
icon	string	否	-	内容部分为图标时的图标名称	-
offset	[number, number]	否	-	设置状态点的位置偏移，默认单位 px	-
static	boolean	否	false	取消定位相关样式，用作普通展示	-
at-text	boolean	否	-	用在文字内容的右上角展示	-
ext-style	string	否	-	根节点样式	-

插槽 Slots

名称	说明	备注
default	默认插槽	-

外部样式类 External Classes

名称	说明	备注
ext-class	根节点样式类名	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
--badge-font-size	theme.fontSize.t2	内容字体大小	-
--badge-horizontal-gap	theme.spacing.gap.g2	-	-
--badge-bg-color	theme.color.function.error.1000	-	-