導覽列

導覽列是螢幕頂端的一個固定區域，包含頁面標題和導覽元素。

導覽列有 3 個主要部分：左側、標題和右側。每個部分都可以包含任何 HTML 內容，但建議以下列方式使用它們

左側部分設計用於「返回連結」、「圖示」或單一文字連結。
標題部分用於顯示頁面標題或標籤連結（按鈕列/分段控制項）。
右側部分與左側部分相同。

導覽列版面非常簡單，不言自明

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">Left</div>
        <div class="title">Page Title</div>
        <div class="right">Right</div>
    </div>
</div>

請注意，導覽列的標題元素具有最低寬度優先順序，當視窗螢幕無法容納所有三個元素時，標題部分將會被切斷。

因此，如果您在標題部分使用純文字，當它被切斷時，它將在結尾處顯示省略號 (...)。但如果您在那裡有一些自訂元素，您需要特別注意。

要在左側或右側部分新增連結，您只需新增純文字<a>標籤，並加上link類別

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left Link</a>
        </div>
        <div class="title">Page Title</div>
        <div class="right">
            <a href="#" class="link">Right Link</a>
        </div>
    </div>
</div>

多個連結

沒有什麼特別的。只要將更多<a class="link">新增到所需的部份即可

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link">Left 1</a>
            <a href="#" class="link">Left 2</a>
        </div>
        <div class="title">Page Title</div>
        <div class="right">
            <a href="#" class="link">Right 1</a>
        </div>
    </div>
</div>

帶有圖示 + 文字的連結

這裡有一點不同。在這種情況下，我們需要用<span>元素包住連結文字。這是為了在圖示和「文字」之間正確間距，以及為了動畫

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link back">
                <i class="icon icon-back"></i>
                <span>Back</span>
            </a>
        </div>
        <div class="title">Title</div>
        <div class="right">
            <a href="#" class="link">
                <i class="icon another-icon"></i>
                <span>Menu</span>
            </a>
        </div>
    </div>
</div>

僅帶有圖示的連結

如果需要帶有圖示但沒有文字的連結，我們需要在連結中加上icon-only類別。有了這個類別，連結將具有固定的尺寸，因此我們不會用手指錯過它

<div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link icon-only">
                <i class="icon icon-back"></i>
            </a>
        </div>
        <div class="title">Title</div>
        <div class="right">
            <a href="#" class="link icon-only">
                <i class="icon another-icon"></i>
            </a>
        </div>
    </div>
</div>

此功能自 Framework7 版本 5.5.0 起提供。

透明導覽列以透明背景和透明標題出現，在頁面捲動時它會變成不透明。要啟用透明導覽列，我們需要在navbar中新增navbar-transparent類別

<!-- additional "navbar-transparent" class -->
<div class="navbar navbar-transparent">
  ...
</div>

大標題

大型標題導覽列具有額外的「列」（或「欄」）與大型標題文字，該文字會在頁面捲動時摺疊。若要將其加大，我們需要在 navbar 中加入額外的 navbar-large 類別，並在其內加入額外的 title-large 元素

<!-- additional "navbar-large" class -->
<div class="navbar navbar-large">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <div class="left">
      <!-- ... -->
    </div>
    <!-- usual title will be visible when larger title collapsed -->
    <div class="title">My App</div>
    <div class="right">
      <!-- ... -->
    </div>
    <!-- large title element -->
    <div class="title-large">
      <div class="title-large-text">My App</div>
    </div>
  </div>
</div>

大型透明標題

我們也可以啟用大型標題導覽列為「透明」。啟用後，導覽列背景及其主標題會隱藏，直到頁面捲動為止。

若要讓大型標題透明，我們需要額外的 navbar-transparent 類別

<!-- additional "navbar-transparent" class -->
<div class="navbar navbar-large navbar-transparent">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    ...
  </div>
</div>

特定主題樣式

在 ios 主題中，導覽列底部具有細邊框。若要停用此邊框，您需要在導覽列元素中加入 no-outline 類別

<div class="navbar no-outline">...</div>

