Toolbar Vue 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

componentstring'div'

Component's HTML Element

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.vue
<template>
<twm-page>
<twm-navbar title="Toolbar" />
<twm-toolbar
:top="isTop"
:class=="`left-0 ${
isTop ? 'ios:top-11-safe material:top-14-safe sticky' : 'bottom-0 fixed'
} w-full`"
>
<twm-link toolbar>Link 1</twm-link>
<twm-link toolbar>Link 2</twm-link>
<twm-link toolbar>Link 3</twm-link>
</twm-toolbar>
<twm-block strong class="space-y-4">
<p>
Toolbar supports both top and bottom positions. Click the following
button to change its position.
</p>
<p>
<twm-button @click="() => (isTop = !isTop)">
Toggle Toolbar Position
</twm-button>
</p>
</twm-block>
</twm-page>
</template>
<script>
import { ref } from 'vue';
import {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmToolbar,
twmLink,
twmBlock,
twmButton,
} from 'tailwind-mobile/vue';
export default {
components: {
twmPage,
twmNavbar,
twmNavbarBackLink,
twmToolbar,
twmLink,
twmBlock,
twmButton,
},
setup() {
const isTop = ref(false);
return {
isTop,
};
},
};
</script>
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.