スポンサー
Support Framework7

ツールバー / タブバー

    ツールバーは、画面の上部または下部に固定されたエリアで、ナビゲーション要素を含みます。

    ツールバーのHTMLレイアウト

    ツールバーのレイアウトは非常にシンプルです。

    <div class="toolbar">
      <div class="toolbar-inner">
        <a href="#" class="link">Link 1</a>
        <a href="#" class="link">Link 2</a>
        <a href="#" class="link">Link 3</a>
      </div>
    </div>

    ツールバーの位置

    ツールバーは、ページの上部にも下部にも配置することができます。そのため、常にクラスを追加してその位置を指定する必要があります。

    一番上に配置するには、Toolbar要素にtoolbar-topクラスを追加する必要があります。

    <!-- トップツールバー -->
    <div class="toolbar toolbar-top">
      <div class="toolbar-inner">
        <a href="#" class="link">Link 1</a>
        <a href="#" class="link">Link 2</a>
        <a href="#" class="link">Link 3</a>
      </div>
    </div>

    下側に配置するには、Toolbar要素に toolbar-bottom クラスを追加します。

    <!-- ボトムツールバー -->
    <div class="toolbar toolbar-bottom">
      <div class="toolbar-inner">
        <a href="#" class="link">Link 1</a>
        <a href="#" class="link">Link 2</a>
        <a href="#" class="link">Link 3</a>
      </div>
    </div>

    toolbar-top-ios, toolbar-top-md, toolbar-top-aurora, toolbar-bottom-ios, toolbar-bottom-md, toolbar-bottom-aurora` といったクラスを使用することで、iOS、MD、Auroraの各テーマで同時に異なる位置を使用することもできます。

    テーマ別のスタイリング

    iOSテーマでは、デフォルトでツールバー/タブバーの上部に細いボーダーが付いています。このボーダーを無効にするには、ツールバー要素に no-hairline クラスを追加する必要があります。

    <div class="toolbar no-hairline">...</div>

    MDテーマでは、デフォルトでは、ツールバー/タブバーに影がついています。この影を無効にするには、ツールバー要素に no-shadow クラスを追加する必要があります。

    <div class="toolbar no-shadow">...</div>
    

    ツールバーの種類

    それでは、DOM内のどこにツールバーやタブバーを配置するかを見てみましょう。ツールバーを配置するには、いくつかのルールがあります。

    静的なツールバー

    静的なツールバー・タイプは、おそらく最も使用頻度の低いレイアウト・タイプです。この場合、ツールバー/タブバーはスクロール可能なページコンテンツの一部に過ぎません。

    <div class="page">
      <!-- 固定のナビバーが最初に来る -->
      <div class="navbar">...</div>
    
      <!-- スクロール可能なページ・コンテンツ -->
      <div class="page-content">
        ...
    
        <!-- 静的ツールバーはページコンテンツの最後に表示されます。 -->
        <div class="toolbar">...</div>
      </div>
    </div>

    固定ツールバー

    固定ツールバーもページの一部ですが、ページのスクロールに依存せず、常に画面に表示されます。この場合、それはページの直接の子でなければならず、もしページが固定のナビバーも持っているなら、それはナビバーの後でなければなりません。

    <div class="page">
      <!-- 固定ナビバーが最初に来る -->
      <div class="navbar">...</div>
      <!-- 固定ツールバーは常にナビバーの後に配置されます。 -->
      <div class="toolbar toolbar-bottom">...</div>
    
      <!-- スクロール可能なページコンテンツ -->
      <div class="page-content">
        ...
      </div>
    </div>

    Fixed Toolbar/Tabbar must always be a direct child of a page and AFTER the Navbar (if fixed navbar is used on this page)

    共通ツールバー

    もし、ビュー内の全てのページに共通のツールバーが必要な場合、それはこのビューの直接の子でなければならず、ビュー内の全てのページの前になければなりません。

    <div class="view">
      <!-- ビュー共通ツールバー -->
      <div class="toolbar toolbar-bottom">...</div>
    
      <!-- ページ -->
      <div class="page">...</div>
    </div>

    もし全てのビューに1つだけ共通のツールバー/タブバーが必要な場合、Views要素の直接の子であり、全てのビューの前でなければなりません。このようなレイアウトは、主にツールバーを使用した複数のビュー/タブ型アプリのレイアウトで使用されます。

    <div class="views tabs">
      <!-- ビュー共通のツールバー/タブバー -->
      <div class="toolbar tabbar toolbar-bottom">...</div>
    
      <div class="view tab tab-active" id="tab-1">...</div>
      <div class="view tab" id="tab-2">...</div>
      ...
    </div>

    Common Toolbar/Tabbar must always be a direct child of Views/View and placed AFTER Navbar (if same positioned navbar is used)

    ツールバーアプリのメソッド

    ツールバーには、以下のアプリ・メソッドが用意されています。

    app.toolbar.hide(toolbarEl, animate)ツールバーを隠す
    • toolbarEl - 必要なツールバーのHTMLElementまたはstring(CSSセレクタ付き)。必須です。
    • animate - Boolean - アニメーションで非表示にするかどうか。デフォルトではtrueです。
    app.toolbar.show(toolbarEl, animate)ツールバーの表示
    • toolbarEl - 必要なツールバーのHTMLElementまたはstring(CSSセレクタ付き)です。必須です。
    • animate - Boolean - アニメーションを使って表示するかどうか。デフォルトでは、trueです。
    app.toolbar.setHighlight(tabbarEl)タブリンクのハイライトを、アクティブなものに合わせて設定します。MDテーマでのみ有効です
    • tabbarEl - 必要なタブバーの HTMLElement または string (with CSS Selector) です。必須です。

    ツールバーアプリのパラメータ

    ツールバー関連のパラメータを toolbar パラメータに渡すことで、グローバルな app parameters を使って、デフォルトのツールバーの動作を制御することができます。

    ParameterTypeDefaultDescription
    hideOnPageScrollbooleanfalseページをスクロールすると、ツールバー/タッバーが非表示になります。
    showOnPageScrollEndbooleantruetrue`に設定すると、スクロールしてページの最後に到達したときに、隠れていたツールバー/タブバーを表示します。
    showOnPageScrollTopbooleantruefalse`に設定すると、ページを一番上までスクロールしても、隠れたツールバー/タブバーは表示されません。非表示のツールバー/タブバーは、ページの一番上までスクロールしたときにのみ表示されます(ページの最初のほう)。

    例:

    var app = new Framework7({
      toolbar: {
        hideOnPageScroll: true,
      },
    });
    

    タブバー

    タブバーはツールバーの一種ですが、通常のリンクの代わりにアイコン(またはラベル付きアイコン)を含み、Tabsで使用するように設計されています。

    タブバーレイアウト

    Tabbarのレイアウトは、Toolbarとほぼ同じですが、Tabbarにはtabbarクラスが追加されています。

    <div class="toolbar tabbar toolbar-bottom">
      <div class="toolbar-inner">
        <a href="#tab1" class="tab-link tab-link-active">
          <i class="icon demo-icon-1"></i>
        </a>
        <a href="#tab2" class="tab-link">
          <i class="icon demo-icon-2"></i>
        </a>
        ....
      </div>
    </div>
    

    デフォルトでは、すべてのTabbar要素(リンク)は、ツールバーに沿って等間隔に配置されます。しかし、ここでリンクのサイズについて重要な注意があります。

    • 狭い画面(携帯電話)では、すべてのリンクは[画面の幅] / [リンクの数]に等しい同じサイズになります。

    • ワイドスクリーン(タブレット)では、すべてのリンクは中央に配置され、最小幅は105pxになります。

    ラベル付きTabbar

    Tabbarのアイコンをラベル付きで使いたい場合は、Tabbarに "tabbar-labels "クラスを追加して、リンクの中に`を入れる必要があります。

    <div class="toolbar tabbar tabbar-labels toolbar-bottom">
      <div class="toolbar-inner">
        <a href="#tab1" class="tab-link tab-link-active">
          <i class="icon demo-icon-1"></i>
          <span class="tabbar-label">Label 1</span>
        </a>
        <a href="#tab2" class="tab-link">
          <i class="icon demo-icon-2"></i>
          <span class="tabbar-label">Label 2</span>
        </a>
        ...
      </div>
    </div>
    

    スクロール可能なタブバー

    たくさんのリンクがあって表示しきれないときには、スクロール可能な Tabbar を使うと便利です。タブのリンクをスワイプ/スクロールすることができます。

    タブバーをスクロール可能にするために必要なのは、タブバーに tabbar-scrollable クラスを追加することだけです。

    <!-- 追加の "tabbar-scrollable" クラス -->
    <div class="toolbar tabbar tabbar-scrollable toolbar-bottom">
      <div class="toolbar-inner">
        <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
        <a href="#tab-2" class="tab-link">Tab 2</a>
        <a href="#tab-3" class="tab-link">Tab 3</a>
        ...
        <a href="#tab-12" class="tab-link">Tab 12</a>
      </div>
    </div>
    

    ページクラスでツールバー/タブバーを制御する

    Framework7では、追加のクラスを使用することで、特定のページや特定のページのスクロール時にツールバー/タブバーを表示/非表示にすることができます。

    特定のページでページスクロール時にツールバー/タブバーを非表示にしたい場合は、そのページの <div class="page-content"> 要素に追加のクラスを使用します。

    • hide-bars-on-scroll - ページスクロール時にナビバーとツールバーの両方を隠します。
    • hide-toolbar-on-scroll - ページのスクロール時にツールバーとタブバーを隠します。

    特定のページでこの動作を無効にするには、以下の追加クラスを使用できます。

    • keep-bar-on-scroll - ページのスクロール時に、ナビゲーションバーとツールバーを維持します。
    • keep-toolbar-on-scroll - ページスクロール時にツールバーを保持します。

    例:

    <div class="page">
      <div class="navbar">
        ...
      </div>
      <!-- "hide-toolbar-on-scroll" class to hide Toolbar -->
      <div class="page-content hide-toolbar-on-scroll">
        <div class="block">
          <p>Scroll page down</p>
          ...
        </div>
      </div>
      <div class="toolbar toolbar-bottom">
        <div class="toolbar-inner">
          <a href="#" class="link">Hello</a>
          <a href="#" class="link">World</a>
        </div>
      </div>
    </div>
    

    アプリのすべてのページ/ビューで共通の単一のツールバー/タブバーを持っている場合、必要のないいくつかのページでツールバー/タブバーを自動的に隠したり表示したりすることができます。

    これを実現するには、読み込んだページに「no-toolbar」クラスを追加するだけです(<div class="page no-toolbar">)。

    <!-- ページに「no-toolbar」クラスが追加されます。 -->
    <div class="page no-toolbar">
      <div class="page-content">
          ...
      </div>
    </div>
    

    ツールバーのイベント

    Toolbarは、Toolbar要素(<div class="toolbar">)に対して以下のDOMイベントを、アプリのインスタンスに対してアプリイベントを発行します。

    DOMイベント

    EventTargetDescription
    toolbar:hideToolbar <div class="toolbar">ツールバーが非表示になるとイベントが発生します。
    toolbar:showToolbar <div class="toolbar">ツールバーが表示されるとイベントが発生します。

    アプリのイベント

    EventArgumentsDescription
    toolbarHide(el)ツールバーが非表示になるとイベントが発生します。
    toolbarShow(el)ツールバーが表示されるとイベントが発生します。

    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-toolbar-bg-color: var(--f7-bars-bg-color);
      --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
      --f7-toolbar-bg-image: var(--f7-bars-bg-image);
      --f7-toolbar-border-color: var(--f7-bars-border-color);
      --f7-toolbar-link-color: var(--f7-bars-link-color);
      --f7-toolbar-text-color: var(--f7-bars-text-color);
      --f7-tabbar-link-active-color: var(--f7-theme-color);
      */
      --f7-tabbar-link-active-bg-color: transparent;
      --f7-tabbar-label-text-transform: none;
      --f7-toolbar-hide-show-transition-duration: 400ms;
    }
    .ios {
      --f7-toolbar-height: 44px;
      --f7-toolbar-font-size: 17px;
      --f7-toolbar-inner-padding-left: 8px;
      --f7-toolbar-inner-padding-right: 8px;
      /*
      --f7-toolbar-link-height: var(--f7-toolbar-height);
      --f7-toolbar-link-line-height: var(--f7-toolbar-height);
      */
      --f7-tabbar-labels-height: 50px;
      --f7-tabbar-labels-tablet-height: 50px;
      --f7-toolbar-top-shadow-image: none;
      --f7-toolbar-bottom-shadow-image: none;
      --f7-tabbar-icon-size: 28px;
      --f7-tabbar-link-text-transform: none;
      --f7-tabbar-link-font-weight: 400;
      --f7-tabbar-link-letter-spacing: 0;
      --f7-tabbar-label-font-size: 12px;
      --f7-tabbar-label-tablet-font-size: 14px;
      --f7-tabbar-label-font-weight: 500;
      --f7-tabbar-label-letter-spacing: 0.01;
      --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
    }
    .ios .theme-dark,
    .ios.theme-dark {
      --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
    }
    .md {
      --f7-toolbar-height: 48px;
      --f7-toolbar-font-size: 14px;
      --f7-toolbar-inner-padding-left: 0px;
      --f7-toolbar-inner-padding-right: 0px;
      /*
      --f7-toolbar-link-height: var(--f7-toolbar-height);
      --f7-toolbar-link-line-height: var(--f7-toolbar-height);
      */
      --f7-tabbar-labels-height: 56px;
      --f7-tabbar-labels-tablet-height: 56px;
      /*
      --f7-tabbar-link-active-border-color: var(--f7-theme-color);
      */
      --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
      --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
      --f7-tabbar-icon-size: 24px;
      --f7-tabbar-link-text-transform: uppercase;
      --f7-tabbar-link-font-weight: 500;
      --f7-tabbar-link-letter-spacing: 0.05em;
      --f7-tabbar-label-font-size: 14px;
      --f7-tabbar-label-tablet-font-size: 14px;
      --f7-tabbar-label-font-weight: 400;
      --f7-tabbar-label-letter-spacing: 0;
      --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
    }
    .md .theme-dark,
    .md.theme-dark {
      --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
    }
    .aurora {
      --f7-toolbar-height: 48px;
      --f7-toolbar-font-size: 16px;
      --f7-toolbar-inner-padding-left: 16px;
      --f7-toolbar-inner-padding-right: 16px;
      --f7-toolbar-link-height: auto;
      --f7-toolbar-link-line-height: inherit;
      --f7-tabbar-labels-height: 52px;
      --f7-tabbar-labels-tablet-height: 52px;
      /*
      --f7-tabbar-link-active-border-color: var(--f7-theme-color);
      */
      --f7-toolbar-top-shadow-image: none;
      --f7-toolbar-bottom-shadow-image: none;
      --f7-tabbar-icon-size: 24px;
      --f7-tabbar-link-text-transform: none;
      --f7-tabbar-link-font-weight: 500;
      --f7-tabbar-link-letter-spacing: 0;
      --f7-tabbar-label-font-size: 14px;
      --f7-tabbar-label-tablet-font-size: 14px;
      --f7-tabbar-label-font-weight: 500;
      --f7-tabbar-label-letter-spacing: 0;
      --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
    }
    .aurora .theme-dark,
    .aurora.theme-dark {
      --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
    }
    

    Examples

    静止画ツールバー

    <template>
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner sliding">
            <div class="left">
              <a class="link back">
                <i class="icon icon-back"></i>
                <span class="if-not-md">Back</span>
              </a>
            </div>
            <div class="title">Static Toolbar</div>
          </div>
        </div>
        <div class="page-content">
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
              alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
              similique!</p>
            <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
              porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
            <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
              ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
            <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
              possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
              Sunt, ad aliquam!</p>
            <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
              consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
              reprehenderit!</p>
          </div>
          <div class="toolbar toolbar-bottom">
            <div class="toolbar-inner">
              <a class="link">Link 1</a>
              <a class="link">Link 2</a>
              <a class="link">Link 3</a>
            </div>
          </div>
        </div>
      </div>
    </template>
    

    固定ツールバー

    <template>
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner sliding">
            <div class="left">
              <a class="link back">
                <i class="icon icon-back"></i>
                <span class="if-not-md">Back</span>
              </a>
            </div>
            <div class="title">Fixed Toolbar</div>
          </div>
        </div>
        <div class="toolbar toolbar-bottom">
          <div class="toolbar-inner">
            <a class="link">Link 1</a>
            <a class="link">Link 2</a>
            <a class="link">Link 3</a>
          </div>
        </div>
        <div class="page-content">
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
              alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
              similique!</p>
            <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
              porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
            <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
              ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
            <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
              possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
              Sunt, ad aliquam!</p>
            <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
              consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
              reprehenderit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
              alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
              similique!</p>
            <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
              porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
            <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
              ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
            <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
              possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
              Sunt, ad aliquam!</p>
            <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
              consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
              reprehenderit!</p>
          </div>
        </div>
      </div>
    </template>
    

    ツールバーAPI

    <template>
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner sliding">
            <div class="left">
              <a class="link back">
                <i class="icon icon-back"></i>
                <span class="if-not-md">Back</span>
              </a>
            </div>
            <div class="title">Toolbar API</div>
          </div>
        </div>
        <div class="toolbar toolbar-bottom">
          <div class="toolbar-inner">
            <a class="link">Link 1</a>
            <a class="link">Link 2</a>
            <a class="link">Link 3</a>
          </div>
        </div>
        <div class="page-content">
          <div class="block">
            <p><a class="button button-fill" @click=${hideToolbar}>Hide Toolbar</a></p>
            <p><a class="button button-fill" @click=${showToolbar}>Show Toolbar</a></p>
            <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
              porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
            <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
              ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
            <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
              possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
              Sunt, ad aliquam!</p>
            <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
              consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
              reprehenderit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
              alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
              similique!</p>
            <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
              porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
            <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
              ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
            <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
              possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
              Sunt, ad aliquam!</p>
            <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
              consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
              reprehenderit!</p>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      export default (props, { $on, $f7 }) => {
        let toolbarEl;
    
        const hideToolbar = () => {
          $f7.toolbar.hide(toolbarEl)
        }
    
        const showToolbar = () => {
          $f7.toolbar.show(toolbarEl)
        }
    
        $on('pageInit', (e, page) => {
          toolbarEl = page.$el.find('.toolbar')[0];
        });
    
        return $render;
      }
    </script>
    

    スクロールで隠す

    <template>
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner sliding">
            <div class="left">
              <a class="link back">
                <i class="icon icon-back"></i>
                <span class="if-not-md">Back</span>
              </a>
            </div>
            <div class="title">Hide On Scroll</div>
          </div>
        </div>
        <div class="toolbar toolbar-bottom">
          <div class="toolbar-inner">
            <a class="link">Link 1</a>
            <a class="link">Link 2</a>
            <a class="link">Link 3</a>
          </div>
        </div>
        <div class="page-content hide-toolbar-on-scroll">
          <div class="block">
            <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
              porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
            <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
              ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
            <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
              possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
              Sunt, ad aliquam!</p>
            <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
              consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
              reprehenderit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
              alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
              similique!</p>
            <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis vero
              porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
            <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
              ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
            <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
              possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
              Sunt, ad aliquam!</p>
            <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
              consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
              reprehenderit!</p>
          </div>
        </div>
      </div>
    </template>
    

    タブバー

    <template>
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner sliding">
            <div class="left">
              <a class="link back">
                <i class="icon icon-back"></i>
                <span class="if-not-md">Back</span>
              </a>
            </div>
            <div class="title">Tabbar</div>
          </div>
        </div>
        <div class="toolbar tabbar toolbar-bottom">
          <div class="toolbar-inner"><a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
            <a href="#tab-2" class="tab-link">Tab 2</a>
            <a href="#tab-3" class="tab-link">Tab 3</a>
          </div>
        </div>
        <div class="tabs">
          <div class="page-content tab tab-active" id="tab-1">
            <div class="block">
              <p><b>Tab 1 content</b></p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
                alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
                similique!</p>
              <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
                vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
              <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
                ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
              <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
                possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
                Sunt, ad aliquam!</p>
              <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
                consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
                reprehenderit!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
                alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
                similique!</p>
              <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
                vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
              <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
                ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
              <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
                possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
                Sunt, ad aliquam!</p>
              <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
                consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
                reprehenderit!</p>
            </div>
          </div>
          <div class="page-content tab" id="tab-2">
            <div class="block">
              <p><b>Tab 2 content</b></p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
                alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
                similique!</p>
              <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
                vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
              <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
                ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
              <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
                possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
                Sunt, ad aliquam!</p>
              <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
                consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
                reprehenderit!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
                alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
                similique!</p>
              <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
                vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
              <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
                ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
              <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
                possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
                Sunt, ad aliquam!</p>
              <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
                consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
                reprehenderit!</p>
            </div>
          </div>
          <div class="page-content tab" id="tab-3">
            <div class="block">
              <p><b>Tab 3 content</b></p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
                alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
                similique!</p>
              <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
                vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
              <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
                ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
              <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
                possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
                Sunt, ad aliquam!</p>
              <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
                consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
                reprehenderit!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
                alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
                similique!</p>
              <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
                vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
              <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
                ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
              <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
                possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
                Sunt, ad aliquam!</p>
              <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
                consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
                reprehenderit!</p>
            </div>
          </div>
        </div>
      </div>
    </template>
    

    ラベル付きタブバー

    <template>
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner sliding">
            <div class="left">
              <a class="link back">
                <i class="icon icon-back"></i>
                <span class="if-not-md">Back</span>
              </a>
            </div>
            <div class="title">Tabbar With Labels</div>
            <div class="right">
              <a class="link" @click=${togglePosition}>
                <i class="md-only icon material-icons rotate-icon">compare_arrows</i>
                <i class="if-not-md icon f7-icons">arrow_up_arrow_down_circle_fill</i>
              </a>
            </div>
          </div>
        </div>
        <div class="toolbar tabbar-labels toolbar-bottom">
          <div class="toolbar-inner">
            <a href="#tab-1" class="tab-link tab-link-active">
              <i class="icon f7-icons if-not-md">envelope_fill</i>
              <i class="icon material-icons md-only">email</i>
              <span class="tabbar-label">Inbox</span>
            </a>
            <a href="#tab-2" class="tab-link">
              <i class="icon f7-icons if-not-md">today_fill<span class="badge color-red">5</span></i>
              <i class="icon material-icons md-only">today<span class="badge color-red">5</span></i>
              <span class="tabbar-label">Calendar</span>
            </a>
            <a href="#tab-3" class="tab-link">
              <i class="icon f7-icons if-not-md">cloud_upload_fill</i>
              <i class="icon material-icons md-only">file_upload</i>
              <span class="tabbar-label">Upload</span>
            </a>
          </div>
        </div>
        <div class="tabs">
          <div class="page-content tab tab-active" id="tab-1">
            <div class="block">
              <p><b>Tab 1 content</b></p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
                alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
                similique!</p>
              <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
                vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
              <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
                ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
              <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
                possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
                Sunt, ad aliquam!</p>
              <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
                consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
                reprehenderit!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
                alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
                similique!</p>
              <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
                vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
              <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
                ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
              <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
                possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
                Sunt, ad aliquam!</p>
              <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
                consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
                reprehenderit!</p>
            </div>
          </div>
          <div class="page-content tab" id="tab-2">
            <div class="block">
              <p><b>Tab 2 content</b></p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
                alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
                similique!</p>
              <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
                vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
              <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
                ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
              <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
                possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
                Sunt, ad aliquam!</p>
              <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
                consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
                reprehenderit!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
                alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
                similique!</p>
              <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
                vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
              <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
                ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
              <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
                possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
                Sunt, ad aliquam!</p>
              <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
                consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
                reprehenderit!</p>
            </div>
          </div>
          <div class="page-content tab" id="tab-3">
            <div class="block">
              <p><b>Tab 3 content</b></p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
                alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
                similique!</p>
              <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
                vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
              <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
                ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
              <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
                possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
                Sunt, ad aliquam!</p>
              <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
                consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
                reprehenderit!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quos asperiores ut, odio numquam ab, qui,
                alias adipisci in magni reiciendis reprehenderit. Labore esse quae ut tempore consequatur, reprehenderit
                similique!</p>
              <p>Quis omnis, quam maiores voluptates vero atque porro? Soluta modi dolore eum dolor iste eos perspiciatis
                vero porro aliquam officia deleniti, cumque rem, consequatur, ea ipsa temporibus dicta architecto saepe.</p>
              <p>Tempora eius, sit distinctio architecto repellat, rerum quae, eum suscipit aperiam libero beatae ut eveniet
                ex labore illo! Labore illo harum voluptatum nulla ullam natus beatae iste tempora ut fugiat!</p>
              <p>Veritatis vero quis ipsum explicabo beatae consequatur, deleniti, tenetur assumenda sit quisquam soluta,
                possimus magnam nostrum animi hic sapiente sed laudantium similique quas labore, voluptatem eius aliquam.
                Sunt, ad aliquam!</p>
              <p>Animi iste, optio mollitia, sint hic neque sed, quis labore deserunt esse delectus fugit impedit qui
                consequatur reiciendis quam. Totam tenetur, mollitia. Porro optio similique perspiciatis aliquam ipsam vel
                reprehenderit!</p>
            </div>
          </div>
        </div>
      </div>
    </template>
    <style>
      .rotate-icon {
        transform: rotate(90deg);
      }
    </style>
    <script>
      export default (props, { $, $on }) => {
        let $toolbarEl;
    
        const togglePosition = () => {
          $toolbarEl.toggleClass('toolbar-bottom toolbar-top');
        }
    
        $on('pageInit', (e, page) => {
          $toolbarEl = page.$el.find('.toolbar');
        });
    
        return $render;
      }
    
    </script>
    

    スクロール可能なタブバー

    <template>
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner sliding">
            <div class="left">
              <a class="link back">
                <i class="icon icon-back"></i>
                <span class="if-not-md">Back</span>
              </a>
            </div>
            <div class="title">Scrollable Tabbar</div>
          </div>
        </div>
        <div class="toolbar tabbar tabbar-scrollable toolbar-bottom">
          <div class="toolbar-inner">
            ${tabs.map((tab, index) => $h`
            <a href="#tab-${tab}" class="tab-link ${index === 0 ? 'tab-link-active' : ''}">Tab ${tab}</a>
            `)}
          </div>
        </div>
        <div class="tabs">
          ${tabs.map((tab, index) => $h`
          <div id="tab-${tab}" class="page-content tab ${index === 0 ? 'tab-active' : ''}">
            <div class="block">
              <p><b>Tab ${tab} content</b></p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque corrupti, quos asperiores unde aspernatur
                illum odio, eveniet. Fugiat magnam perspiciatis ex dignissimos, rerum modi ea nesciunt praesentium iusto
                optio rem?</p>
              <p>Illo debitis et recusandae, ipsum nisi nostrum vero delectus quasi. Quasi, consequatur! Corrupti, explicabo
                maxime incidunt fugit sint dicta saepe officiis sed expedita, minima porro! Ipsa dolores quia, delectus
                labore!</p>
              <p>At similique minima placeat magni molestias sunt deleniti repudiandae voluptatibus magnam quam esse
                reprehenderit dolor enim qui sed alias, laboriosam quaerat laborum iure repellat praesentium pariatur
                dolorum possimus veniam! Consectetur.</p>
              <p>Sunt, sed, magnam! Qui, suscipit. Beatae cum ullam necessitatibus eligendi, culpa rem excepturi consequatur
                quidem totam eum voluptates nihil, enim pariatur incidunt corporis sed facere magni earum tenetur rerum ea.
              </p>
              <p>Veniam nulla quis molestias voluptatem inventore consectetur iusto voluptatibus perferendis quisquam,
                cupiditate voluptates, tenetur vero magnam nisi animi praesentium atque adipisci optio quod aliquid vel
                delectus ad? Dicta deleniti, recusandae.</p>
            </div>
          </div>
          `)}
        </div>
      </div>
    </template>
    <script>
      export default () => {
        const tabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    
        return $render;
      }
    </script>