-
Get Started
-
React Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
Subnavbar React Component
Subnavbar is useful when you need to put any additional elements into Navbar, like Tab Links or Search Bar. It also remains visible when Navbar hidden.
Subnavbar React component represents Subnavbar component.
Subnavbar Components
There are following components included:
Subnavbar
/F7Subnavbar
Subnavbar Properties
Prop | Type | Default | Description |
---|---|---|---|
<Subnavbar> properties | |||
sliding | boolean | Enables "sliding" effect | |
title | string | Subnvabar title | |
inner | boolean | true | When enabled the additional "subnavbar-inner" wrapper element will be added |
Examples
export default () => (
<Page pageContent={false}>
<Navbar title="Subnavbar">
<Subnavbar>
<Segmented raised>
<Button tabLink="#tab1" tabLinkActive>Tab 1</Button>
<Button tabLink="#tab2">Tab 2</Button>
</Segmented>
</Subnavbar>
</Navbar>
<Tabs>
<Tab id="tab1" tabActive className="page-content">
<Block>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi nisi, tincidunt ut eleifend non, sagittis a elit. Sed consequat odio at leo varius viverra...</p>
</Block>
</Tab>
<Tab id="tab2" className="page-content">
<Block>
<p>Donec iaculis posuere massa sed dignissim. Praesent id nibh nec massa mollis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas...</p>
</Block>
</Tab>
</Tabs>
</Page>
)