Subnavbar Svelte 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 Svelte component represents Subnavbar component.
Subnavbar Components
There are following components included:
Subnavbar
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
subnavbar.svelte
<script>
import {
Navbar,
Page,
Subnavbar,
Segmented,
Button,
Block,
List,
ListItem,
} from 'framework7-svelte';
</script>
<Page>
<Navbar title="Subnavbar">
<Subnavbar>
<Segmented strong>
<Button smallMd active>Link 1</Button>
<Button smallMd>Link 2</Button>
<Button smallMd>Link 3</Button>
</Segmented>
</Subnavbar>
</Navbar>
<Block>
<p>
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.
</p>
</Block>
<List strong outlineIos>
<ListItem link="/subnavbar-title/" title="Subnavbar Title" />
</List>
</Page>
subnavbar-title.svelte
<script>
import { Navbar, Page, Block, Subnavbar } from 'framework7-svelte';
</script>
<Page>
<Navbar>
<Subnavbar title="Page Title" />
</Navbar>
<Block>
<p>It also possible to use Subnavbar to display page title and keep navbar only for actions.</p>
</Block>
<Block>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, consequatur quia amet
voluptate vero quasi, veniam, quisquam dolorum magni sint enim, harum expedita excepturi quas
iure magnam minus voluptatem quaerat!
</p>
<p>
Dolore laboriosam error magnam velit expedita recusandae, dolor asperiores unde, sint,
veritatis illum ipsum? Nulla ratione nobis, ullam debitis. Inventore sapiente rem dolore eum
ipsa totam perspiciatis cupiditate, amet maiores!
</p>
<p>
Ratione quod minus ipsum maxime cum voluptate molestiae adipisci placeat ut illo, alias nobis
perferendis magni odio sunt, porro, totam praesentium possimus! Autem inventore ut provident
animi quae, impedit id!
</p>
<p>
Aperiam ea ab harum. Quis dolorem cupiditate, incidunt mollitia ducimus voluptatem commodi!
Odio quasi amet hic nesciunt, quibusdam, est vero repellat sapiente perferendis, optio
laboriosam in culpa veniam alias ad.
</p>
<p>
A fuga corporis harum velit maiores, quaerat accusantium cum aspernatur consequuntur dolor vel
fugit omnis est dolorum delectus debitis aperiam distinctio eveniet vero nihil voluptatum
culpa. Accusamus aliquid facere tenetur?
</p>
</Block>
</Page>