現在讓我們看看可以在 DOM 中放置導覽列的位置。有幾個規則可以放置導覽列。

靜態導覽列位置可能是最少使用的版面類型。在這種情況下，導覽列只是可捲動頁面內容的一部分

<div class="page">
  <!-- Scrollable page content -->
  <div class="page-content">
    <!-- Static navbar goes in the beginning inside of page-content -->
    <div class="navbar">...</div>
    ...

  </div>
</div>

固定導覽列也是頁面的一部分，但它始終顯示在螢幕上，與頁面捲動無關。在這種情況下，它必須是頁面的直接子項，如果頁面也有固定的工具列，則它必須在工具列之前

<div class="page">
  <!-- Fixed navbar goes ALWAYS FIRST -->
  <div class="navbar">...</div>
  <!-- Fixed toolbar goes ALWAYS AFTER navbar -->
  <div class="toolbar toolbar-bottom">...</div>

  <!-- Scrollable page content -->
  <div class="page-content">
    ...
  </div>
</div>

固定導覽列必須始終是頁面的直接子項，並在工具列之前（如果此頁面使用固定工具列）

如果我們只需要一個一般導覽列供檢視中的所有頁面使用，則它必須是此檢視的直接子項，並在檢視中的所有頁面之前

<div class="view">
  <!-- View common navbar -->
  <div class="navbar">...</div>

  <!-- Pages -->
  <div class="page">...</div>
</div>

如果我們只需要一個一般導覽列/導覽列供所有檢視使用，則它必須是檢視元素的直接子項，並在所有檢視之前。

<div class="views tabs">
  <!-- Views common navbar -->
  <div class="navbar">...</div>

  <div class="view tab tab-active" id="tab-1">...</div>
  <div class="view tab" id="tab-2">...</div>
  ...
</div>

一般導覽列必須始終是檢視/檢視的直接子項，並在工具列之前（如果也使用一般工具列）

iOS 主題的其中一項優異功能是動態導覽列。啟用動態導覽列時，導覽列元素會在頁面轉換期間滑動和淡入淡出，並在滑動返回時淡出。

當您使用「固定位置」導覽列時，導覽列是頁面的直接子項，它會預設啟用。

如果您想停用它，您需要在初始化時或在所有檢視的應用程式參數中的所需檢視傳遞 iosDynamicNavbar: false。例如

// Disable globally
var app = new Framework7({
  view: {
    iosDynamicNavbar: false,
  },
});

// Disable only for view on its initialisation
var mainView = app.views.create('.view-main', {
  iosDynamicNavbar: false,
});

請注意，當啟用動態導覽列 (iosDynamicNavbar) 時，導覽列 HTML 元素會從頁面中分離並移到檢視 HTML 元素下方。在此情況下，若要存取與頁面相關的動態導覽列元素，請使用 app.navbar.getElByPage(pageEl) 方法

動態導覽列版面與一般導覽列相同，唯一的差別是您可以將額外的類別新增到導覽列部分（左、標題、右），以說明您希望在此部分套用哪種類型的轉場效果

預設情況下（如果沒有額外的類別），每個導覽列部分都有 「淡入淡出」 轉場效果
如果您將 sliding 類別新增至任何導覽列部分，它將會有 「滑動」 效果
如果您將 sliding 類別新增至 navbar-inner，則所有導覽列部分將會有 「滑動」 效果
為了獲得更好的外觀，您應在不同頁面中為相同的導覽列部分保留相同的轉場類型。

<!-- No additional classes, all elements will have "fade" effect on page transition -->
<div class="navbar">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="link">Home Left</a>
    </div>
    <div class="title">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

<!-- Title and Left will have "sliding" effect on page transition -->
<div class="navbar">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <!-- Additional "sliding" class -->
    <div class="left sliding">
      <a href="#" class="link">Home Left</a>
    </div>
    <!-- Additional "sliding" class -->
    <div class="title sliding">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

