Skip to content

Navbar

Jump to bottom
AlexanderBoriskin edited this page Jul 31, 2018 · 9 revisions

Component, that contains all necessary app information - contacts, logo, dropdowns with user settings, etc. - and provides basic user actions (f.e, toggle sidebar component).

Navbar is composed of 2 components:

  • app-navbar - contains navbar functionality.
  • vuestic-navbar - contains navbar view and necessary styles.
<app-navbar :isOpen="opened" @toggle-menu="toggleSidebar"/>

Props

  • isOpen - Boolean - defines default open|closed state of sidebar. prop is bound bidirectionaly (component will emit changes by clicking selector icon).

Events

  • toggle-menu - changes state of sidebar.
<vuestic-navbar>
    <header-selector slot="selector" :isOpen.sync="valueProxy"/>
    <span slot="logo"> ... </span>
    <span slot="center"> ... </span>
    <slot></slot>
</vuestic-navbar>

Slots

  • selector - icon, that toggles sidebar state
  • logo - app logo
  • center - info about app (f.e, contacts)
  • default - components, that placed in right part of navbar (f.e, user settings dropdowns)
Clone this wiki locally