徽标 Badge

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

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-badge": "@titian-design/weapp/badge/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-badge": "platform://titian-mp/ti-badge"
  }
}

用法示例

基础用法

copy

code

<ti-badge content="5">
  <view style="width: 40rpx; height: 40rpx;background-color: #ddd;"/>
</ti-badge>
<ti-badge dot>
  <view style="width: 40rpx; height: 40rpx;background-color: #ddd;"/>
</ti-badge>
<ti-badge icon="home">
  <view style="width: 40rpx; height: 40rpx;background-color: #ddd;"/>
</ti-badge>

普通展示，无定位

例如在cell组件中使用

copy

code

<ti-cell title="标题文字">
  <ti-badge static slot="desc" content="6" />
</ti-cell>

自定义偏移

copy

code

<ti-badge content="6" offset="{{[-6 -2]}}">
  <view style="width: 40rpx; height: 40rpx;background-color: #ddd;"/>
</ti-badge>

置于元素内部

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

copy

code

<ti-badge content="6" />
<ti-badge dot />
<ti-badge icon="home" />

使用在文字右上角

Title Text

copy

code

<ti-badge content="6" atText>
  <view>ti-tle Text</view>
</ti-badge>

文字延展

copy

code

<ti-badge content="99" spread="bothSides">
  <view style="width: 40rpx; height: 40rpx;background-color: #ddd;"/>
</ti-badge>
<ti-badge content="99" spread="toRight">
  <view style="width: 40rpx; height: 40rpx;background-color: #ddd;"/>
</ti-badge>

ti-badge 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	-	-