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="(media-query)" 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 使用 nav 工具栏目标将其内容填充到此导航元素中。它通过将 id 属性（在上面的 aside 元素中定义）与 nav 元素中的 toolbar-target 属性匹配来识别 nav 工具栏目标。

<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 上编辑示例