<!-- All parts will have "sliding" effect on page transition -->
<div class="navbar">
  <div class="navbar-bg"></div>
  <!-- Additional "sliding" class -->
  <div class="navbar-inner sliding">
    <div class="left">
      <a href="#" class="link">Home Left</a>
    </div>
    <div class="title">Home</div>
    <div class="right">
      <a href="#" class="link">Home Right</a>
    </div>
  </div>
</div>

我們可以使用導覽列提供的下列應用程式方法

app.navbar.hide(navbarEl, animate, hideStatusbar)	隱藏導覽列 navbarEl - HTMLElement 或 string (使用 CSS 選擇器) 的必要導覽列。必要。 animate - Boolean - 是否應使用動畫隱藏。預設為 `true` hideStatusbar - Boolean - 當為 `false` (預設) 時，它會部分隱藏導覽列，保留遮蓋狀態列區域所需的空間。否則，導覽列將會完全隱藏。
app.navbar.show(navbarEl, animate)	顯示導覽列 navbarEl - HTMLElement 或 string (使用 CSS 選擇器) 的必要導覽列。必要。 animate - Boolean - 是否應使用動畫顯示。預設為 `true`
app.navbar.size(navbarEl)	重新計算導覽列元素的位置樣式。在您動態變更某些導覽列元素後，這可能會很有用。 navbarEl - HTMLElement 或 string (使用 CSS 選擇器) 的必要導覽列。必要。
app.navbar.getElByPage(pageEl)	根據指定的頁面元素取得導覽列 HTML 元素。僅在啟用動態導覽列時才有用。在這種情況下，它不在頁面容器中。 pageEl - HTMLElement 或 string (使用 CSS 選擇器) 的頁面，用於尋找導覽列。必要。
app.navbar.getPageByEl(navbarEl)	根據指定的導覽列元素取得頁面 HTML 元素。僅在啟用動態導覽列時才有用。在這種情況下，它不在頁面容器中。 navbarEl - HTMLElement 或 string (使用 CSS 選擇器) 的導覽列，用於尋找相關頁面。必要。
app.navbar.collapseLargeTitle(navbarEl)	收合大型導覽列標題 navbarEl - HTMLElement 或 string (使用 CSS 選擇器) 的導覽列，用於收合。必要。
app.navbar.expandLargeTitle(navbarEl)	展開大型導覽列標題 navbarEl - HTMLElement 或 string (使用 CSS 選擇器) 的 navbar，用於展開。必填。
app.navbar.toggleLargeTitle(navbarEl)	切換大型 navbar 標題 navbarEl - HTMLElement 或 string (使用 CSS 選擇器) 的 navbar，用於切換 (摺疊或展開)。必填。

可以使用全域 app 參數來控制一些預設 navbar 行為，方法是在 navbar 參數下傳遞與 navbar 相關的參數

參數	類型	預設值	說明
hideOnPageScroll	布林值	false	頁面捲動時將隱藏導航列
showOnPageScrollEnd	布林值	true	設為 `true`，當捲動到達頁面底部時顯示隱藏的導航列
showOnPageScrollTop	布林值	true	設為 `false`，隱藏的導航列不會在每次將頁面捲動到頂部時變為可見。它們只會在最頂部的捲動位置，也就是頁面開頭時變為可見
scrollTopOnTitleClick	布林值	true	啟用時，每次點擊 navbar 的標題元素都會將相關頁面捲動到頂部
iosCenterTitle	布林值	true	啟用時，它會嘗試將標題置中於 iOS 主題。有時 (使用一些自訂設計) 可能不需要。
mdCenterTitle	布林值	false	啟用時，它會嘗試將標題置中於 MD 主題。有時 (使用一些自訂設計) 可能不需要。
collapseLargeTitleOnScroll	布林值	true	啟用時，大型標題會在頁面捲動到頂部時摺疊，並在頁面頂部再次展開。
snapPageScrollToLargeTitle	布林值	true	啟用時，它會將頁面捲動固定到大型標題摺疊/展開位置，因此不可能將頁面捲動停留在大型標題位置的中間。僅在啟用 `collapseLargeTitleOnScroll` 時有效。
snapPageScrollToTransparentNavbar	布林值	true	啟用時，它會將頁面捲動固定到透明導航列大小，因此不可能將頁面捲動停留在透明導航列位置的中間。

