Toolbar is a fixed area at the bottom (or top) of a screen that contains navigation elements. Toolbar does not have any parts, just plain links inside
There are following components included:
Toolbar
Name | Type | Default | Description |
---|---|---|---|
bgClass | string | Additional class to add on Toolbar's "background" element | |
colors | object | Object with Tailwind CSS colors classes | |
colors.bgIos | string | 'bg-gradient-to-t from-ios-light-surface to-transparent dark:from-ios-dark-surface/50' | |
colors.bgMaterial | string | 'bg-md-light-surface-2 dark:bg-md-dark-surface-2' | |
colors.tabbarHighlightBgIos | string | '' | |
colors.tabbarHighlightBgMaterial | string | 'bg-md-light-primary dark:bg-md-dark-primary' | |
innerClass | string | Additional class to add on Toolbar's "inner" element | |
outline | boolean | undefined | Material theme only: Renders outer hairlines (borders) |
tabbar | boolean | false | Enables tabbar, same as using |
tabbarIcons | boolean | false | Enables tabbar with icons, same as using |
tabbarLabels | boolean | false | Enables tabbar with labels, same as using |
top | boolean | false | Enables top toolbar, in this case it renders border on shadows on opposite sides |
<script>import {Page,Navbar,NavbarBackLink,Toolbar,Link,Block,Button,ToolbarPane,} from 'konsta/svelte';let isTop = false;</script><Page class="flex flex-col"><Navbar title="Toolbar">{#snippet left()}{#if !isPreview}<NavbarBackLink onclick={() => history.back()} />{/if}{/snippet}</Navbar>{#if isTop}<Toolbartop={isTop}class="left-0 ios:top-safe-15 ios:mt-1 material:top-safe-16 sticky w-full"><ToolbarPane><Link>Link 1</Link><Link>Link 2</Link></ToolbarPane><ToolbarPane><Link>Link 3</Link></ToolbarPane></Toolbar>{/if}<Block strong inset class="space-y-4 shrink-0 mb-0"><p>Toolbar supports both top and bottom positions. Click the following buttonto change its position.</p><p><ButtonroundedonClick={() => {isTop = !isTop;}}>Toggle Toolbar Position</Button></p></Block><Block strong inset class="space-y-4 shrink-0"><p>Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornaretellus eu, euismod mauris. In porta turpis at semper convallis. Duisadipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam necmalesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulumcondimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncusvolutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipitrutrum enim. Nam a odio facilisis, elementum tellus non, tortor.Pellentesque felis eros, dictum vitae lacinia quis, lobortis vitae ipsum.Cras vehicula bibendum lorem quis imperdiet.</p><p>In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis,velit massa rutrum dolor, ac porta magna magna lacinia nunc. Curabiturcursus laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh.Mauris rhoncus nulla id sem suscipit volutpat. Pellentesque ac arcu innisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non,ullamcorper iaculis mi. In hac habitasse platea dictumst. Praesent variusat nisl eu luctus. Cras aliquet porta est. Quisque elementum quis dui etconsectetur. Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus. Sed sed laoreet purus. Pellentesque eget anteante.</p><p>Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet eratvenenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam vitaelacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrumarcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui.Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper massaat accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultriciesjusto. Vestibulum nec interdum nisi. Aenean ac consectetur velit, nonmalesuada magna. Sed pharetra vehicula augue, vel venenatis lectus gravidaeget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc.Nunc non metus neque. Suspendisse viverra lectus sed risus aliquet, velaccumsan dolor feugiat.</p></Block>{#if !isTop}<Toolbar class={`left-0 sticky bottom-0 w-full mt-auto`}><ToolbarPane><Link>Link 1</Link><Link>Link 2</Link></ToolbarPane><ToolbarPane><Link>Link 3</Link></ToolbarPane></Toolbar>{/if}</Page>