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 |
component | string | 'div' | Component's HTML Element |
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:
<k-navbar title="My App">
<template #left>
<k-navbar-back-link text="Back" @click="() => history.back()" />
</template>
</k-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 |
Name | Description |
---|---|
text | Text content of the back link |
<template><k-page><k-navbar title="Navbar" subtitle="Subtitle" class="top-0 sticky"><template #right><k-link navbar>Right</k-link></template></k-navbar><div class="relative"><k-block strong><p>Navbar is a fixed area at the top of a screen that contains Page titleand navigation elements.</p></k-block></div></k-page></template><script>import { kPage, kNavbar, kNavbarBackLink, kLink, kBlock } from 'konsta/vue';export default {components: {kPage,kNavbar,kNavbarBackLink,kLink,kBlock,},};</script>
<template><k-page><k-navbar title="Subnavbar"><template #subnavbar><k-segmented strong><k-segmented-button small strong active> Button </k-segmented-button><k-segmented-button small strong> Button </k-segmented-button><k-segmented-button small strong> Button </k-segmented-button></k-segmented></template></k-navbar><div class="relative"><k-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></k-block></div></k-page></template><script>import {kPage,kNavbar,kNavbarBackLink,kBlock,kSegmented,kSegmentedButton,} from 'konsta/vue';export default {components: {kPage,kNavbar,kNavbarBackLink,kBlock,kSegmented,kSegmentedButton,},};</script>