---
title: WKBottomBar 底部悬浮栏
group:
  title: 展示组件
  path: /show/
---

## 何时使用

WKBottomBar 底部悬浮栏组件用于将部分页面信息，固定展示在页面底部。

## 基本使用

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

export default () => {
  return (
    <PageWrapper title="基本使用">
      <WKBottomBar style={{ padding: '20px', textAlign: 'center' }}>
        <View>基本使用 BottomBar</View>
      </WKBottomBar>
    </PageWrapper>
  );
};
```

## 自定义高度

```tsx
/**
 * title: 自定义高度
 * desc: 自定义高度
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKBottomBar, View } from '@wakeapp/components';

export default () => {
  return (
    <PageWrapper title="自定义高度">
      <WKBottomBar height="60px" style={{ padding: '20px', textAlign: 'center' }}>
        <View>自定义高度 BottomBar</View>
      </WKBottomBar>
    </PageWrapper>
  );
};
```

## 自定义不同内容

```tsx
/**
 * title: 自定义不同内容
 * desc: 自定义不同内容
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKBottomBar, View, WKButton, WKIcon } from '@wakeapp/components';
import './index.less';

export default () => {
  return (
    <PageWrapper title="自定义不同内容">
      <WKBottomBar height="60px" className="bottom-bar-box">
        <View className="image-btn">
          <WKIcon icon="home" color="#000000" width="20px"></WKIcon>
          <View>首页</View>
        </View>
        <View className="image-btn">
          <WKIcon icon="share" color="#000000" width="20px"></WKIcon>
          <View>分享</View>
        </View>

        <WKButton className="button-btn" type="primary" size="large" round text="立即购买"></WKButton>
      </WKBottomBar>
    </PageWrapper>
  );
};
```

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