Toolbar Svelte Component

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

Toolbar Components

There are following components included:

  • Toolbar

Toolbar Props

NameTypeDefaultDescription
bgClassstring

Additional class to add on Toolbar's "background" element

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-bars-ios-light dark:bg-bars-ios-dark'

Toolbar bg color in iOS theme

colors.bgMaterialstring'bg-bars-material-light dark:bg-bars-material-dark'

Toolbar bg color in iOS theme

hairlinesbooleantrue

Renders outer hairlines (borders) on iOS theme

innerClassstring

Additional class to add on Toolbar's "inner" element

tabbarbooleanfalse

Enables tabbar, same as using <Tabbar> component

tabbarLabelsbooleanfalse

Enables tabbar with labels, same as using <Tabbar labels> component

topbooleanfalse

Enables top toolbar, in this case it renders border on shadows on opposite sides

translucentbooleantrue

Makes Toolbar background translucent (with backdrop-filter: blur) in iOS theme

Examples

Toolbar.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
Toolbar,
Link,
Block,
Button,
} from 'konsta/svelte';
let isTop = false;
</script>
<Page>
<Navbar title="Toolbar" />
<Toolbar
top={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 button
to change its position.
</p>
<p>
<Button
onClick={() => {
isTop = !isTop;
}}
>
Toggle Toolbar Position
</Button>
</p>
</Block>
</Page>
Code licensed under MIT.
2021 © Konsta UI by nolimits4web.