徽标 Badge

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

使用

API

安装使用

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

用法示例

基础用法

codesanbox

copy

code

import React from 'react';
import { TiBadge } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container" style={{ flexDirection: 'row' }}>
      <TiBadge content="5">
        <div className="content" />
      </TiBadge>
      <TiBadge dot>
        <div className="content" />
      </TiBadge>
      <TiBadge icon="home">
        <div className="content" />
      </TiBadge>
    </div>
  );
}

普通展示，无定位

例如在cell组件中使用

codesanbox

copy

code

import React from 'react';
import { TiBadge, TiCell } from 'titian-h5-react';

export default function App() {
  return (
    <div className="content">
      <TiCell title="标题文字">
        <TiBadge static slot="desc" content="6" />
      </TiCell>
    </div>
  );
}

自定义偏移

codesanbox

copy

code

import React from 'react';
import { TiBadge } from 'titian-h5-react';

export default function App() {
  return (
    <TiBadge content="6" offset={[-6, -2]}>
      <div className="content" />
    </TiBadge>
  );
}

置于元素内部

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

codesanbox

copy

code

import React from 'react';
import { TiBadge } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container" style={{ flexDirection: 'row' }}>
      <div className="content" style={{ position: 'relative' }}>
        <TiBadge content="6" />
      </div>
      <div className="content" style={{ position: 'relative' }}>
        <TiBadge dot />
      </div>
      <div className="content" style={{ position: 'relative' }}>
        <TiBadge icon="home" />
      </div>
    </div>
  );
}

使用在文字右上角

Title Text

codesanbox

copy

code

import React from 'react';
import { TiBadge } from 'titian-h5-react';

export default function App() {
  return (
    <TiBadge content="6" atText>
      <div>Title Text</div>
    </TiBadge>
  );
}

文字延展

codesanbox

copy

code

import React from 'react';
import { TiBadge } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiBadge content="99" spread="bothSides">
        <div className="content" />
      </TiBadge>
      <TiBadge content="99" spread="toRight">
        <div className="content" />
      </TiBadge>
    </>
  );
}

TiBadge API

属性 Properties

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

插槽 Slots

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

外部样式类 External Classes

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

CSS 变量 CSS Variables

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