AppBar ​

The AppBar, also known as a Navigation Bar, is a component used to display content at the top of a page.

Usage ​

Basic Usage ​

To use the VAppBar component, you can simply include it in your template like this:

Colors ​

• prop: color
• type: VAppBarColors | string
• default: default

The color prop allows you to specify a color for the AppBar. The possible values for this prop are: default, transparent, dark, primary, secondary, info, warning, success, and error.

Fixed ​

• prop: fixed
• type: boolean
• default: false

The fixed prop allows you to set a fixed position for the AppBar at the top of the page.

Sticky ​

• prop: sticky
• type: boolean
• default: false

The sticky prop allows you to set a sticky position for the AppBar at the top of the page.

Bordered ​

• prop: bordered
• type: boolean
• default: false
• required: false

The bordered prop allows you to apply a border style to the AppBar.

Shadow ​

• prop: shadow
• type: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'none'
• default: none

The shadow prop allows you to apply a shadow style to the AppBar. The possible values for this prop are: true, false, sm, md, lg, xl, 2xl, inner, and none.

Sizes ​

• prop: size
• type: sm | md | lg auto
• default: md
• required: false

The size prop allows you to specify the size of the AppBar. The possible values for this prop are: sm, md, and lg.

v-model ​

• prop: modelValue
• type: boolean
• default: true
• required: false

Use v-model to show or hide the app-bar.

Transition ​

• prop: transition
• type: string
• default: fade
• required: false

Use transition prop to change the default transition.

Elevate on Scroll ​

• prop: elevate-on-scroll
• type: string | boolean
• default: false

Use elevate-on-scroll prop to add shadow effect on app-bar when user scroll the page.

You can also change the size of shadow by setting the value of elevate-on-scroll prop with the shadow name like sm, md, lg and so on.

<template>
  <VAppBar elevate-on-scroll="lg"> Brand </VAppBar>
</template>

<template>
  <VAppBar elevate-on-scroll="lg"> Brand </VAppBar>
</template>

Hide on Scroll ​

• prop: hide-on-scroll
• type: boolean
• default: false

Use hide-on-scroll prop to hide app-bar when user scroll the page.

Props ​

Methods ​

toggle ​

• Type: toggle: () => void

<script setup lang="ts">
import {ref} from 'vue';
import Button from '@morpheme/button';

const appBarRef = ref();

const toggle = () => {
  appBarRef.value?.toggle();
};
</script>

<template>
  <VAppBar ref="appBarRef"> Hello World </VAppBar>

  <Button @click="toggle">Toggle</Button>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import Button from '@morpheme/button';

const appBarRef = ref();

const toggle = () => {
  appBarRef.value?.toggle();
};
</script>

<template>
  <VAppBar ref="appBarRef"> Hello World </VAppBar>

  <Button @click="toggle">Toggle</Button>
</template>

Events ​

Slots ​

CSS Variables ​

:root {
  --app-bar-height: 54;
  --app-bar-padding-x: var(--size-spacing-4);
  --app-bar-padding-y: var(--size-spacing-3);
  --app-bar-bg-color: var(--color-white);
  --app-bar-color: var(--color-gray-700);
  --app-bar-transition: all 0.3s ease;
  --app-bar-border-style: solid;
  --app-bar-border-width: 0px;
  --app-bar-border-color: var(--color-gray-300);
  --app-bar-shadow: none;
  --app-bar-z-index: 10;
}

:root {
  --app-bar-height: 54;
  --app-bar-padding-x: var(--size-spacing-4);
  --app-bar-padding-y: var(--size-spacing-3);
  --app-bar-bg-color: var(--color-white);
  --app-bar-color: var(--color-gray-700);
  --app-bar-transition: all 0.3s ease;
  --app-bar-border-style: solid;
  --app-bar-border-width: 0px;
  --app-bar-border-color: var(--color-gray-300);
  --app-bar-shadow: none;
  --app-bar-z-index: 10;
}

Customization ​

You can customize the style of the AppBar using CSS properties and the theme helper from Tailwind:

<script setup lang="ts">
import {ref} from 'vue';
</script>

<template>
  <VAppBar color="indigo"> Indigo Colored AppBar </VAppBar>
</template>

<style>
.app-bar-indigo {
  --app-bar-bg-color: theme('colors.indigo.500');
  --app-bar-color: theme('colors.white');
}
</style>

<script setup lang="ts">
import {ref} from 'vue';
</script>

<template>
  <VAppBar color="indigo"> Indigo Colored AppBar </VAppBar>
</template>

<style>
.app-bar-indigo {
  --app-bar-bg-color: theme('colors.indigo.500');
  --app-bar-color: theme('colors.white');
}
</style>

The color prop on the VAppBar component specifies the color for the AppBar. The corresponding CSS class, .app-bar-indigo, is then used to set the background color and text color using the --app-bar-bg-color and --app-bar-color CSS variables, respectively. The theme helper is used to retrieve the appropriate color values from the Tailwind theme.

Standalone Installation ​

You can install the AppBar component individually using the @morpheme/app-bar package.

To install the package using NPM, run the following command:

npm i @morpheme/app-bar

npm i @morpheme/app-bar

To use the AppBar component, you will need to import it in your code:

<script setup lang="ts">
import VAppBar from '@morpheme/app-bar';
</script>

<template>
  <VAppBar> Hello World </VAppBar>
</template>

<script setup lang="ts">
import VAppBar from '@morpheme/app-bar';
</script>

<template>
  <VAppBar> Hello World </VAppBar>
</template>

This will include the AppBar component in your project and allow you to use it in your templates. You can then customize the appearance of the AppBar using CSS or by using the provided props.

Tailwind Plugin ​

This package includes a custom Tailwind plugin for styling the AppBar component. If you are installing this package separately from the @morpheme/ui package, you will need to include the plugin in the plugins section of your Tailwind configuration file.

// tailwind.config.js
module.exports = {
  content: [],
  plugins: [require('@morpheme/tailwind-components/app-bar')],
};

// tailwind.config.js
module.exports = {
  content: [],
  plugins: [require('@morpheme/tailwind-components/app-bar')],
};

This will enable the custom styles for the AppBar component in your project. You can then use these styles in your templates by applying the appropriate class names.

Storybook ​

View Storybook documentation here.