Appbar Vue コンポーネント

Appbar Vueコンポーネントは、Appbar要素を表します。

これは、アプリ全体の上部にあるアクションを持つメインのアプリバーです。Auroraテーマのデスクトップアプリでの使用を想定しています。

Appbarコンポーネント

以下のコンポーネントが含まれています。

f7-appbar

アプリバーのプロパティ

Prop	Type	Default	Description
<f7-appbar> properties
inner	boolean	true	有効にすると (デフォルト)、内部の `appbar-inner` 要素にすべてのコンテンツが配置されます。完全にカスタムされたレイアウトを内部に配置したい場合にのみ、これを無効にしてください。
no-shadow	boolean	false	MDテーマのシャドウレンダリングを無効にする
no-hairline	boolean	false	iOSテーマでappbar bottom thin border (hairline)を無効にします。
inner-class	string		appbar-inner`要素に追加クラスを追加します。
inner-class-name	string		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>