Appbar Vue Component

Appbar Components
Appbar Properties
Examples

Appbar Vue component represents Appbar element.

It is the main app bar with actions on top of the whole app. It is designed to be used in desktop apps with Aurora theme.

Appbar Components

There are following components included:

f7-appbar

Appbar Properties

Prop	Type	Default	Description
<f7-appbar> properties
inner	boolean	true	When enabled (by default), it will put all the content within internal `appbar-inner` element. Disable it only in case you want to put totally custom layout inside
no-shadow	boolean	false	Disable shadow rendering for MD theme
no-hairline	boolean	false	Disable appbar bottom thin border (hairline) for iOS theme
inner-class	string		Adds additional class to `appbar-inner` element
inner-class-name	string		Alias for `inner-class` prop

Examples

<template>
  
    <f7-appbar>
      <div class="left">
        <f7-button small panel-toggle="left" class="display-flex" icon-f7="bars"></f7-button>
        <f7-button small class="display-flex margin-left-half" icon-f7="square_list"></f7-button>
        <f7-button
          small
          class="display-flex margin-left-half"
          icon-f7="arrowshape_turn_up_left_fill"
        ></f7-button>
      </div>
      <div class="right">
        <f7-searchbar inline custom-search :disable-button="false"></f7-searchbar>
      </div>
    </f7-appbar>
    <f7-panel left>
      <f7-block>
        <p>Panel left content</p>
      </f7-block>
    </f7-panel>
    
<f7-page>
  <f7-navbar title="Appbar"></f7-navbar>
  <f7-block strong>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed sagittis dui.
      Fusce nulla massa, scelerisque vitae auctor in, luctus in ipsum. Sed eu lectus vel magna
      malesuada lacinia. Ut at vestibulum sem. In semper, arcu pulvinar volutpat fermentum,
      felis magna fringilla felis, nec volutpat nisi nunc quis ante. Fusce elementum egestas
      tortor ut porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
      posuere cubilia Curae; Duis id commodo elit. Sed massa dui, laoreet a orci sed, egestas
      vehicula tellus. Nulla pulvinar ornare justo sed finibus. Aliquam hendrerit dui at nulla
      eleifend, quis feugiat enim aliquam. Nulla facilisi. Orci varius natoque penatibus et
      magnis dis parturient montes, nascetur ridiculus mus.
    </p>
  </f7-block>
</f7-page>
</template>