例如

var app = new Framework7({
  navbar: {
    hideOnPageScroll: true,
    iosCenterTitle: false,
  },
});

Framework7 允許您使用額外類別在特定頁面或特定頁面捲動時隱藏/顯示導航列。

如果您想在特定頁面上隱藏頁面捲動上的導覽列，請在此頁面的 <div class="page-content"> 元素上使用其他類別

hide-bars-on-scroll - 在頁面捲動時隱藏導覽列和工具列
hide-navbar-on-scroll - 在頁面捲動時隱藏導覽列

若要在特定頁面上停用此行為，您可以使用以下其他類別

keep-bars-on-scroll - 在頁面捲動時保留導覽列和工具列
keep-navbar-on-scroll - 在頁面捲動時保留導覽列

例如

<div class="page">
  <div class="navbar">
    ...
  </div>
  <!-- "hide-navbar-on-scroll" class to hide Navbar -->
  <div class="page-content hide-navbar-on-scroll">
    <div class="block">
      <p>Scroll page down</p>
      ...
    </div>
  </div>
</div>

如果您在應用程式的所有頁面/檢視中都有共用的單一導覽列，則可以自動隱藏/顯示您不需要的某些頁面的導覽列。

若要讓它運作，您只需要將 no-navbar 類別新增到載入的頁面 (<div class="page no-navbar">)

<!-- Page has additional "no-navbar" class -->
<div class="page no-navbar">
  <div class="page-content">
      ...
  </div>
</div>

導覽列會在導覽列元素 (<div class="navbar">) 上觸發下列 DOM 事件，並在應用程式實例上觸發應用程式事件

DOM 事件

事件	目標	說明
navbar:hide	導覽列 <div class="navbar">	當導覽列變為隱藏時，將觸發事件
navbar:show	導覽列 <div class="navbar">	當導覽列變為可見時，將觸發事件
navbar:collapse	導覽列 <div class="navbar">	當具有大標題的導覽列摺疊時 (從大型導覽列到一般導覽列)，將觸發事件
navbar:expand	導覽列 <div class="navbar">	當具有大標題的導覽列展開時 (從一般導覽列到大型導覽列)，將觸發事件

應用程式事件

事件	參數	說明
navbarHide	(el)	當導覽列變為隱藏時，將觸發事件
navbarShow	(el)	當導覽列變為可見時，將觸發事件
navbarCollapse	(el)	當具有大標題的導覽列摺疊時 (從大型導覽列到一般導覽列)，將觸發事件
navbarExpand	(el)	當具有大標題的導覽列展開時 (從一般導覽列到大型導覽列)，將觸發事件

CSS 變數

以下是相關 CSS 變數 (CSS 自訂屬性) 清單。

請注意，註解變數預設未指定，其值為它們在此情況下的後備值。

