---
title: WKTabs 标签页
group:
  title: 导航组件
  path: /gps/
---

## 何时使用

分隔内容上有关联但属于不同类别的数据集合，基础的、简洁的标签页。

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import api from '@wakeapp/api';
import PageWrapper from '../PageWrapper';
import { WKTabs, View, WKTabPanel } from '@wakeapp/components';
export default () => {
  const onActiveKeyChange = e => {
    api.showToast({
      title: e,
      icon: 'none',
    });
  };
  return (
    <PageWrapper title="基本使用">
      <View style={{ width: '100%', overflow: 'heddin' }}>
        <WKTabs onActiveKeyChange={onActiveKeyChange}>
          <WKTabPanel title="全部订单">
            <View>全部订单</View>
          </WKTabPanel>
          <WKTabPanel title="待付款">
            <View>待付款</View>
          </WKTabPanel>
          <WKTabPanel title="待收货" disabled>
            <View>待收货</View>
          </WKTabPanel>
          <WKTabPanel title="待发货">
            <View>待发货</View>
          </WKTabPanel>
          <WKTabPanel title="已完成">
            <View>已完成</View>
          </WKTabPanel>
          <WKTabPanel title="待评价">
            <View>待评价</View>
          </WKTabPanel>
          <WKTabPanel title="已完成" name="tst4">
            <View>已完成</View>
          </WKTabPanel>
          <WKTabPanel title="待评价" name="tst5">
            <View>待评价</View>
          </WKTabPanel>
        </WKTabs>
      </View>
    </PageWrapper>
  );
};
```

## WKTabs API 文档

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

## WKTabPanel API 文档

<API src='@wakeapp/components/WKTabs/WKTabPanel.d.ts'></API>
