AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt
  • 網站

amp-sidebar

檢視示範 在 Playground 中開啟

簡介

amp-sidebar 元件提供一種方式來顯示旨在暫時存取的元內容 (導覽連結、按鈕、選單等)。側邊欄可以透過點擊按鈕來顯示，而主要內容在視覺上保持在下方。但是，接受媒體查詢的可選屬性可用於在網站的其他部分顯示元內容。子元素 <nav toolbar="(媒體查詢)" toolbar-target="elementID"> 將建立 toolbar 元素，允許側邊欄中的內容顯示在主要內容的其他部分。

您必須能夠調整瀏覽器視窗的大小，才能注意到 toolbar 元素的效果。在此範例中，最好透過將視窗大小從行動裝置調整為桌面裝置來檢視 toolbar 元素。

設定

匯入 amp-sidebar 元件。

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

基本用法

amp-sidebar 應為 <body> 的直接子元素。它必須具有 nodisplay 的版面配置。amp-sidebar 支援以下動作：toggle、open 和 close。

<amp-sidebar id="sidebar" class="sample-sidebar" layout="nodisplay" side="right">
  <h3>Sidebar</h3>
  <button on="tap:sidebar.close">Close sidebar</button>
  <button on="tap:sidebar.toggle">Toggle sidebar</button>
</amp-sidebar>
<button on="tap:sidebar.toggle">Toggle sidebar</button>
<button on="tap:sidebar.open">Open sidebar</button>

工具列

toolbar 允許 amp-sidebar 中的元素顯示在 <body> 的其他部分。這對於回應式設計非常有用，包括導覽列、社群頁尾等。

toolbar 元素有其自己的要求

  • 側邊欄可以透過新增具有 toolbar 屬性和 toolbar-target 屬性的 nav 元素來實作工具列。
  • nav 元素必須是 <amp-sidebar> 的子元素，並遵循以下格式：<nav toolbar="(媒體查詢)" toolbar-target="elementID">。
  • 包含 toolbar 屬性的 nav 必須僅包含單個 <ul> 元素，該元素包含 <li> 元素。
  • <li> 元素可能包含任何有效的 HTML 元素 (AMP 支援) 或 <amp-sidebar> 支援的任何 AMP 元素。
  • 工具列行為僅在 toolbar 屬性媒體查詢有效時套用。此外，頁面上必須存在具有 toolbar-target 屬性 ID 的元素才能套用工具列。
<amp-sidebar id="sidebar-left" class="sample-sidebar" layout="nodisplay" side="left">
  <h3>Sidebar</h3>
  <button on="tap:sidebar-left.close">Close sidebar</button>
  <nav toolbar="(min-width: 784px)" toolbar-target="target-element-left">
    <ul>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
    </ul>
  </nav>
  <ul>
    <li>Nav item 3</li>
    <li>Nav item 4</li>
  </ul>
</amp-sidebar>
<button on="tap:sidebar-left.toggle">Toggle sidebar</button>
<div id="target-element-left">
</div>

樣式化工具列

<amp-sidebar> 元素內的 toolbar 元素將根據 toolbar-target 元素是否顯示或隱藏，將類別套用至該元素。這對於在 toolbar 元素和 toolbar-target 元素上套用不同的樣式非常有用。這些類別為 amp-sidebar-toolbar-target-shown 和 amp-sidebar-toolbar-target-hidden。當 toolbar-target 元素顯示時，類別 amp-sidebar-toolbar-target-shown 會套用至 toolbar 元素。當 toolbar-target 元素隱藏時，類別 amp-sidebar-toolbar-target-hidden 會套用至 toolbar 元素。

.amp-sidebar-toolbar-target-shown {
  display: none;
}

<amp-sidebar id="sidebar-right" class="sample-sidebar" layout="nodisplay" side="right">
  <h3>Sidebar</h3>
  <button on="tap:sidebar-right.close">Close sidebar</button>
  <nav toolbar="(min-width: 784px)" toolbar-target="target-element-right">
    <ul>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
    </ul>
  </nav>
  <ul>
    <li>Nav item 3</li>
    <li>Nav item 4</li>
  </ul>
</amp-sidebar>
<button on="tap:sidebar-right.toggle">Toggle sidebar</button>
<div id="target-element-right">
</div>

桌面版側邊欄

amp-sidebar 可以用作主頁面上的永久導覽列。工具列目標 (aside 元素) 定義為頁面上的左側導覽元素。

<main>
  <aside id="target-element-desktop" class="desktop-sidebar">...
  </aside>
</main>

使用媒體查詢，只有當瀏覽器視窗寬度大於特定寬度時，工具列目標才能可見。在目標的父元素上使用 CSS flex，可讓我們將目標定位在頁面的左側。

@media (min-width: 784px) {
  main {
    display: flex;
    flex-direction: row;
  }
}

amp-sidebar 使用導覽工具列目標將其內容填入此導覽元素中。它透過將 id 屬性 (在上面的 aside 元素中定義) 與 nav 元素內的 toolbar-target 屬性進行比對來識別導覽工具列目標。

<amp-sidebar id="sidebar-desktop" class="desktop-sidebar" layout="nodisplay" side="left">
  <h1>Desktop Sidebar</h1>
  <button on="tap:sidebar-desktop.close">Close sidebar</button>
  <nav toolbar="(min-width: 784px)" toolbar-target="target-element-desktop">
    <ul>
      <li>Nav item A</li>
      <li>Nav item B</li>
      <li>Nav item C</li>
      <li>Nav item D</li>
    </ul>
  </nav>
</amp-sidebar>
需要進一步說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。

前往 Stack Overflow
未說明的特色功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性貢獻。

在 GitHub 上編輯範例