工具栏（纯文本）

TabBarButton

TabBarButton UI 提供与WeLink规范一致的菜单选项视图

参数说明

效果示例

import React from 'react';

import {
  Tab, TabBody, TabBar, TabBarButton, Article 
} from '@wecode/react-weui';

export default class TabBarButtonDemo extends React.Component {
  state = {
    tab: 0
  };

  pageUp = () => {
    const { tab } = this.state;
    const newTab = tab - 1;
    this.setState({ tab: newTab < 0 ? 0 : newTab });
  }

  pageDown = () => {
    const { tab } = this.state;
    const newTab = tab + 1;
    this.setState({ tab: newTab > 3 ? 3 : newTab });
  }

  render() {
    const { tab } = this.state;
    return (
      <Tab>
        <TabBody>
          <Article style={{ display: tab === 0 ? null : 'none' }}>
            <h1>Page 1</h1>
            <section>
              <h2 className="title">Heading</h2>
              <section>
                <h3>1.1 Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                </p>
              </section>
            </section>
          </Article>
          <Article style={{ display: tab === 1 ? null : 'none' }}>
            <h1>Page 2</h1>
            <section>
              <h2 className="title">Heading</h2>
              <section>
                <h3>2.1 Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                </p>
              </section>
            </section>
          </Article>
          <Article style={{ display: tab === 2 ? null : 'none' }}>
            <h1>Page 3</h1>
            <section>
              <h2 className="title">Heading</h2>
              <section>
                <h3>3.1 Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                </p>
              </section>
            </section>
          </Article>
          <Article style={{ display: tab === 3 ? null : 'none' }}>
            <h1>Page 4</h1>
            <section>
              <h2 className="title">Heading</h2>
              <section>
                <h3>4.1 Title</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                </p>
              </section>
            </section>
          </Article>
        </TabBody>
        <TabBar>
          <TabBarButton
            handType="left"
            text="上一页"
            onClick={this.pageUp}
          />
          <TabBarButton handType="right" text="下一页" onClick={this.pageDown} />
        </TabBar>
      </Tab>
    );
  }
}