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 Events
Event | Description |
---|---|
<Toolbar> events | |
toolbarHide | Event will be triggered when Toolbar becomes hidden |
toolbarShow | Event will be triggered when Toolbar becomes visible |
Toolbar Slots
Toolbar React component (<Toolbar>
) has additional slots for custom elements:
default
- element will be inserted as a child of<div class="toolbarInner">
elementbeforeInner
- element will be inserted right before<div class="toolbarInner">
elementafterInner
- 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: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 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: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>
)
}
}
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: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 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>
);
当前内容版权归 Framework7 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Framework7 .