Skip to content

Commit 35b73ee

Browse files
JoernTJoernT
committed
some more demos
1 parent 075779b commit 35b73ee

File tree

6 files changed

+213
-194
lines changed

6 files changed

+213
-194
lines changed

‎demo/countries.html

-115
This file was deleted.

‎demo/revalidate.html

+46-53
Original file line numberDiff line numberDiff line change
@@ -8,88 +8,81 @@
88

99
<script src="../../assets/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
1010

11+
<script type="module">
12+
import '@polymer/iron-demo-helpers/demo-snippet.js';
13+
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
14+
</script>
15+
16+
1117
<link href="../resources/vars.css" rel="stylesheet">
18+
<link href="../resources/demo.css" rel="stylesheet">
1219
<style>
1320
.dynamic {
1421
background: #76ff03;
1522
}
1623

17-
xf-input{
24+
xf-input {
1825
display: block;
19-
padding:10px 0;
26+
padding: 10px 0;
2027
}
28+
2129
xf-input[required]:after {
2230
content: "*";
2331
color: red;
2432
}
2533

26-
xf-output{
34+
xf-output {
2735
margin-bottom: 20px;
2836
}
2937
</style>
3038
</head>
3139
<body unresolved="unresolved">
3240

41+
<h1>Revalidation and Alerts</h1>
3342

34-
<xf-form>
35-
<!-- <xf-message event="refresh-done">refresh has been done</xf-message>-->
36-
37-
<xf-model id="model1">
38-
<xf-instance>
39-
<data>
40-
<a>A</a>
41-
<b>B</b>
42-
<c>C</c>
43-
</data>
44-
</xf-instance>
45-
46-
47-
<xf-bind ref="a" constraint="string-length(.) = 1"></xf-bind>
48-
<xf-bind ref="b" constraint="string-length(.) = 1" alert="string must be exactly one character long"></xf-bind>
49-
<xf-bind ref="c" constraint="string-length(.) = 1">
50-
<xf-alert><b>string must be exactly 1 character long</b></xf-alert>
51-
</xf-bind>
52-
<!--
53-
<xf-bind ref="c" required=".=C" relevant="depends(../b) = 'B'"></xf-bind>
54-
-->
55-
56-
57-
</xf-model>
58-
<xf-group collapse="true">
59-
60-
61-
<h1 class="{class}">
62-
Revalidation</h1>
43+
<demo-snippet>
44+
<template>
6345

64-
<xf-output id="output" ref="a">
65-
<xf-label>a-label</xf-label>
66-
<xf-alert>Constraint <b>not</b> valid</xf-alert>
67-
<xf-hint>must be one character long</xf-hint>
68-
</xf-output>
46+
<xf-form>
6947

70-
<!--
71-
<xf-output id="output" ref="b">x
72-
<xf-label>b-label</xf-label>
73-
</xf-output>
74-
<xf-output id="output" ref="c">
75-
<xf-label>c-label</xf-label>
76-
</xf-output>
77-
-->
48+
<xf-model id="model1">
49+
<xf-instance>
50+
<data>
51+
<a>A</a>
52+
<b>B</b>
53+
<c>C</c>
54+
</data>
55+
</xf-instance>
7856

79-
<xf-input label="A-label" ref="a">
80-
<xf-alert>Constraint not valid</xf-alert>
81-
<xf-hint>must be one character long</xf-hint>
82-
</xf-input>
8357

58+
<xf-bind ref="a" constraint="string-length(.) = 1"></xf-bind>
59+
<xf-bind ref="b" constraint="string-length(.) = 1"
60+
alert="string must be exactly one character long"></xf-bind>
61+
<xf-bind ref="c" constraint="string-length(.) = 1">
62+
<xf-alert><b>string must be exactly 1 character long</b></xf-alert>
63+
</xf-bind>
64+
</xf-model>
65+
<xf-group collapse="true">
8466

85-
<xf-input label="B-label" ref="b"></xf-input>
67+
<xf-output id="output" ref="a">
68+
<xf-label>a-label</xf-label>
69+
<xf-alert>Constraint <b>not</b> valid</xf-alert>
70+
<xf-hint>must be one character long</xf-hint>
71+
</xf-output>
8672

87-
<xf-input label="C" ref="c"></xf-input>
73+
<xf-input label="A-label" ref="a">
74+
<xf-alert>Constraint not valid</xf-alert>
75+
<xf-hint>must be one character long</xf-hint>
76+
</xf-input>
8877

78+
<xf-input label="B-label" ref="b"></xf-input>
8979

90-
</xf-group>
91-
</xf-form>
80+
<xf-input label="C" ref="c"></xf-input>
9281

82+
</xf-group>
83+
</xf-form>
84+
</template>
85+
</demo-snippet>
9386
<script type="module" src="../index.js"></script>
9487

9588
</body>

‎demo/selects.html

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" name="viewport"/>
6+
7+
<title>Country selector</title>
8+
9+
<script src="../../assets/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
10+
<script type="module">
11+
import '@polymer/iron-demo-helpers/demo-snippet.js';
12+
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
13+
</script>
14+
15+
<link href="../resources/vars.css" rel="stylesheet">
16+
<link href="../resources/demo.css" rel="stylesheet">
17+
18+
<style>
19+
body {
20+
font-size: 18px;
21+
}
22+
23+
xf-instance {
24+
display: none;
25+
}
26+
27+
xf-bound {
28+
display: table-row;
29+
30+
}
31+
32+
label {
33+
display: table-cell;
34+
padding-right: 10px;
35+
vertical-align: top;
36+
}
37+
38+
section {
39+
padding-bottom: 50px;
40+
}
41+
42+
xf-setvalue, xf-message {
43+
display: none;
44+
}
45+
46+
.grid {
47+
display: grid;
48+
grid-template-columns: 50% 50%;
49+
}
50+
51+
xf-form {
52+
max-width: 600px;
53+
}
54+
55+
xf-output {
56+
font-weight: bold;
57+
}
58+
</style>
59+
</head>
60+
<body unresolved="unresolved">
61+
62+
63+
<h1>Selects</h1>
64+
<demo-snippet>
65+
<template>
66+
67+
<xf-form>
68+
<xf-model id="model1">
69+
<xf-instance>
70+
<data>
71+
<selected></selected>
72+
<continent></continent>
73+
</data>
74+
</xf-instance>
75+
76+
<xf-instance id="countries" src="countries.xml"></xf-instance>
77+
78+
</xf-model>
79+
<xf-group>
80+
81+
<h2>one depends the other</h2>
82+
<p></p>
83+
84+
<div class="grid">
85+
<div class="wrapit">
86+
<xf-bound ref="continent" update-event="change">
87+
<label slot="label">Continent</label>
88+
<select>
89+
<option value=""></option>
90+
<option value="asia">Asia</option>
91+
<option value="africa">Africa</option>
92+
<option value="antarctica">Antarctica</option>
93+
<option value="australasia">Australia</option>
94+
<option value="europe">Europe</option>
95+
<option value="north america">North America</option>
96+
<option value="central america">Central America</option>
97+
<option value="south america">South America</option>
98+
</select>
99+
</xf-bound>
100+
<br>
101+
Selected Continent:
102+
<xf-output ref="continent"></xf-output>
103+
</div>
104+
105+
<div class="wrapit">
106+
107+
<xf-bound ref="selected" update-event="change">
108+
<label slot="label">Country</label>
109+
<select ref="instance('countries')//country[@continent = instance('default')/continent]">
110+
<template>
111+
<option value="{@code}">{.}</option>
112+
</template>
113+
</select>
114+
</xf-bound>
115+
<br>
116+
Country code is:
117+
<xf-output ref="selected"></xf-output>
118+
</div>
119+
</div>
120+
121+
122+
</xf-group>
123+
</xf-form>
124+
</template>
125+
</demo-snippet>
126+
<script type="module" src="../index.js"></script>
127+
128+
</body>
129+
</html>

0 commit comments

Comments
 (0)