Appbar Vue コンポーネント

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

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

    Appbarコンポーネント

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

    • f7-appbar

    アプリバーのプロパティ

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