---
title: WKCheckTag 选择标签
group:
  title: 展示组件
  path: /show/
---

## 何时使用

选择标签。

## 基本使用

```tsx
/**
 * title: WKCheckTag尺寸
 * desc: WKCheckTag尺寸基本使用方法
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import api from '@wakeapp/api';
import { WKCheckTag, View } from '@wakeapp/components';

export default () => {
  const [checked, setChecked] = useState(false);
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(false);
  const [checked3, setChecked3] = useState(false);
  const [checked4, setChecked4] = useState(false);
  const [checked5, setChecked5] = useState(false);

  const showToast = (e: boolean) => {
    api.showToast({
      title: e ? '选中' : '未选中',
      icon: 'none',
    });
  };

  const onChange = (e: boolean) => {
    setChecked(e);
    showToast(e);
  };
  const onChange1 = (e: boolean) => {
    setChecked1(e);
    showToast(e);
  };
  const onChange2 = (e: boolean) => {
    setChecked2(e);
    showToast(e);
  };
  const onChange3 = (e: boolean) => {
    setChecked3(e);
    showToast(e);
  };
  const onChange4 = (e: boolean) => {
    setChecked4(e);
    showToast(e);
  };
  const onChange5 = (e: boolean) => {
    setChecked5(e);
    showToast(e);
  };

  return (
    <PageWrapper title="支持的尺寸">
      <View style={{ display: 'flex', flexDirection: 'column' }}>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKCheckTag size="large" onChange={onChange2} value={checked2}>
            默认未选中
          </WKCheckTag>
          <WKCheckTag size="medium" onChange={onChange3} value={checked3}>
            默认未选中
          </WKCheckTag>
          <WKCheckTag size="small" onChange={onChange4} value={checked4}>
            默认选中
          </WKCheckTag>
          <WKCheckTag size="mini" onChange={onChange5} value={checked5}>
            默认选中
          </WKCheckTag>
        </View>
      </View>
    </PageWrapper>
  );
};
```

## WKCheckTag 类型

```tsx
/**
 * title: WKCheckTag类型
 * desc: WKCheckTag类型基本使用方法
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import api from '@wakeapp/api';
import { WKCheckTag, View } from '@wakeapp/components';

export default () => {
  const [checked, setChecked] = useState(false);
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(false);
  const [checked3, setChecked3] = useState(false);
  const [checked4, setChecked4] = useState(false);
  const [checked5, setChecked5] = useState(false);

  const showToast = (e: boolean) => {
    api.showToast({
      title: e ? '选中' : '未选中',
      icon: 'none',
    });
  };

  const onChange = (e: boolean) => {
    setChecked(e);
    showToast(e);
  };
  const onChange1 = (e: boolean) => {
    setChecked1(e);
    showToast(e);
  };
  const onChange2 = (e: boolean) => {
    setChecked2(e);
    showToast(e);
  };
  const onChange3 = (e: boolean) => {
    setChecked3(e);
    showToast(e);
  };
  const onChange4 = (e: boolean) => {
    setChecked4(e);
    showToast(e);
  };
  const onChange5 = (e: boolean) => {
    setChecked5(e);
    showToast(e);
  };

  return (
    <PageWrapper title="WKCheckTag类型">
      <View style={{ display: 'flex', flexDirection: 'column' }}>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKCheckTag onChange={onChange2} value={checked2}>
            primary
          </WKCheckTag>
          <WKCheckTag type="success" onChange={onChange3} value={checked3}>
            success
          </WKCheckTag>
          <WKCheckTag type="warning" onChange={onChange4} value={checked4}>
            warning
          </WKCheckTag>
          <WKCheckTag type="error" onChange={onChange5} value={checked5}>
            error
          </WKCheckTag>
        </View>
      </View>
    </PageWrapper>
  );
};
```

## WKCheckTag 主题

