-
Notifications
You must be signed in to change notification settings - Fork 0
/
templateUsage.js
202 lines (172 loc) · 6.92 KB
/
templateUsage.js
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
import { html } from 'lit-html';
export default html`
<section class="documentation-section">
<h2>Usage</h2>
<p>
Radio buttons are used to select one of predefined options.
Radio buttons should be used when the user must see all available options. Consider using a dropdown
list if the options can be collapsed.
</p>
<p>
See
<a href="https://material.io/design/components/selection-controls.html#radio-buttons"
>Radio buttons</a
>
documentation in Material Design documentation for principles and
anatomy of radio buttons.
</p>
<h3>Installation</h3>
<code>npm install --save @anypoint-web-components/anypoint-radio-button</code>
<details>
<summary>In a HTML document</summary>
<code>
<pre>
${`<html>
<head>
<script type="module">
import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-button.js';
import '@anypoint-web-components/anypoint-radio-button/anypoint-radio-group.js';
</script>
</head>
<body>
<anypoint-radio-group>
<anypoint-radio-button name="fruit">Apple</anypoint-radio-button>
<anypoint-radio-button name="fruit">Banana</anypoint-radio-button>
<anypoint-radio-button name="fruit">Orange</anypoint-radio-button>
</anypoint-radio-group>
</body>
</html>`}
</pre>
</code>
</details>
<h3>Radio group</h3>
<p>
Radio button by itself does not provide much of useful functionality as single
element cannot know anything about other radio buttons in the document.<br/>
To fully support radio buttons use <code>anypoint-radio-group</code> with combination
with radio buttons.
</p>
<p>
Radio group allows to manage selection of a button and keeps single button selected.
It also provides accessibility support for screen readers and keyboard oprtations.
</p>
<p>
Note, unlike native radio inputs, radio group element does not check for name
of the button when managing selection. All buttons inside the group element
are considered single group.
</p>
<h3>Selection</h3>
<p>
The group element works best with <code>anypoint-radio-button</code> but it will
work with any element that has <code>role=radio</code>, including native radio input.
</p>
<p>
The group element provides common interface for anypoint elements that manages selection.
This means that <code>selected</code>, <code>selectedItem</code>, and <code>attrforselected</code>
is supported.
</p>
<h4>Selectable elements</h4>
<p>
By default every child element that has <code>role=radio</code> or is <code>input[type=radio]</code>
is considered a selectable element. This can be changed by setting <code>selectable</code> property.
However, for accessibility, this behavior should not be changed.
</p>
<label class="block-label" id="label1">Select a fruit:</label>
<anypoint-radio-group aria-labelledby="label1">
<anypoint-radio-button name="fruit">Apple</anypoint-radio-button>
<anypoint-radio-button name="fruit">Banana</anypoint-radio-button>
<anypoint-radio-button name="fruit">Orange</anypoint-radio-button>
<input type="radio" name="fruit" id="nativeInput"/>
<label for="nativeInput">I am native</label>
</anypoint-radio-group>
<details>
<summary>Code example</summary>
<code>
<pre>
${`<label id="label1">Select a fruit:</label>
<anypoint-radio-group aria-labelledby="label1">
<anypoint-radio-button name="fruit">Apple</anypoint-radio-button>
<anypoint-radio-button name="fruit">Banana</anypoint-radio-button>
<anypoint-radio-button name="fruit">Orange</anypoint-radio-button>
<input type="radio" name="fruit" id="nativeInput"/>
<label for="nativeInput">I am native</label>
</anypoint-radio-group>`}
</pre>
</code>
</details>
<h4>Selection via checkded attribute</h4>
<p>
Like native radio button, set <code>checked</code> attribute to select
a checkbox.
</p>
<p>
Only last checked radio button in the children list keeps the selection
</p>
<label class="block-label" id="label2">Select a fruit:</label>
<anypoint-radio-group aria-labelledby="label2">
<anypoint-radio-button name="fruit" checked>Apple</anypoint-radio-button>
<anypoint-radio-button name="fruit">Banana</anypoint-radio-button>
<anypoint-radio-button name="fruit" checked>Orange</anypoint-radio-button>
</anypoint-radio-group>
<details>
<summary>Code example</summary>
<code>
<pre>
${`<label id="label2">Select a fruit:</label>
<anypoint-radio-group aria-labelledby="label2">
<anypoint-radio-button name="fruit" checked>Apple</anypoint-radio-button>
<anypoint-radio-button name="fruit">Banana</anypoint-radio-button>
<anypoint-radio-button name="fruit" checked>Orange</anypoint-radio-button>
</anypoint-radio-group>`}
</pre>
</code>
</details>
<h4>Selection via index</h4>
<p>
To select a radio button set <code>selected</code> value to the index of the selectable element.
</p>
<label class="block-label" id="label3">Select a fruit:</label>
<anypoint-radio-group aria-labelledby="label3" selected="1">
<anypoint-radio-button name="fruit">Apple</anypoint-radio-button>
<anypoint-radio-button name="fruit">Banana</anypoint-radio-button>
<anypoint-radio-button name="fruit">Orange</anypoint-radio-button>
</anypoint-radio-group>
<details>
<summary>Code example</summary>
<code>
<pre>
${`<label id="label3">Select a fruit:</label>
<anypoint-radio-group aria-labelledby="label3" selected="1">
<anypoint-radio-button name="fruit">Apple</anypoint-radio-button>
<anypoint-radio-button name="fruit">Banana</anypoint-radio-button>
<anypoint-radio-button name="fruit">Orange</anypoint-radio-button>
</anypoint-radio-group>`}
</pre>
</code>
</details>
<h4>Selection via attrforselected</h4>
<p>
Alternatively a selection can be made by using <code>attrforselected</code>
attribute which points to a attribute set on a children with selection value.
</p>
<label class="block-label" id="label4">Select a fruit:</label>
<anypoint-radio-group aria-labelledby="label4" selected="banana" attrforselected="label">
<anypoint-radio-button name="fruit" label="apple">Apple</anypoint-radio-button>
<anypoint-radio-button name="fruit" label="banana">Banana</anypoint-radio-button>
<anypoint-radio-button name="fruit" label="orange">Orange</anypoint-radio-button>
</anypoint-radio-group>
<details>
<summary>Code example</summary>
<code>
<pre>
${`<label id="label4">Select a fruit:</label>
<anypoint-radio-group aria-labelledby="label4" selected="banana" attrforselected="label">
<anypoint-radio-button name="fruit" label="apple">Apple</anypoint-radio-button>
<anypoint-radio-button name="fruit" label="banana">Banana</anypoint-radio-button>
<anypoint-radio-button name="fruit" label="orange">Orange</anypoint-radio-button>
</anypoint-radio-group>`}
</pre>
</code>
</details>
</section>
`;