:root {
  /*
  --f7-navbar-bg-color: var(--f7-bars-bg-color);
  --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-navbar-border-color: var(--f7-bars-border-color);
  */
  --f7-navbar-hide-show-transition-duration: 400ms;
  --f7-navbar-title-line-height: 1.2;
  --f7-navbar-subtitle-text-align: inherit;
  --f7-navbar-large-title-line-height: 1.2;
  --f7-navbar-large-title-text-color: inherit;
  --f7-navbar-large-title-padding-left: 16px;
  --f7-navbar-large-title-padding-right: 16px;
}
.ios {
  /*
  --f7-navbar-link-color: var(--f7-bars-link-color);
  --f7-navbar-text-color: var(--f7-bars-text-color);
  */
  --f7-navbar-height: 44px;
  --f7-navbar-font-size: 17px;
  --f7-navbar-title-font-size: inherit;
  --f7-navbar-inner-padding-left: 8px;
  --f7-navbar-inner-padding-right: 8px;
  --f7-navbar-title-font-weight: 600;
  --f7-navbar-title-margin-left: 0;
  --f7-navbar-title-margin-right: 0;
  --f7-navbar-title-text-align: center;
  --f7-navbar-subtitle-font-size: 10px;
  --f7-navbar-subtitle-line-height: 1;
  --f7-navbar-large-title-height: 52px;
  --f7-navbar-large-title-font-size: 34px;
  --f7-navbar-large-title-font-weight: 700;
  --f7-navbar-large-title-letter-spacing: -0.03em;
  --f7-navbar-large-title-padding-vertical: 6px;
  /*
  --f7-navbar-link-height: var(--f7-navbar-height);
  --f7-navbar-link-line-height: var(--f7-navbar-height);
  */
  --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
}
.ios .dark,
.ios.dark {
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-navbar-height: 64px;
  --f7-navbar-font-size: 16px;
  --f7-navbar-title-font-size: 22px;
  --f7-navbar-inner-padding-left: 0px;
  --f7-navbar-inner-padding-right: 0px;
  --f7-navbar-title-font-weight: 400;
  --f7-navbar-title-margin-left: 0px;
  --f7-navbar-title-margin-right: 16px;
  --f7-navbar-title-text-align: left;
  --f7-navbar-subtitle-font-size: 14px;
  --f7-navbar-subtitle-line-height: 1.2;
  --f7-navbar-large-title-font-size: 28px;
  --f7-navbar-large-title-height: 88px;
  --f7-navbar-large-title-font-weight: 400;
  --f7-navbar-large-title-letter-spacing: 0;
  --f7-navbar-large-title-padding-vertical: 8px;
  --f7-navbar-link-height: 48px;
  --f7-navbar-link-line-height: 48px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-navbar-link-color: var(--f7-md-on-surface);
  --f7-navbar-text-color: var(--f7-md-on-surface);
  --f7-navbar-subtitle-text-color: var(--f7-md-on-surface-variant);
}

範例

navbar-static.f7.html

<div class="page no-navbar">
  <div class="page-content">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Static Navbar</div>
        <div class="right"></div>
      </div>
    </div>
    <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>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>

navbar-fixed.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Fixed Navbar</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>
      <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>

navbar-transparent.f7.html

<div class="page">
  <div class="navbar navbar-transparent">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Transparent Navbar</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>
      <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>

大標題

navbar-large.f7.html

<div class="page">
  <div class="navbar navbar-large">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Large Title</div>
      <div class="title-large">
        <div class="title-large-text">Large Title</div>
      </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>
      <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>

大型透明

navbar-large-transparent.f7.html

<div class="page">
  <div class="navbar navbar-large navbar-transparent">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Large Transparent</div>
      <div class="title-large">
        <div class="title-large-text">Large Transparent</div>
      </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>
      <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>

navbar-api.f7.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Navbar API</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p><a class="button button-raised button-fill" @click=${hideNavbar}>Hide Navbar</a></p>
        <p><a class="button button-raised button-fill" @click=${showNavbar}>Show Navbar</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 navbarEl;
    const hideNavbar = () => {
      $f7.navbar.hide(navbarEl);
    }
    const showNavbar = () => {
      $f7.navbar.show(navbarEl);
    }
    $on('pageInit', (e, page) => {
      navbarEl = $f7.navbar.getElByPage(page);
    });

    return $render;
  }
</script>

捲動時隱藏

navbar-hide-on-scroll.f7.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Hide On Scroll</div>
    </div>
  </div>
  <div class="page-content hide-navbar-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>

導覽列

導覽列 HTML 版面

帶有連結的導覽列

多個連結

帶有圖示 + 文字的連結

僅帶有圖示的連結

透明導覽列

大標題

大型透明標題

特定主題樣式

導覽列類型

靜態導覽列類型

固定導覽列類型

一般導覽列類型

動態導覽列

動態導覽列版面

導覽列應用程式方法

Navbar App 參數

使用頁面類別控制導航列

導覽列事件

DOM 事件

應用程式事件

CSS 變數

範例

靜態導覽列

固定導覽列

透明導覽列

大標題

大型透明

導覽列 API

捲動時隱藏