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

Toolbar React component represents Toolbar component.

Toolbar Components

There are following components included:

• **Toolbar** / **F7Toolbar**

Toolbar Properties

Toolbar Methods

Toolbar Slots

Toolbar React component (<Toolbar>) has additional slots for custom elements:

• **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

<Toolbar>
  <div slot="before-inner">Before Inner</div>
  <div slot="after-inner">After Inner</div>
  {/* Goes to default slot: */}
  <Link>Left Link</Link>
  <Link>Right Link</Link>
</Toolbar>
{/* Renders to: */}
<div class="toolbar">
  <div>Before Inner</div>
  <div class="toolbar-inner">
    <a href="#" class="link">Left Link</a>
    <a href="#" class="link">Right Link</a>
  </div>
  <div>After Inner</div>
</div>

Examples

Toolbar

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>
              <Button raised onClick={() => this.setState({isBottom: !this.state.isBottom})}>Toggle Toolbar Position</Button>
            </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>
    )
  }
}

Tabbar

export default class extends React.Component{
  constructor() {
    this.state = {
      isBottom: false,
    };
  }
  render() {
    return (
      <Page pageContent={false}>
        <Navbar title="Tabbar" backLink="Back">
          {this.$theme.md && (
            <NavRight>
              <Link iconMaterial="compare_arrows" onClick={() => this.setState({isBottom: !this.state.isBottom})}></Link>
            </NavRight>
          )}
        </Navbar>
        <Toolbar tabbar bottomMd={this.state.isBottom}>
          <Link tabLink="#tab-1" tabLinkActive>Tab 1</Link>
          <Link tabLink="#tab-2">Tab 2</Link>
          <Link tabLink="#tab-3">Tab 3</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>
    )
  }

Tabbar Labels

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>
              <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>
    )
  }
}

Tabbar Scrollable

export default class extends React.Component{
  constructor() {
    this.state = {
      isBottom: false,
    };
  }
  render() {
    const tabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    return (
      <Page pageContent={false}>
        <Navbar title="Tabbar Scrollable" backLink="Back">
          {this.$theme.md && (
            <NavRight>
              <Link iconMaterial="compare_arrows" onClick={() => this.setState({isBottom: !this.state.isBottom})}></Link>
            </NavRight>
          )}
        </Navbar>
        <Toolbar tabbar scrollable bottomMd={this.state.isBottom}>
          {tabs.map((tab, index) => (
            <Link
              key={tab}
              tabLink={`#tab-${tab}`}
              tabLinkActive={index === 0}
            >Tab {tab}</Link>
          ))}
        </Toolbar>
        <Tabs>
          {tabs.map((tab, index) => (
            <Tab
              key={tab}
              id={`tab-${tab}`}
              className="page-content"
              tabActive={index === 0}
            >
              <Block>
                <p><b>Tab {tab} content</b></p>
                ...
              </Block>
            </Tab>
          ))}
        </Tabs>
      </Page>
    )
  }
}

Hide Toolbar On Scroll

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>
);