MMBadge 徽章

图标右上角的圆形徽标数字。

Props

IProps

属性	类型	默认值	必传	说明
value	number | string		否	值
overflowCount	number	99	否	展示封顶的数字值
offset	[number, number?]		否	设置状态点的位置偏移
dot	boolean		否	不展示数字
absolute	boolean		否	绝对定位

代码示例

import { View } from "@tarojs/components";
import PageDemoBlock from "../../components/pageComponents/pageDemoBlock";
import MMPageContainer from "../../components/pageComponents/pageContainer";
import MMBadge from "../../components/badge";

export default () => {
  return (
    <MMPageContainer title="MMBadge 徽章">
      <PageDemoBlock title="默认">
        <View
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-around",
            alignItems: "flex-end",
          }}
        >
          <View style={{ position: "relative" }}>
            <MMBadge absolute />
            默认点样式
          </View>

          <View style={{ position: "relative" }}>
            <MMBadge absolute value={10} />
            数值
          </View>

          <View style={{ position: "relative" }}>
            <MMBadge absolute value={1000} />
            数值
          </View>
        </View>
      </PageDemoBlock>
    </MMPageContainer>
  );
};