-
Notifications
You must be signed in to change notification settings - Fork 3.9k
/
Copy pathamp-list.amp.html
126 lines (115 loc) · 5.13 KB
/
amp-list.amp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!--
## Introduction
The [`amp-list`](https://www.ampproject.org/docs/reference/components/amp-list) component fetches dynamic content from a CORS JSON endpoint and renders it using a supplied template. This is good for embedding a dynamic list of related articles.
-->
<!-- -->
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- ## Setup -->
<!-- Import the `amp-list` component ... -->
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<!-- ... and the `amp-mustache` component in the header -->
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
<link rel="canonical" href="https://ampbyexample.com/components/amp-list/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
amp-list {
margin-left: 16px;
}
.list-overflow {
width: 160px;
margin-left: auto;
}
</style>
</head>
<body>
<div on="tap:list1.refresh,list2.refresh,list3.refresh,list4.refresh,list5.refresh">
Refresh All Lists
</div>
<!-- ## Using a nested template -->
<!--
The `amp-list` content is provided by a JSON CORS endpoint, which is defined by the `src`
attribute. The URL's protocol must be HTTPS. The response must be a JSON object containing
an array property `items`, for example:
```json
{
"items": [
{
"title": "amp-carousel",
"url": "https://ampbyexample.com/components/amp-carousel"
},
...
]
}
```
The list content is rendered via an [amp-mustache template](https://www.ampproject.org/docs/reference/components/amp-mustache). The template can be specified either by id, or by using a nested element.
-->
<amp-list id="list1" width="auto" height="100" layout="fixed-height" src="list.example.json" class="m1" reset-on-refresh>
<template type="amp-mustache" id="amp-template-id">
<div><a href="{{url}}">{{title}}</a></div>
</template>
</amp-list>
<!-- ## Using a script to enclose the template. -->
<amp-list width="auto" height="100" layout="fixed-height" src="comments.example.json">
<script type="text/plain" template="amp-mustache">
<table>
<tr>
<td>Comment:</td>
<td>{{content}}</td>
</tr>
{{#replies}}
<tr>
<td>Reply:</td>
<td>{{content}}</td>
</tr>
{{/replies}}
</table>
</script>
</amp-list>
<!-- ## Using an existing template -->
<!--
The template can also be specified using an ID of an existing
`template` element. This example references the template from the
previous sample.
-->
<amp-list id="list2" width="auto" height="100" layout="fixed-height" src="list.example.json"
template="amp-template-id" class="m1">
</amp-list>
<!-- ## Limiting List Length -->
<!--
Use the `max-items` attribute to limit the number of list elements displayed
-->
<amp-list id="list3" width="auto" height="100" layout="fixed-height" src="list.example.json" max-items="3"
template="amp-template-id" class="m1" reset-on-refresh>
</amp-list>
<!-- ## Single Entry list -->
<!--
If the `amp-list` content requires more space than available, the AMP runtime will display the overflow element (if specified).
-->
<amp-list id="list4" width="auto" height="100" layout="fixed-height" src="list-single.example.json" single-item items="."
template="amp-template-id" class="m1">
</amp-list>
<!-- ## Handling List Overflow -->
<!--
If the `amp-list` content requires more space than available, the AMP runtime will display the overflow element (if specified).
-->
<amp-list id="list5" width="auto" height="48" layout="fixed-height" src="list.example.json" template="amp-template-id" class="m1" reset-on-refresh>
<div overflow role="button" aria-label="Show more" class="list-overflow ampstart-btn caps">
Show more
</div>
</amp-list>
<!-- ## Handling Paging -->
<!--
If the `amp-list` multiple pages ... .
-->
<amp-list width="auto" height="200" layout="fixed-height" src="list.example.json" template="amp-template-id" class="m1" load-more="auto" load-more-bookmark="next">
<div overflow role="button" aria-label="Show more" class="list-overflow ampstart-btn caps">
Show more
</div>
</amp-list>
</body>
</html>