Toolbar React Component

Toolbar is a fixed (with Fixed and Through layout types) area at the bottom of a screen that contains navigation elements. Toolbar does not have any parts, just plain links inside

There are following components included:

• / F7Toolbar

Toolbar Properties

Toolbar Events

• default - element will be inserted as a child of <div class="toolbarInner"> element
• beforeInner - element will be inserted right before <div class="toolbarInner"> element
• afterInner - element will be inserted right after <div class="toolbarInner"> element

Examples

export default class extends React.Component{
  constructor() {
    this.state = {
      isBottom: true,
    };
  }
  render() {
    return (
      <Page>
        <Navbar title="Toolbar" backLink="Back"></Navbar>
        <Toolbar position={this.state.isBottom ? 'bottom' : 'top'}>
          <Link>Left Link</Link>
          <Link>Right Link</Link>
        </Toolbar>
        <BlockTitle>Toolbar Position</BlockTitle>
        <Block>
          <p>Toolbar supports both top and bottom positions. Click the following button to change its position.</p>
          <p>
          </p>
        </Block>
        <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: true,
    };
  }
  render() {
    return (
      <Page pageContent={false}>
        <Navbar title="Tabbar Labels" backLink="Back">
          <NavRight>
            <Link iconIos="f7:arrow_up_arrow_down_circle_fill" iconAurora="f7:arrow_up_arrow_down_circle_fill" iconMd="material:compare_arrows" onClick={() => this.setState({isBottom: !this.state.isBottom})}></Link>
          </NavRight>
        </Navbar>
        <Toolbar tabbar labels position={this.state.isBottom ? 'bottom' : 'top'}>
          <Link tabLink="#tab-1" tabLinkActive text="Tab 1" iconIos="f7:envelope_fill" iconAurora="f7:envelope_fill" iconMd="material:email"></Link>
          <Link tabLink="#tab-2" text="Tab 2" iconIos="f7:calendar_fill" iconAurora="f7:calendar_fill" iconMd="material:today"></Link>
          <Link tabLink="#tab-3" text="Tab 3" iconIos="f7:cloud_upload_fill" iconAurora="f7:cloud_upload_fill" iconMd="material:file_upload"></Link>
        </Toolbar>
        <Tabs>
          <Tab id="tab-1" className="page-content" tabActive>
            <Block>
              <p>Tab 1 content</p>
            </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>
);