```tsx
/**
 * title: WKCheckTag主题
 * desc: WKCheckTag主题基本使用方法
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import api from '@wakeapp/api';
import { WKCheckTag, View } from '@wakeapp/components';

export default () => {
  const [checked, setChecked] = useState(false);
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(false);
  const [checked3, setChecked3] = useState(false);
  const [checked4, setChecked4] = useState(false);
  const [checked5, setChecked5] = useState(false);

  const showToast = (e: boolean) => {
    api.showToast({
      title: e ? '选中' : '未选中',
      icon: 'none',
    });
  };

  const onChange = (e: boolean) => {
    setChecked(e);
    showToast(e);
  };
  const onChange1 = (e: boolean) => {
    setChecked1(e);
    showToast(e);
  };
  const onChange2 = (e: boolean) => {
    setChecked2(e);
    showToast(e);
  };
  const onChange3 = (e: boolean) => {
    setChecked3(e);
    showToast(e);
  };
  const onChange4 = (e: boolean) => {
    setChecked4(e);
    showToast(e);
  };
  const onChange5 = (e: boolean) => {
    setChecked5(e);
    showToast(e);
  };

  return (
    <PageWrapper title="WKCheckTag类型">
      <View style={{ display: 'flex', flexDirection: 'column' }}>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKCheckTag type="success" onChange={onChange3} value={checked3} effect="light">
            light
          </WKCheckTag>
          <WKCheckTag type="warning" onChange={onChange4} value={checked4} effect="plain">
            plain
          </WKCheckTag>
          <WKCheckTag type="error" onChange={onChange5} value={checked5} effect="ghost">
            ghost
          </WKCheckTag>
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 可选择标签

```tsx
/**
 * title: 可选择标签
 * desc: 可选择标签基本使用方法
 */
import React, { useState } from 'react';
import PageWrapper from '../PageWrapper';
import api from '@wakeapp/api';
import { WKCheckTag, View } from '@wakeapp/components';

export default () => {
  const [checked, setChecked] = useState(false);
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(false);
  const [checked3, setChecked3] = useState(false);
  const [checked4, setChecked4] = useState(false);
  const [checked5, setChecked5] = useState(false);

  const showToast = (e: boolean) => {
    api.showToast({
      title: e ? '选中' : '未选中',
      icon: 'none',
    });
  };

  const onChange = (e: boolean) => {
    setChecked(e);
    showToast(e);
  };
  const onChange1 = (e: boolean) => {
    setChecked1(e);
    showToast(e);
  };
  const onChange2 = (e: boolean) => {
    setChecked2(e);
    showToast(e);
  };
  const onChange3 = (e: boolean) => {
    setChecked3(e);
    showToast(e);
  };
  const onChange4 = (e: boolean) => {
    setChecked4(e);
    showToast(e);
  };
  const onChange5 = (e: boolean) => {
    setChecked5(e);
    showToast(e);
  };

  return (
    <PageWrapper>
      <View style={{ display: 'flex', flexDirection: 'column' }}>
        <View style={{ margin: '20px' }}>可选择标签</View>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKCheckTag type="default" onChange={onChange} value={checked} effect="plain">
            自定义未选中
          </WKCheckTag>
          <WKCheckTag type="default" onChange={onChange1} value={checked1} effect="light">
            自定义选中
          </WKCheckTag>
        </View>
      </View>
    </PageWrapper>
  );
};
```

## WKCheckTag 默认禁用

```tsx
/**
 * title: WKCheckTag默认禁用
 * desc: WKCheckTag默认禁用基本使用方法
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import api from '@wakeapp/api';
import { WKCheckTag, View } from '@wakeapp/components';

export default () => {
  return (
    <PageWrapper>
      <View style={{ display: 'flex', flexDirection: 'column' }}>
        <View style={{ margin: '20px' }}>使用禁用样式</View>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKCheckTag disabled>默认禁用</WKCheckTag>
          <WKCheckTag type="success" disabled>
            默认禁用
          </WKCheckTag>
        </View>
      </View>
    </PageWrapper>
  );
};
```

## WKCheckTag 其他用法

```tsx
/**
 * title: WKCheckTag其他用法
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import api from '@wakeapp/api';
import { WKCheckTag, View } from '@wakeapp/components';

export default () => {
  return (
    <PageWrapper>
      <View style={{ display: 'flex', flexDirection: 'column' }}>
        <View style={{ margin: '20px' }}>WKCheckTag其他用法</View>
        <View style={{ marginLeft: '20px', alignItems: 'center' }}>
          <WKCheckTag round>round</WKCheckTag>
          <WKCheckTag type="success" style={{ marginTop: '-10px' }}>
            <View style={{ display: 'flex', flexDirection: 'column' }}>
              <View>children</View>
              <View>children插槽</View>
            </View>
          </WKCheckTag>
          <WKCheckTag color="red"></WKCheckTag>
        </View>
      </View>
    </PageWrapper>
  );
};
```

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