badge 徽章

在右上角展示徽标数字或小红点。 需要注意的是。由于历史原因。该组件的设计并不能嵌套子级内容。它是作为单独组件进行使用的。并且容器组件需要有个相对定位

Props参数

名称	类型	是否必传	默认值	描述
value	number | string	否	-	值
max	number	否	99	展示封顶的数字值
仅当value未数值时生效
offset	[number, number?]	否	[0,0]	设置状态点的位置偏移
[xOffse, yOffset]
dot	boolean	否	false	不展示数字，只有一个小红点
color	string	否	cssPrimaryColor	颜色(背景颜色)
position	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	否	'top-right'	位置
renderValue	() => ReactNode	否	-	自定义渲染value

示例

/* eslint-disable no-console */
import { View } from '@tarojs/components'
import MMBadge from '~/components/badge'
import styles from './index.module.less'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'
import MMSpace from '~/components/space'
import varStyle from '~/components/styles/themes/default.module.less'
import MMIconFont from '~/components/icon-font'
import MMIconFontName from '~/components/icon-font/const'

export default () => {
  return (
    <MMPageContainer title="徽章">
      <PageDemoBlock title="基础使用">
        <MMSpace gap={20}>
          <MMBadge>
            <View className={styles.item} />
          </MMBadge>
          <MMBadge value={10}>
            <View className={styles.item} />
          </MMBadge>
          <MMBadge value="hot">
            <View className={styles.item} />
          </MMBadge>
        </MMSpace>
      </PageDemoBlock>

      <PageDemoBlock title="自定义颜色">
        <MMSpace gap={20}>
          <MMBadge color={varStyle.primaryColor}>
            <View className={styles.item} />
          </MMBadge>
          <MMBadge color={varStyle.primaryColor} value={10}>
            <View className={styles.item} />
          </MMBadge>
          <MMBadge color={varStyle.primaryColor} value="hot">
            <View className={styles.item} />
          </MMBadge>
        </MMSpace>
      </PageDemoBlock>

      <PageDemoBlock title="位置">
        <MMSpace gap={20}>
          <MMBadge value={100} position="top-left">
            <View className={styles.item} />
          </MMBadge>
          <MMBadge value={100}>
            <View className={styles.item} />
          </MMBadge>
          <MMBadge value={100} position="bottom-left">
            <View className={styles.item} />
          </MMBadge>
          <MMBadge value={100} position="bottom-right">
            <View className={styles.item} />
          </MMBadge>
        </MMSpace>
      </PageDemoBlock>

      <PageDemoBlock title="自定义渲染">
        <MMSpace gap={20}>
          <MMBadge renderValue={() => <MMIconFont value={MMIconFontName.Check} size={8} />}>
            <View className={styles.item} />
          </MMBadge>
        </MMSpace>
      </PageDemoBlock>

      <PageDemoBlock title="单独展示">
        <MMSpace gap={20}>
          <MMBadge />
          <MMBadge value={100} />
        </MMSpace>
      </PageDemoBlock>
    </MMPageContainer>
  )
}