---
title: WKTabButton 底部按钮
group:
  title: 表单组件
  path: /form/
---

## 何时使用

单选按钮条

## 基本使用

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

/**
 * 模拟数据
 */
const mockData = [
  {
    label: '同城',
    value: 'city',
  },
  {
    label: '自提',
    value: 'self',
    disable: true,
  },
  {
    label: '快递',
    value: 'delivery',
  },
];
/**
 * 模拟当前激活的key
 */
const activeKey = 'delivery';

export default () => {
  const [active, setActive] = useState(activeKey);

  const handleChange = useCallback(id => {
    console.log('获取当前点击的id', id);
    setActive(id);
  }, []);
  return (
    <PageWrapper title="基本使用">
      <WKTabButton options={mockData} value={active} onChange={handleChange} />
    </PageWrapper>
  );
};
```

## 方形样式

```tsx
/**
 * title: 方形样式
 * desc: 提供两种样式选择，round为false为方形样式，默认不设置为椭圆样式
 */
import React, { useCallback, useState } from 'react';
import { WKTabButton } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

/**
 * 模拟数据
 */
const mockData = [
  {
    label: '同城',
    value: 'city',
  },
  {
    label: '自提',
    value: 'self',
    disable: true,
  },
  {
    label: '快递',
    value: 'delivery',
  },
];
/**
 * 模拟当前激活的key
 */
const activeKey = 'delivery';

export default () => {
  const [active, setActive] = useState(activeKey);

  const handleChange = useCallback(id => {
    console.log('获取当前点击的id', id);
    setActive(id);
  }, []);
  return (
    <PageWrapper title="方形样式">
      <WKTabButton options={mockData} value={active} onChange={handleChange} round={false} />
    </PageWrapper>
  );
};
```

## 激活按钮背景色

```tsx
/**
 * title: 激活按钮背景色
 * desc: 自定义激活按钮背景色
 */
import React, { useCallback, useState } from 'react';
import { WKTabButton } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

/**
 * 模拟数据
 */
const mockData = [
  {
    label: '同城',
    value: 'city',
  },
  {
    label: '自提',
    value: 'self',
    disable: true,
  },
  {
    label: '快递',
    value: 'delivery',
  },
];
/**
 * 模拟当前激活的key
 */
const activeKey = 'delivery';

export default () => {
  const [active, setActive] = useState(activeKey);

  const handleChange = useCallback(id => {
    console.log('获取当前点击的id', id);
    setActive(id);
  }, []);
  return (
    <PageWrapper title="激活按钮背景色">
      <WKTabButton options={mockData} value={active} onChange={handleChange} checkedColor="red" />
    </PageWrapper>
  );
};
```

## 禁用

```tsx
/**
 * title: 禁用
 * desc: 一整个禁用
 */
import React, { useCallback, useState } from 'react';
import { WKTabButton } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

/**
 * 模拟数据
 */
const mockData = [
  {
    label: '同城',
    value: 'city',
  },
  {
    label: '自提',
    value: 'self',
    disable: true,
  },
  {
    label: '快递',
    value: 'delivery',
  },
];
/**
 * 模拟当前激活的key
 */
const activeKey = 'delivery';

export default () => {
  const [active, setActive] = useState(activeKey);

  const handleChange = useCallback(id => {
    console.log('获取当前点击的id', id);
    setActive(id);
  }, []);
  return (
    <PageWrapper title="禁用">
      <WKTabButton options={mockData} value={active} onChange={handleChange} disable />
    </PageWrapper>
  );
};
```

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

## WKTabButtonOption

| Name    | Description | Type               | Default |
| ------- | ----------- | ------------------ | ------- |
| label   | --          | `React.ReactNode`  |         |
| value   | --          | `string \| number` |         |
| disable | --          | `boolean`          |         |
