amp-sidebar
简介
amp-sidebar 组件提供了一种显示临时访问的元内容（导航链接、按钮、菜单等）的方法。可以通过点击按钮显示侧边栏，而主内容在视觉上保持在下方。但是，接受媒体查询的可选属性可以用来在站点的其他部分显示元内容。子 <nav toolbar="(media query)" 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 使用导航工具栏目标将其内容填充到此导航元素中。它通过将 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 上编辑示例-