アプリバー

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

アプリバーのレイアウト

Appbarのレイアウトはとてもシンプルです。

<div class="appbar">
  <div class="appbar-inner">
    <!-- ... アプリバーの内容 -->
  </div>
</div>

アプリ全体のトップに位置するためには、App のルート要素で Panel や Views の前に配置する必要があります。

<div id="app">

  <!-- アプリバー -->
  <div class="appbar">
    <div class="appbar-inner">
      <!-- ... Appbarの内容 -->
    </div>
  </div>

  <!-- パネル -->
  <div class="panel panel-left panel-reveal">...</div>

  <!-- ビュー -->
  <div class="view view-main">...</div>
  ...

</div>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  /*
  --f7-appbar-offset: var(--f7-appbar-height);
  --f7-appbar-extra-offset: 0px;
  --f7-appbar-bg-color: var(--f7-bars-bg-color);
  --f7-appbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-appbar-bg-image: var(--f7-bars-bg-image);
  --f7-appbar-border-color: var(--f7-bars-border-color);
  --f7-appbar-link-color: var(--f7-bars-link-color);
  --f7-appbar-text-color: var(--f7-bars-text-color);
  */
  --f7-appbar-shadow-image: none;
}
.ios {
  --f7-appbar-height: 44px;
  --f7-appbar-inner-padding-left: 8px;
  --f7-appbar-inner-padding-right: 8px;
}
.md {
  --f7-appbar-height: 48px;
  --f7-appbar-inner-padding-left: 16px;
  --f7-appbar-inner-padding-right: 16px;
}
.aurora {
  --f7-appbar-height: 64px;
  --f7-appbar-inner-padding-left: 16px;
  --f7-appbar-inner-padding-right: 16px;
}

Examples

<div id="app">
  <!-- Appbar -->
  <div class="appbar">
    <div class="appbar-inner">
      <div class="left">
        <a href="#" class="button button-small panel-toggle display-flex" data-panel="left">
          <i class="f7-icons">bars</i>
        </a>
        <a href="#" class="button button-small display-flex margin-left-half">
          <i class="f7-icons">arrowshape_turn_up_left_fill</i>
        </a>
        <a href="#" class="button button-small display-flex margin-left-half">
          <i class="f7-icons">arrowshape_turn_up_right_fill</i>
        </a>
      </div>
      <div class="right">
        <div class="searchbar searchbar-inline">
          <div class="searchbar-input-wrap">
            <input type="text" placeholder="Search app" />
            <i class="searchbar-icon"></i>
            <div class="input-clear-button"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Rest of the app -->
  <div class="panel panel-left panel-cover panel-init">
    <div class="block">
      <p>Panel left content</p>
    </div>
  </div>
  <div class="view view-main view-init">
    <div class="page">
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="title">Appbar</div>
        </div>
      </div>
      <div class="page-content">
        <div class="block 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>
        </div>
      </div>
    </div>
  </div>
</div>