v0.10.2

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.