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-bars-ios-light dark:bg-bars-ios-dark' | Toolbar bg color in iOS theme |
colors.bgMaterial | string | 'bg-bars-material-light dark:bg-bars-material-dark' | Toolbar bg color in iOS theme |
hairlines | boolean | true | Renders outer hairlines (borders) on iOS theme |
innerClass | string | Additional class to add on Toolbar's "inner" element | |
tabbar | boolean | false | Enables tabbar, 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 |
translucent | boolean | true | Makes Toolbar background translucent (with |
<script>import {Page,Navbar,NavbarBackLink,Toolbar,Link,Block,Button,} from 'konsta/svelte';let isTop = false;</script><Page><Navbar title="Toolbar" /><Toolbartop={isTop}class={`left-0 ${isTop ? 'ios:top-11-safe material:top-14-safe sticky' : 'bottom-0 fixed'} w-full`}><Link toolbar>Link 1</Link><Link toolbar>Link 2</Link><Link toolbar>Link 3</Link></Toolbar><Block strong class="space-y-4"><p>Toolbar supports both top and bottom positions. Click the following buttonto change its position.</p><p><ButtononClick={() => {isTop = !isTop;}}>Toggle Toolbar Position</Button></p></Block></Page>