Navbar is a fixed area at the top of a screen that contains Page title and navigation elements.
There are following components included:
Navbar
NavbarBackLink
Name | Type | Default | Description |
---|---|---|---|
bgClass | string | Additional class to add on Navbar's "background" element | |
colors | object | Object with Tailwind CSS colors classes | |
colors.bgIos | string | 'bg-bars-ios-light dark:bg-bars-ios-dark' | Navbar bg color in iOS theme |
colors.bgMaterial | string | 'bg-bars-material-light dark:bg-bars-material-dark' | Navbar bg color in iOS theme |
colors.title | string | 'text-black dark:text-white' | Title text color |
fontSizeIos | string | 'text-navbar-ios' | Tailwind CSS class for font size in iOS theme |
fontSizeMaterial | string | 'text-navbar-material' | Tailwind CSS class for font size in Material theme |
hairlines | boolean | true | Renders outer hairlines (borders) on iOS theme |
innerClass | string | Additional class to add on Navbar's "inner" element | |
left | string | Content of the Navbar's "left" area | |
leftClass | string | Additional class to add on Navbar's "left" element | |
right | string | Content of the Navbar's "right" area | |
rightClass | string | Additional class to add on Navbar's "right" element | |
subnavbar | string | Content of the Navbar's "subnavbar" area | |
subnavbarClass | string | Additional class to add on Navbar's "subnavbar" element | |
subtitle | string | Content of the Navbar's "subtitle" area | |
subtitleClass | string | Additional class to add on Navbar's "subtitle" element | |
title | string | Content of the Navbar's "title" area | |
titleClass | string | Additional class to add on Navbar's "title" element | |
translucent | boolean | true | Makes Navbar background translucent (with |
Name | Description |
---|---|
left | Content of the Navbar's "left" area |
right | Content of the Navbar's "right" area |
subnavbar | Content of the Navbar's "subnavbar" area |
subtitle | Content of the Navbar's "subtitle" area |
title | Content of the Navbar's "title" area |
NavbarBackLink
should be placed in Navbar's "left" area:
<Navbar title="My App">
<NavbarBackLink slot="left" text="Back" onClick={() => history.back()} />
</Navbar>
Name | Type | Default | Description |
---|---|---|---|
component | string | 'a' | Component's HTML Element |
showText | boolean | 'auto' | 'auto' | Defines whether to show the link text. When 'auto', it hides link text for Material theme |
text | string | 'Back' | Text content of the back link |
onClick | function(e) | Link click handler | |
onClick | function(e) |
|
Name | Description |
---|---|
text | Text content of the back link |
<script>import { Page, Navbar, NavbarBackLink, Link, Block } from 'konsta/svelte';</script><Page><Navbar title="Navbar" subtitle="Subtitle" class="top-0 sticky"><Link slot="right" navbar>Right</Link></Navbar><div class="relative"><Block strong><p>Navbar is a fixed area at the top of a screen that contains Page titleand navigation elements.</p></Block></div></Page>
<script>import {Page,Navbar,NavbarBackLink,Block,Segmented,SegmentedButton,} from 'konsta/svelte';</script><Page><Navbar title="Subnavbar"><Segmentedslot="subnavbar"strongactiveButtonIndex={0}childButtonsLength={3}><SegmentedButton small strong active>Button</SegmentedButton><SegmentedButton small strong>Button</SegmentedButton><SegmentedButton small strong>Button</SegmentedButton></Segmented></Navbar><div class="relative"><Block strong><p>Subnavbar is useful when you need to put any additional elements intoNavbar, like Tab Links or Search Bar. It also remains visible whenNavbar hidden.</p></Block></div></Page>