AMP(Lession 27) - sidebar 的設定

2019鐵人賽 amp 前端 sidebar

majo2013

2018-10-27 23:48:56

2202 瀏覽

分享至

sidebar 的設定

在手機網站上，常常會有把頁面選項放在 sidebar 中的狀況；就像下圖這樣：

按了某個按鈕，才會出現

Required Script

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

基本用法

<amp-sidebar id="sidebar"
  layout="nodisplay"
  side="right">
  <amp-img class="amp-close-image"
    src="/img/ic_close_black_18dp_2x.png"
    width="20"
    height="20"
    alt="close sidebar"
    on="tap:sidebar.close"
    role="button"
    tabindex="0"></amp-img>
  <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li> Nav item 1</li>
    <li>
      <amp-fit-text width="220"
        height="20"
        layout="responsive"
        max-font-size="24">
        Nav item 2 - <amp-fit-text>
      </amp-fit-text>
    </li>
    <li>
      <amp-fit-text width="220"
        height="20"
        layout="responsive"
        max-font-size="24">
        Nav item 3 - <amp-fit-text> longer text
      </amp-fit-text>
    </li>
    <li> Nav item 4 - Image
      <amp-img class="amp-sidebar-image"
        src="/img/favicon.png"
        width="20"
        height="20"
        alt="an image"></amp-img>
    </li>
    <li> Nav item 5</li>
    <li> Nav item 6</li>
  </ul>
</amp-sidebar>

Attributes

`side` - 指示側邊欄應從左側或右側打開的頁面的哪一側

如果未指定 side ，則 side 將從 <body> 的dir屬性繼承（ltr => left，rtl => right）; 如果沒有目錄，則默認為左側

`layout`

一定要是 nodisplay

`open`

會顯示 sidebar

`data-close-button-aria-label`

可選屬性，用於為為輔助功能添加的關閉按鈕設置 ARIA 標籤。

`toolbar`

此屬性存在於子元素 <nav toolbar =“（media-query）”toolbar-target =“elementID”> 上，並接受何時顯示工具欄的媒體查詢。

`toolbar-target`

此屬性出現在 <nav toolbar =“（media-query）”toolbar-target =“elementID”> 上，並接受頁面上元素的 id 。 toolbar-target 屬性將工具欄放入頁面上元素的指定 id ，而不使用默認工具欄樣式。

`common attributes`

詳細請看

Styling

amp-sidebar 組件可以使用標準 CSS 設置樣式。
可以設置放大器側邊欄的寬度以調整預設的最小（45px）和最大（80vw）值之間的寬度。
如果需要，可以設置放大器側邊欄的高度以調整側邊欄的高度。如果高度超過 100vw ，側邊欄將有一個垂直滾動條。側邊欄的預設高度為 100vw ，可以在 CSS 中覆蓋以縮短。
當側欄在頁面上打開時，側欄的當前狀態通過在 <amp-sidebar> 上設置的 open attribute 打開

參考來源：