二级导航。NavBar UI 提供与WeLink规范一致的菜单选项视图。

参数说明

NavBar

名称 类型 默认值 说明
add bool false add图标,search和add只能有一个，同时存在的时候会优先显示search
search bool false search图标,search和add只能有一个，同时存在的时候会优先显示search
onAction func sreach/add图标的点击事件

NavBarItem

名称 类型 默认值 说明
active bool false 设置选中状态
onClick func 选中事件

NavBarChildItem

名称 类型 默认值 说明
active bool false 设置选中状态
onClick func 选中事件
label string 三级导航名称

效果示例

HTML
import React from 'react';

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

export default class NavBarDemo extends React.Component {
  state = {
    tab: 0,
    active: 0
  };

  render() {
    const { tab, active } = this.state;
    return (
      <Tab>
        <NavBar add onAction={()=>console.log('点击action按钮')}>
          <NavBarItem active={tab === 0} onClick={e => this.setState({ tab: 0, active: 0 })}>
            选项一
          </NavBarItem>
          <NavBarItem active={tab === 1} onClick={e => this.setState({ tab: 1, active: 5 })}>
            选项二
          </NavBarItem>
          <NavBarItem active={tab === 2} onClick={e => this.setState({ tab: 2 })}>
            选择三
          </NavBarItem>
        </NavBar>
        <TabBody style={{ backgroundColor: '#fff', paddingTop: '40px' }}>
          <Article style={{ display: tab === 0 ? null : 'none' }}>
            <h1>Page 1-{active + 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-{active - 4}</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>
                <h3>2.2 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, cillum
                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                  sunt in culpa qui officia deserunt mollit anim id est laborum.
                </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>
                <h3>3.2 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, cillum
                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                  sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
              </section>
            </section>
          </Article>
        </TabBody>
      </Tab>
    );
  }
}

result. ""

    Not Found. ""