Toolbar Svelte Component

Toolbar Components
Toolbar Props
Examples

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-ios-light-surface-2 dark:bg-ios-dark-surface-2'
colors.bgMaterial	string	'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.tabbarHighlightBgIos	string	'bg-primary'
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	Renders outer hairlines (borders). If not specified, will be enabled for iOS theme
tabbar	boolean	false	Enables tabbar, same as using `<Tabbar>` component
tabbarIcons	boolean	false	Enables tabbar with icons, same as using `<Tabbar icons>` component
tabbarLabels	boolean	false	Enables tabbar with labels, same as using `<Tabbar labels>` component
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 `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 strongIos outlineIos 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>

Toolbar Svelte Component

Toolbar Components

Toolbar Props

Examples