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

Prop	Type	Default	Description
<Toolbar> properties
inner	boolean	true	When enabled (by default), it will put all the content within internal `toolbarInner` element. Disable it only in case you want to put totally custom layout inside
position	string		Toolbar position, can be `top` or `bottom`
top	boolean		Top positioned toolbar. Shortening for `position="top"`
topIos	boolean		Top positioned toolbar only for iOS theme
topMd	boolean		Top positioned toolbar only for MD theme
topAurora	boolean		Top positioned toolbar only for Aurora theme
bottom	boolean		Bottom positioned toolbar. Shortening for `position="bottom"`
bottomIos	boolean		Bottom positioned toolbar only for iOS theme
bottomMd	boolean		Bottom positioned toolbar only for MD theme
bottomAurora	boolean		Bottom positioned toolbar only for Aurora theme
tabbar	boolean	false	Defines whether the Toolbar is also a Tabbar or not
labels	boolean	false	Enables Tabbar with labels (affects only when `tabbar: true`)
scrollable	boolean	false	Enables scrollable Tabbar (affects only when `tabbar: true`)
noShadow	boolean		Disable shadow rendering for Material theme
noHairline	boolean	false	Disable toolbar/tabbar top thin border (hairline) for iOS theme
hidden	boolean	false	Makes toolbar hidden

Toolbar Methods

	<Toolbar> methods
.hide(animate)	Hide toolbar
.show(animate)	Show toolbar

Toolbar Slots

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

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

<Toolbar>
  <div slot="beforeInner">Before Inner</div>
  <div slot="afterInner">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="toolbarInner">
    <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: 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>
            <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: true,
    };
  }
  render() {
    return (
      <Page pageContent={false}>
        <Navbar title="Tabbar" backLink="Back">
          <NavRight>
            <Link iconIos="f7:reload" iconAurora="f7:reload" iconMd="material:compare_arrows" onClick={() => this.setState({isBottom: !this.state.isBottom})}></Link>
          </NavRight>
        </Navbar>

        <Toolbar tabbar position={this.state.isBottom ? 'bottom' : 'top'}>
          <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: true,
    };
  }
  render() {
    return (
      <Page pageContent={false}>
        <Navbar title="Tabbar Labels" backLink="Back">
          <NavRight>
            <Link iconIos="f7:reload" iconAurora="f7:reload" 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:email_fill" iconAurora="f7:email_fill" iconMd="material:email"></Link>
          <Link tabLink="#tab-2" text="Tab 2" iconIos="f7:today_fill" iconAurora="f7:today_fill" iconMd="material:today"></Link>
          <Link tabLink="#tab-3" text="Tab 3" iconIos="f7:cloud_fill" iconAurora="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: true,
    };
  }
  render() {
    const tabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    return (
      <Page pageContent={false}>
        <Navbar title="Tabbar Scrollable" backLink="Back">
          <NavRight>
            <Link iconIos="f7:reload" iconAurora="f7:reload" iconMd="material:compare_arrows" onClick={() => this.setState({isBottom: !this.state.isBottom})}></Link>
          </NavRight>
        </Navbar>

        <Toolbar tabbar scrollable position={this.state.isBottom ? 'bottom' : 'top'}>
          {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>
);