Toolbar React Component

• / **F7Toolbar**

• **default** - element will be inserted as a child of <div class="toolbar-inner"> element
• **before-inner** - element will be inserted right before <div class="toolbar-inner"> element
• **after-inner** - element will be inserted right after <div class="toolbar-inner"> element

export default class extends React.Component{
  constructor() {
    this.state = {
      isBottom: false,
    };
  }
  render() {
    return (
      <Page>
        <Navbar title="Toolbar" backLink="Back"></Navbar>
        <Toolbar bottomMd={this.state.isBottom}>
          <Link>Left Link</Link>
          <Link>Right Link</Link>
        </Toolbar>
        {this.$theme.md && (
          <BlockTitle>Toolbar Position</BlockTitle>
        )}
        {this.$theme.md && (
          <Block>
            <p>Material (MD) theme toolbar supports both top and bottom positions. Click the following button to change its position.</p>
            <p>
            </p>
        )}
        <Block>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi...</p>
        </Block>
      </Page>
    )
  }
}

export default class extends React.Component{
  constructor() {
    this.state = {
      isBottom: false,
    };
  }
  render() {
    return (
      <Page pageContent={false}>
        <Navbar title="Tabbar Labels" backLink="Back">
          {this.$theme.md && (
            <NavRight>
              <Link iconMaterial="compare_arrows" onClick={() => this.setState({isBottom: !this.state.isBottom})}></Link>
            </NavRight>
          )}
        </Navbar>
        <Toolbar tabbar labels bottomMd={this.state.isBottom}>
          <Link tabLink="#tab-1" tabLinkActive text="Tab 1" iconIos="f7:email_fill" iconMd="material:email"></Link>
          <Link tabLink="#tab-2" text="Tab 2" iconIos="f7:today_fill" iconMd="material:today"></Link>
          <Link tabLink="#tab-3" text="Tab 3" iconIos="f7:cloud_fill" iconMd="material:file_upload"></Link>
        </Toolbar>
        <Tabs>
          <Tab id="tab-1" className="page-content" tabActive>
            <Block>
            </Block>
          </Tab>
          <Tab id="tab-2" className="page-content">
            <Block>
              <p>Tab 2 content</p>
              ...
            </Block>
          </Tab>
          <Tab id="tab-3" className="page-content">
            <Block>
              <p>Tab 3 content</p>
              ...
            </Block>
          </Tab>
        </Tabs>
      </Page>
    )
  }
}

export default () => (
  <Page hideToolbarOnScroll>
    <Navbar title="Hide Toolbar On Scroll" backLink="Back"></Navbar>
    <Toolbar bottom-md>
      <Link>Left Link</Link>
      <Link>Right Link</Link>
    </Toolbar>
    <Block strong>
      <p>Toolbar will be hidden if you scroll bottom</p>
    </Block>
    <Block>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos maxime incidunt id ab culpa ipsa omnis eos, vel excepturi officiis neque illum perferendis dolorum magnam rerum natus dolore nulla ex.</p>
      ...
    </Block>
  </Page>