forked from ampproject/amphtml
-
Notifications
You must be signed in to change notification settings - Fork 1
/
bind.amp.html
53 lines (47 loc) · 3 KB
/
bind.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
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>amp-bind</title>
<link rel="canonical" href="amps.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet" type="text/css">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<style amp-custom>
.redBackground {
background-color: red;
}
</style>
</head>
<body>
<amp-state id="myState">
<script type="application/json">
{
"myStateKey1": "myStateValue1"
}
</script>
</amp-state>
<button onclick="AMP.toggleExperiment('amp-bind');window.location.href=window.location.href;">Toggle Experiment</button>
<p [text]="foo">After clicking the button below, this will read 'foo'<p>
<p id="foo" [text]="foo + 'bar'">And this will read 'foobar'<p>
<p [text]="myState.myStateKey1">This will read 'myStateValue1'<p>
<button [disabled]="isButtonDisabled">This button will be disabled</button>
<p [class]="textClass">This text will have have a red background color</p>
<amp-img src="https://ampbyexample.com/img/Border_Collie.jpg" [src]="imgSrc" width=100 [width]="imgSize" height=100 [height]="imgSize" alt="asdf" [alt]="imgAlt"></amp-img>
<p>The image above will increase in size and change its src</p>
<!--
<amp-video src="https://ampbyexample.com/video/tokyo.mp4" [src]="videoSrc" width=480 height=270 controls></amp-video>
-->
<hr>
<button on="tap:AMP.setState(foo='foo', isButtonDisabled=true, textClass='redBackground', imgSrc='https://ampbyexample.com/img/Shetland_Sheepdog.jpg', imgSize=200, imgAlt='Sheepdog', videoSrc='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4')">Click me</button>
<h2>XHR</h2>
<p [text]="myState.bindXhrResult">This text will be updated with XHR results.</p>
<form method="GET" action="/bind/form/get" action-xhr="/bind/form/get" target="_blank"
on="submit-success:myState">
<input type="submit" value="Submit">
</form>
</body>
</html>