---
title: WKTabbar 标签栏
group:
  title: 导航组件
  path: /gps/
---

## 何时使用

底部导航栏

## 基本使用

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

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

  const handleActiveChange = useCallback(key => {
    setActive(key);
  }, []);
  return (
    <PageWrapper title="基本使用">
      <WKTabbar active={active} onActiveChange={handleActiveChange}>
        <WKTabbarItem name="home" icon="home">
          首页
        </WKTabbarItem>
        <WKTabbarItem name="shopping" icon="pointsmall">
          快速购买
        </WKTabbarItem>
        <WKTabbarItem name="people" icon="people">
          我
        </WKTabbarItem>
      </WKTabbar>
    </PageWrapper>
  );
};
```

## 添加提示信息

```tsx
/**
 * title: 添加红点或者提示信息
 * desc: 添加红点或者提示信息，dot为true显示单点，dotValue设置提示值，dotColor设置点颜色
 */
import React, { useCallback, useState } from 'react';
import { WKTabbar, WKTabbarItem } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

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

  const handleActiveChange = useCallback(key => {
    setActive(key);
  }, []);
  return (
    <PageWrapper title="添加提示信息">
      <WKTabbar active={active} onActiveChange={handleActiveChange}>
        <WKTabbarItem name="home" icon="home" dot>
          首页
        </WKTabbarItem>
        <WKTabbarItem name="shopping" icon="pointsmall" dotValue="Hot">
          快速购买
        </WKTabbarItem>
        <WKTabbarItem name="people" icon="people" dotValue={2} dotColor="red">
          我
        </WKTabbarItem>
      </WKTabbar>
    </PageWrapper>
  );
};
```

## 自定义激活/非激活颜色

```tsx
/**
 * title: 自定义激活/非激活颜色
 * desc: 自定义激活/非激活颜色
 */
import React, { useCallback, useState } from 'react';
import { WKTabbar, WKTabbarItem } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

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

  const handleActiveChange = useCallback(key => {
    setActive(key);
  }, []);
  return (
    <PageWrapper title="自定义激活/非激活颜色">
      <WKTabbar active={active} onActiveChange={handleActiveChange} activeColor="red" inactiveColor="green">
        <WKTabbarItem name="home" icon="home">
          首页
        </WKTabbarItem>
        <WKTabbarItem name="shopping" icon="pointsmall">
          快速购买
        </WKTabbarItem>
        <WKTabbarItem name="people" icon="people">
          我
        </WKTabbarItem>
      </WKTabbar>
    </PageWrapper>
  );
};
```

## 是否固定底部

```tsx
/**
 * title: 是否固定底部
 * desc: 默认固定底部
 */
import React, { useCallback, useState } from 'react';
import { WKTabbar, WKTabbarItem, WKView } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default props => {
  const [active, setActive] = useState('home');

  const handleActiveChange = useCallback(key => {
    setActive(key);
  }, []);

  return (
    <WKView className="overflow-hidden">
      <WKView className="text-base p-3 w-screen">设置不固定底部</WKView>
      <WKTabbar active={active} onActiveChange={handleActiveChange} fixed={false}>
        <WKTabbarItem name="home" icon="home">
          首页
        </WKTabbarItem>
        <WKTabbarItem name="shopping" icon="pointsmall">
          快速购买
        </WKTabbarItem>
        <WKTabbarItem name="people" icon="people">
          我
        </WKTabbarItem>
      </WKTabbar>
    </WKView>
  );
};
```

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