AMP常用组件(持续更新)

AMP常用组件(持续更新...)

1.侧边栏/amp-sidebar
需引入脚本:

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

语法:

<button class="topbar" type="button" on="tap:sidebar"><i class="fa fa-bars"></i></button>
<amp-sidebar id="sidebar" side="left" layout="nodisplay"></amp-sidebar>
//注意:amp-sidebar 必须要有布局属性 layout="",不然会报错!

详细参数请移步https://amp.dev/documentation/components/amp-sidebar/

2.下拉(手风琴效果(2020/10/26更)
需引入脚本:

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

语法(栗子):

<amp-accordion>
					<section>
						<!-- 一级导航 -->
						<h4><a href="#">Home</a><i class="fa"></i></h4>
						<amp-accordion>
						</amp-accordion>
					</section>
					
					<section>
						<h4><a href="#">Products</a><i class="fa fa-angle-down"></i></h4>
						<amp-accordion>
						<!-- 二级导航 -->
							<section>
								<h4><a href="#">Products1</a><i class="fa fa-angle-down"></i></h4>
								<!-- 三级导航 -->
								<ul>
									<li><a href="">sudgfaysgdu</a></li>
								</ul>
							</section>
							<section>
								<h4><a href="#">Products2</a><i class="fa"></i></h4>
								<ul>
									<!-- <li><a href="">sudgfaysgdu</a></li> -->
								</ul>
							</section>
						</amp-accordion>
					</section>
					
					<section>
						<h4><a href="#">News</a><i class="fa"></i></h4>
						<amp-accordion>
						</amp-accordion>
					</section>
					
					<section>
						<h4><a href="#">About</a><i class="fa"></i></h4>
						<amp-accordion>
						</amp-accordion>
					</section>
				</amp-accordion>

注意:
①在组件amp-accordion下的<section></section>下面的第一个标签必须是<h1>-<h6>,否则会报错;

报错栗子:
<section>
		<p>demo</p>
		<p>demo</p>
</section>

②在组件amp-accordion下的<section></section>下面必须要有2个以上标签,否则会报错;

报错栗子:
<section>
		<h4><a href="#">Home</a></h4>
</section>

详细参数请移步:https://amp.dev/documentation/components/amp-accordion/

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页