---
title: WKBadge 徽标
group:
  title: 展示组件
  path: /show/
---

## 何时使用

WKBadge 徽标组件，用于展示元素中对应的某一部分信息，主要在右上角展示徽标内容或小圆点。

- 在 组件库 中，我们提供了四种类型的徽标

  - 字符串类型。
  - 数字类型：使用数字类型时，对应的会有一个最大值，超过最大值会显示 '{max}+'。
  - 小圆点：如果展示小圆点时，则不再展示其他信息。
  - 自定义徽标中间展示的内容。

- 另外提供了两种布局展示方式
  - absolute：相对于父组件绝对定位。
  - relative：独立展示，不依赖于父组件的位置。

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKBadge, WKIcon, View } from '@wakeapp/components';
const style = {
  display: 'inline-block',
  width: '50px',
  height: '50px',
  background: '#f2f3f5',
  borderRadius: '4px',
  position: 'relative',
  margin: '20px 0px 0px 20px',
};

export default () => {
  return (
    <PageWrapper title="基本使用">
      <View style={style}>
        <WKBadge value="Hot"></WKBadge>
      </View>
      <View style={style}>
        <WKBadge value={10}></WKBadge>
      </View>
      <View style={style}>
        <WKBadge value={100}></WKBadge>
      </View>
      <View style={style}>
        <WKBadge value={100} dot></WKBadge>
      </View>
      <View style={style}>
        <WKBadge>
          <WKIcon icon="arrow-up"></WKIcon>
        </WKBadge>
      </View>
      <View style={style}>
        <WKBadge value={100}>
          <WKIcon icon="arrow-up"></WKIcon>
        </WKBadge>
      </View>
    </PageWrapper>
  );
};
```

## 最大值

```tsx
/**
 * title: 最大值
 * desc: 自定义最大值
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKBadge, WKIcon, View } from '@wakeapp/components';
const style = {
  display: 'inline-block',
  width: '50px',
  height: '50px',
  background: '#f2f3f5',
  borderRadius: '4px',
  position: 'relative',
  margin: '20px 0px 0px 20px',
};

export default () => {
  return (
    <PageWrapper title="自定义最大值">
      <View style={style}>
        <WKBadge value={100} max={9}></WKBadge>
      </View>
      <View style={style}>
        <WKBadge value={100} max={20}></WKBadge>
      </View>
      <View style={style}>
        <WKBadge value={100}></WKBadge>
      </View>
      <View style={style}>
        <WKBadge value={1000} max={200}></WKBadge>
      </View>
    </PageWrapper>
  );
};
```

## 自定义颜色

```tsx
/**
 * title: 自定义颜色
 * desc: 自定义颜色
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKBadge, WKIcon, View } from '@wakeapp/components';
const style = {
  display: 'inline-block',
  width: '50px',
  height: '50px',
  background: '#f2f3f5',
  borderRadius: '4px',
  position: 'relative',
  margin: '20px 0px 0px 20px',
};

export default () => {
  return (
    <PageWrapper title="自定义颜色">
      <View style={style}>
        <WKBadge value={5} color="#12CD3D"></WKBadge>
      </View>
      <View style={style}>
        <WKBadge value={10} color="#1B99FF"></WKBadge>
      </View>
      <View style={style}>
        <WKBadge value={100}></WKBadge>
      </View>
      <View style={style}>
        <WKBadge dot></WKBadge>
      </View>
    </PageWrapper>
  );
};
```

## 自定义徽标

```tsx
/**
 * title: 自定义徽标
 * desc: 自定义徽标
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKBadge, WKIcon, View } from '@wakeapp/components';
const style = {
  display: 'inline-block',
  width: '50px',
  height: '50px',
  background: '#f2f3f5',
  borderRadius: '4px',
  position: 'relative',
  margin: '20px 0px 0px 20px',
};

export default () => {
  return (
    <PageWrapper title="自定义徽标">
      <View style={style}>
        <WKBadge>
          <WKIcon icon="arrow-up"></WKIcon>
        </WKBadge>
      </View>
      <View style={style}>
        <WKBadge value={10}>
          <WKIcon icon="arrow-up"></WKIcon>
        </WKBadge>
      </View>
      <View style={style}>
        <WKBadge value={100}>
          <WKIcon icon="arrow-up"></WKIcon>
        </WKBadge>
      </View>
    </PageWrapper>
  );
};
```

## 独立展示

```tsx
/**
 * title: 独立展示
 * desc: 独立展示
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKBadge, WKIcon, View, WKButton } from '@wakeapp/components';
const style = { margin: '10px 0px 0px 10px' };

export default () => {
  return (
    <PageWrapper title="独立展示">
      <WKBadge value={5} absolute={false} style={style}></WKBadge>

      <WKBadge value={100} absolute={false} style={style}></WKBadge>

      <WKBadge absolute={false} style={style}>
        <WKIcon icon="arrow-up" color="yellow"></WKIcon>
      </WKBadge>

      <View style={{ width: '100%', ...style }}>
        (文字内容 <WKBadge value={5} absolute={false} style={{ marginLeft: '10px' }}></WKBadge>)
      </View>

      <View style={{ width: '100%', ...style }}>
        <WKButton text="按钮1" style={{ width: '100px' }}>
          <WKBadge value={100} absolute={false} style={{ marginLeft: '10px' }}></WKBadge>
        </WKButton>

        <WKButton text="按钮2" style={{ width: '100px', margin: '0px 0px 0px 20px' }}>
          <WKBadge absolute={false} style={{ marginLeft: '10px' }}>
            <WKIcon icon="arrow-up" color="yellow"></WKIcon>
          </WKBadge>
        </WKButton>
      </View>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKBadge/index.d.ts'></API>
