Header

Header Type

Onomis dashboard comes with two types of headers: sticky and static.

The sticky header remains visible and fixed as the user scrolls down a webpage.

The default value of header.type in the app.config.js is set to 'sticky'. Additionally, we've created a changeHeaderTypeaction in src/store/headerStore, allowing you to change the value dynamically.

<template>
  <EBtn @click="toggleHeaderType"> Tap to change the header type! </EBtn>
</template>

<script setup>
  import {useHeaderStore} from "@/store/HeaderStore.js"

  const headerStore = useHeaderStore()

  // This is how you get the current headerType value
  const {headerType} = storeToRefs(headerStore)

  const toggleHeaderType = () => {
    // @possible-values: sticky, static
    if (headerType === 'sticky') headerStore.changeType('static')
    else headerStore.changeType('sticky')
  }

</script>

Note

We also auto store the header-type in local storage for later usage.

Props

For Header component, the following props are available:

Prop	Type	Default	Note
hamburgerMenu	Boolean	true	Displays hamburger menu.
hamburgerIcon	Object	-	Specify custom icon for hamburger menu, More Info about icons here.

Slots

The Header component provides custom slots that enable you to customize the content.

Slot	Description
prepend	Adds contents at the start of the header.
append	Adds contents at the end of the header.