Toolbar Vue 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'
component	string	'div'	Component's HTML Element
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.vue

<template>
  <k-page>
    <k-navbar title="Toolbar" />

    <k-toolbar
      :top="isTop"
      :class=="`left-0 ${
        isTop ? 'ios:top-11-safe material:top-14-safe sticky' : 'bottom-0 fixed'
      } w-full`"
    >
      <k-link toolbar>Link 1</k-link>
      <k-link toolbar>Link 2</k-link>
      <k-link toolbar>Link 3</k-link>
    </k-toolbar>

    <k-block strong-ios outline-ios-p class="space-y-4">
      <p>
        Toolbar supports both top and bottom positions. Click the following
        button to change its position.
      </p>
      <p>
        <k-button @click="() => (isTop = !isTop)">
          Toggle Toolbar Position
        </k-button>
      </p>
    </k-block>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kToolbar,
    kLink,
    kBlock,
    kButton,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kToolbar,
      kLink,
      kBlock,
      kButton,
    },
    setup() {
      const isTop = ref(false);

      return {
        isTop,
      };
    },
  };
</script>

Toolbar Vue Component

Toolbar Components

Toolbar Props

Examples