Tantalum UI

Badge 徽标数

注：

  • 这是个包裹组件，需要 slot 中提供被挂在的内容。
import { TaRow, TaCol, TaIcon, TaGroup, TaBadge, TaSwitch } from '@/index'
import { useState } from 'react'

export default function ExpBadge() {
  const [count, setCount] = useState(0)
  const [count2, setCount2] = useState(0)

  function onSwitch(checked: boolean) {
    setCount(checked ? 1000 : 0)
  }

  function onSwitch2(checked: boolean) {
    setCount2(checked ? 1000 : 0)
  }

  return (
    <>
      <TaGroup title="基础用法">
        <div className="exp-badge-flex">
          <TaRow gutter={[16, 16]}>
            <TaCol span="6">
              <TaBadge content={1}>
                {' '}
                <div className="exp-badge-slot"></div>{' '}
              </TaBadge>
            </TaCol>
            <TaCol span="6">
              <TaBadge content={99}>
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
          </TaRow>
        </div>
      </TaGroup>
      <TaGroup title="小红点">
        <div className="exp-badge-flex">
          <TaRow gutter={[16, 16]}>
            <TaCol span="6">
              <TaBadge content={1} dot>
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
          </TaRow>
        </div>
      </TaGroup>
      <TaGroup title="图标 renderBadge">
        <div className="exp-badge-flex">
          <TaRow gutter={[16, 16]}>
            <TaCol span="6">
              <TaBadge
                content={1}
                renderBadge={() => <TaIcon icon="CheckOutlined" />}
              >
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
          </TaRow>
        </div>
      </TaGroup>
      <TaGroup title="文本">
        <div className="exp-badge-flex">
          <TaRow gutter={[16, 16]}>
            <TaCol span="6">
              <TaBadge content="惠">
                {' '}
                <div className="exp-badge-slot"></div>{' '}
              </TaBadge>
            </TaCol>
            <TaCol span="6">
              <TaBadge content="热">
                {' '}
                <div className="exp-badge-slot"></div>{' '}
              </TaBadge>
            </TaCol>
          </TaRow>
        </div>
      </TaGroup>
      <TaGroup title="自定义颜色">
        <div className="exp-badge-flex">
          <TaRow gutter={[16, 16]}>
            <TaCol span="6">
              <TaBadge content={99} color="#6667AB">
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
            <TaCol span="6">
              <TaBadge content={1} dot color="#6667AB">
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
            <TaCol span="6">
              <TaBadge
                content={1}
                color="#E2C0BF"
                renderBadge={() => <TaIcon icon="CheckOutlined" />}
              >
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
            <TaCol span="6">
              <TaBadge content="惠" color="#E2C0BF">
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
          </TaRow>
        </div>
      </TaGroup>
      <TaGroup title="限制最大数">
        <div className="exp-badge-flex">
          <TaRow gutter={[16, 16]}>
            <TaCol span="6">
              <TaBadge content={1000} maxCount="9">
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
            <TaCol span="6">
              <TaBadge content={1000} maxCount="10">
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
            <TaCol span="6">
              <TaBadge content={1000} maxCount="99">
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
          </TaRow>
        </div>
      </TaGroup>
      <TaGroup title="展示 0">
        <div className="exp-badge-flex">
          <TaRow gutter={[16, 16]}>
            <TaCol span="6">
              <TaBadge content={0} showZero>
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
            <TaCol span="6">
              <TaBadge content={0} dot showZero>
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
          </TaRow>
        </div>
      </TaGroup>
      <TaGroup title="偏移">
        <div className="exp-badge-flex">
          <TaRow gutter={[16, 16]}>
            <TaCol span="6">
              <TaBadge content={1} offset={[10, -10]}>
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
            <TaCol span="6">
              <TaBadge content={1} dot offset={[-20, 20]}>
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
          </TaRow>
        </div>
      </TaGroup>
      <TaGroup title="展示动画">
        <div className="exp-badge-flex">
          <TaRow gutter={[16, 16]}>
            <TaCol span="6">
              <TaBadge content={count} showZero animated>
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
            <TaCol span="6">
              <TaSwitch onChange={onSwitch} />
            </TaCol>
          </TaRow>
          <TaRow gutter={[16, 16]}>
            <TaCol span="6">
              <TaBadge content={count2} dot animated>
                <div className="exp-badge-slot"></div>
              </TaBadge>
            </TaCol>
            <TaCol span="6">
              <TaSwitch onChange={onSwitch2} />
            </TaCol>
          </TaRow>
        </div>
      </TaGroup>
    </>
  )
}

Import 

import { TaBadge } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Props

属性类型默认值必填说明
contentnumber | string0否消息条数或者文本
maxCountnumber | string99否最大完全显示消息条数
dotbooleanfalse否是否显示为小红点
showZerobooleanfalse否消息数为 0 时是否显示
offsetnumber[][0, 0]否偏移量，格式为 [x, y]
animatedbooleanfalse否是否开启动画
colorstring否自定义色彩，支持 hex rgb hsl 等写法，详细效果查看

Slots

children 

<TaBadge count={1} showZero>
  <TaButton>badge</TaButton>
</TaBadge>

renderBadge 

<TaBadge content={1} renderBadge={() => <TaIcon icon="CheckOutlined" />}>
  <div className="exp-badge-slot"></div>
</TaBadge>