---
title: WKTag 标签
group:
  title: 展示组件
  path: /show/
---

## WKTag 能做什么？

- 用于显示文本标签，如下图中的满减、返京豆、限购、店铺特惠、回收闲置换礼品等
  <img src='./exp.jpg' width="600px">

## 标签尺寸

```tsx
/**
 * title: 标签尺寸
 */
import React from 'react';
import { WKTag, View, WKTagProps } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  return (
    <PageWrapper>
      <View className="wk-tag-page">
        <View style={{ margin: '20px' }}>标签尺寸</View>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKTag size="large" effect="dark">
            large
          </WKTag>
          <WKTag size="medium" effect="dark">
            medium
          </WKTag>
          <WKTag size="small" effect="dark">
            small
          </WKTag>
          <WKTag size="mini" effect="dark">
            mini
          </WKTag>
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 标签类型

```tsx
/**
 * title: 标签类型
 */
import React from 'react';
import { WKTag, View, WKTagProps } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  return (
    <PageWrapper>
      <View className="wk-tag-page">
        <View style={{ margin: '20px' }}>标签类型</View>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKTag type="default">default</WKTag>
          <WKTag type="primary">primary</WKTag>
          <WKTag type="success">success</WKTag>
          <WKTag type="warning">warning</WKTag>
          <WKTag type="danger">danger</WKTag>
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 标签主题类型

```tsx
/**
 * title: 标签主题类型
 */
import React from 'react';
import { WKTag, View, WKTagProps } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  return (
    <PageWrapper>
      <View className="wk-tag-page">
        <View style={{ margin: '20px' }}>标签主题类型</View>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKTag effect="dark">dark</WKTag>
          <WKTag effect="plain">plain</WKTag>
          <WKTag effect="light">light</WKTag>
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 标签其他用法

```tsx
/**
 * title: 标签其他用法
 */
import React from 'react';
import { WKTag, View, WKTagProps } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  return (
    <PageWrapper>
      <View className="wk-tag-page">
        <View style={{ margin: '20px' }}>圆角标签</View>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKTag round>round</WKTag>
        </View>
        <View style={{ margin: '20px' }}>有关闭图标的标签</View>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKTag type="default" size="medium" effect="dark" closeable>
            dark
          </WKTag>
        </View>
        <View style={{ margin: '20px' }}>日常使用</View>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKTag type="default" effect="dark">
            dark
          </WKTag>
          <WKTag effect="plain">白菜</WKTag>
          <WKTag>白菜</WKTag>
          <WKTag type="success">白菜</WKTag>
        </View>
      </View>
    </PageWrapper>
  );
};
```

<API src="@wakeapp/components/WKTag/index.d.ts"></API>
