@vandeurenglenn/lite-elements 0.3.49 → 0.3.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/exports/banner.js +37 -37
- package/exports/bar/top-app-bar.d.ts +1 -1
- package/exports/bundle/banner.js +2 -2
- package/exports/bundle/button.js +6 -1
- package/exports/bundle/card.js +1 -1
- package/exports/bundle/code.js +1 -1
- package/exports/bundle/{column-B0bUzxkF.js → column-dsIMZ5XT.js} +1 -1
- package/exports/bundle/demo-elements.js +1 -1
- package/exports/bundle/demo-icons.js +1 -1
- package/exports/bundle/demo-shell.js +1 -1
- package/exports/bundle/demo.js +1 -1
- package/exports/bundle/dialog.js +1 -1
- package/exports/bundle/divider.js +1 -1
- package/exports/bundle/drawer-button.js +1 -1
- package/exports/bundle/drawer-item.js +1 -1
- package/exports/bundle/drawer-layout.js +1 -1
- package/exports/bundle/drawer.js +2 -2
- package/exports/bundle/dropdown-menu.js +1 -1
- package/exports/bundle/dropdown.js +1 -1
- package/exports/bundle/elements.js +1 -1
- package/exports/bundle/elevation.js +1 -1
- package/exports/bundle/fab.js +2 -2
- package/exports/bundle/icon-button.js +1 -1
- package/exports/bundle/icon-set.js +1 -1
- package/exports/bundle/icon.js +1 -1
- package/exports/bundle/index.html +590 -590
- package/exports/bundle/input.js +2 -2
- package/exports/bundle/list-item.js +1 -1
- package/exports/bundle/menu.js +1 -1
- package/exports/bundle/minute-field.js +1 -1
- package/exports/bundle/notification.js +1 -1
- package/exports/bundle/notifications.js +1 -1
- package/exports/bundle/pages.js +1 -1
- package/exports/bundle/pane.js +3 -3
- package/exports/bundle/property-C1gA9hig.js +23 -0
- package/exports/bundle/property-DL093_VN.js +11 -0
- package/exports/bundle/rail.js +1 -1
- package/exports/bundle/root.js +2 -2
- package/exports/bundle/row-CW5FbTZ_.js +28 -0
- package/exports/bundle/section.js +1 -1
- package/exports/bundle/section2.js +1 -1
- package/exports/bundle/select-mixin.js +1 -1
- package/exports/bundle/selector-mixin.js +1 -1
- package/exports/bundle/selector.js +1 -1
- package/exports/bundle/summary-mirror.js +1 -1
- package/exports/bundle/summary.js +2 -2
- package/exports/bundle/supporting-pane.js +1 -1
- package/exports/bundle/tab.js +2 -2
- package/exports/bundle/tabs.js +1 -1
- package/exports/bundle/text-field.js +1 -1
- package/exports/bundle/theme.js +1 -1
- package/exports/bundle/themes/default/colors.module.css +180 -180
- package/exports/bundle/themes/default/missing/motion.css +3 -3
- package/exports/bundle/themes/default/missing/shape.css +12 -12
- package/exports/bundle/themes/default/missing/theme.dark.css +4 -4
- package/exports/bundle/themes/default/missing/theme.light.css +4 -4
- package/exports/bundle/themes/default/missing/tokens.css +8 -8
- package/exports/bundle/themes/default/theme.css +10 -10
- package/exports/bundle/themes/default/theme.dark.css +33 -33
- package/exports/bundle/themes/default/theme.light.css +33 -33
- package/exports/bundle/themes/default/tokens.css +256 -256
- package/exports/bundle/themes/default/typography.module.css +150 -150
- package/exports/bundle/time-picker.js +1 -1
- package/exports/bundle/toggle-button.js +1 -1
- package/exports/bundle/toggle.js +1 -1
- package/exports/bundle/top-app-bar.js +63 -2
- package/exports/bundle/typography.js +1 -1
- package/exports/bundle/upload-file.js +1 -1
- package/exports/bundle/upload-image.js +62 -55
- package/exports/button.js +149 -144
- package/exports/card.js +140 -140
- package/exports/code.js +35 -35
- package/exports/demo-elements.js +1 -1
- package/exports/demo-icons.js +16 -16
- package/exports/demo-shell.js +540 -540
- package/exports/demo.js +457 -457
- package/exports/dialog.js +149 -149
- package/exports/divider.js +22 -22
- package/exports/drawer-button.js +14 -14
- package/exports/drawer-item.js +39 -39
- package/exports/drawer-layout.js +96 -96
- package/exports/drawer.js +8 -8
- package/exports/dropdown-menu.js +59 -59
- package/exports/dropdown.js +26 -26
- package/exports/elements.js +1 -1
- package/exports/elevation.js +51 -51
- package/exports/fab.js +146 -146
- package/exports/icon-button.js +13 -13
- package/exports/icon-set.js +5 -5
- package/exports/icon.js +16 -16
- package/exports/input.js +6 -6
- package/exports/list-item.js +43 -43
- package/exports/menu.js +13 -13
- package/exports/minute-field.js +5 -5
- package/exports/mixins/scroll-mixin.d.ts +1 -1
- package/exports/notification.js +35 -35
- package/exports/notifications.js +66 -66
- package/exports/pages.js +42 -42
- package/exports/pane.js +19 -19
- package/exports/rail.js +58 -58
- package/exports/root.js +8 -8
- package/exports/section/section.d.ts +2 -2
- package/exports/section.js +11 -11
- package/exports/section2.js +25 -25
- package/exports/selector.js +31 -31
- package/exports/summary-mirror.js +20 -20
- package/exports/summary.js +25 -25
- package/exports/supporting-pane.js +47 -47
- package/exports/tab.js +22 -22
- package/exports/tabs.js +51 -51
- package/exports/text-field.js +10 -10
- package/exports/theme.js +9 -9
- package/exports/themes/default/colors.module.css +180 -180
- package/exports/themes/default/missing/motion.css +3 -3
- package/exports/themes/default/missing/shape.css +12 -12
- package/exports/themes/default/missing/theme.dark.css +4 -4
- package/exports/themes/default/missing/theme.light.css +4 -4
- package/exports/themes/default/missing/tokens.css +8 -8
- package/exports/themes/default/theme.css +10 -10
- package/exports/themes/default/theme.dark.css +33 -33
- package/exports/themes/default/theme.light.css +33 -33
- package/exports/themes/default/tokens.css +256 -256
- package/exports/themes/default/typography.module.css +150 -150
- package/exports/time-picker.js +21 -21
- package/exports/toggle-button.js +4 -4
- package/exports/toggle.js +5 -5
- package/exports/top-app-bar.js +21 -21
- package/exports/{tslib.es6-CFl_-KPR.js → tslib.es6-Cg9lAhfj.js} +1 -1
- package/exports/typography.js +156 -156
- package/exports/upload-file.js +9 -9
- package/exports/upload-image.js +201 -201
- package/package.json +20 -36
- package/exports/bundle/property-BYA8Sw2t.js +0 -11
- package/exports/bundle/property-C4lhirVQ.js +0 -23
- package/exports/bundle/row-DYDgQVDj.js +0 -28
- package/exports/bundle/simple-hash-router.js +0 -1
- package/exports/bundle/types2.js +0 -1
- package/exports/mixins/file-reader-mixin.d.ts +0 -341
- package/exports/router/types.d.ts +0 -45
- package/exports/simple-hash-router.js +0 -111
- package/exports/types2.js +0 -1
- package/exports/upload/upload-image.d.ts +0 -381
|
@@ -1,590 +1,590 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>Document</title>
|
|
8
|
-
<style>
|
|
9
|
-
html,
|
|
10
|
-
body {
|
|
11
|
-
inset: 0;
|
|
12
|
-
position: absolute;
|
|
13
|
-
margin: 0;
|
|
14
|
-
width: 100%;
|
|
15
|
-
color: var(--md-sys-color-on-background);
|
|
16
|
-
overflow: hidden;
|
|
17
|
-
}
|
|
18
|
-
custom-drawer-layout {
|
|
19
|
-
height: 100%;
|
|
20
|
-
width: 100%;
|
|
21
|
-
inset: 0;
|
|
22
|
-
|
|
23
|
-
background: var(--md-sys-color-background, #fff);
|
|
24
|
-
position: absolute;
|
|
25
|
-
display: flex;
|
|
26
|
-
}
|
|
27
|
-
.demo-container {
|
|
28
|
-
height: 100%;
|
|
29
|
-
width: 100%;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
flex-column {
|
|
33
|
-
width: 100%;
|
|
34
|
-
height: 100%;
|
|
35
|
-
overflow-y: auto;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.demo-container section {
|
|
39
|
-
align-items: center;
|
|
40
|
-
justify-content: center;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
[non-interactive] {
|
|
44
|
-
pointer-events: none;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
h4 {
|
|
48
|
-
margin: 0;
|
|
49
|
-
padding-top: 16px;
|
|
50
|
-
padding-bottom: 12px;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
custom-drawer custom-divider {
|
|
54
|
-
margin-top: 16px;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
flex-row:not([slot='top-app-bar-end']) {
|
|
58
|
-
width: 100%;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
flex-column {
|
|
62
|
-
display: flex;
|
|
63
|
-
flex-direction: column;
|
|
64
|
-
}
|
|
65
|
-
</style>
|
|
66
|
-
</head>
|
|
67
|
-
<body>
|
|
68
|
-
<custom-theme></custom-theme>
|
|
69
|
-
<demo-icons></demo-icons>
|
|
70
|
-
|
|
71
|
-
<!-- <custom-root> -->
|
|
72
|
-
<custom-drawer-layout class="demo-container" drawer-open>
|
|
73
|
-
<span slot="drawer-headline"> menu </span>
|
|
74
|
-
|
|
75
|
-
<flex-column slot="drawer-content">
|
|
76
|
-
<custom-selector attr-for-selected="route" default-selected="banner">
|
|
77
|
-
<custom-drawer-item route="banner">banner</custom-drawer-item>
|
|
78
|
-
<custom-drawer-item route="dialog">dialog</custom-drawer-item>
|
|
79
|
-
<custom-drawer-item route="divider">divider</custom-drawer-item>
|
|
80
|
-
<custom-drawer-item route="buttons">buttons</custom-drawer-item>
|
|
81
|
-
<custom-drawer-item route="cards">cards</custom-drawer-item>
|
|
82
|
-
<custom-drawer-item route="top-app-bar">top-app-bar</custom-drawer-item>
|
|
83
|
-
<custom-drawer-item route="typography">typography</custom-drawer-item>
|
|
84
|
-
<custom-drawer-item route="drawer">drawer</custom-drawer-item>
|
|
85
|
-
<custom-drawer-item route="pane">pane</custom-drawer-item>
|
|
86
|
-
<custom-drawer-item route="supporting-pane">supporting-pane</custom-drawer-item>
|
|
87
|
-
<custom-drawer-item route="tabs">tabs</custom-drawer-item>
|
|
88
|
-
<custom-drawer-item route="menu">menu</custom-drawer-item>
|
|
89
|
-
<custom-drawer-item route="dropdown-menu">dropdown-menu</custom-drawer-item>
|
|
90
|
-
<custom-drawer-item route="list-item">list-item</custom-drawer-item>
|
|
91
|
-
<custom-drawer-item route="toggle">toggle</custom-drawer-item>
|
|
92
|
-
<custom-drawer-item route="toggle-button">toggle-button</custom-drawer-item>
|
|
93
|
-
<custom-drawer-item route="time-picker">time-picker</custom-drawer-item>
|
|
94
|
-
</custom-selector>
|
|
95
|
-
</flex-column>
|
|
96
|
-
|
|
97
|
-
<span slot="top-app-bar-title">custom-elements</span>
|
|
98
|
-
|
|
99
|
-
<flex-row slot="top-app-bar-end">
|
|
100
|
-
<custom-theme-mode></custom-theme-mode>
|
|
101
|
-
<custom-button>
|
|
102
|
-
<custom-icon slot="icon">more_vert</custom-icon>
|
|
103
|
-
</custom-button>
|
|
104
|
-
</flex-row>
|
|
105
|
-
|
|
106
|
-
<flex-column>
|
|
107
|
-
<custom-pages attr-for-selected="route" default-selected="banner">
|
|
108
|
-
<demo-section route="banner">
|
|
109
|
-
<custom-banner>Banner</custom-banner>
|
|
110
|
-
</demo-section>
|
|
111
|
-
|
|
112
|
-
<demo-section route="divider">
|
|
113
|
-
<custom-divider></custom-divider>
|
|
114
|
-
<custom-divider inset></custom-divider>
|
|
115
|
-
<custom-divider middle-inset></custom-divider>
|
|
116
|
-
</demo-section>
|
|
117
|
-
|
|
118
|
-
<demo-section route="cards">
|
|
119
|
-
<custom-card type="filled">
|
|
120
|
-
<span slot="headline">filled</span>
|
|
121
|
-
<span slot="subline">subline</span>
|
|
122
|
-
<p slot="supportingText">
|
|
123
|
-
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
|
|
124
|
-
magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
|
|
125
|
-
facilis et quasi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi
|
|
126
|
-
eum aliquam enim, magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam
|
|
127
|
-
praesentium veritatis facilis et quasi?
|
|
128
|
-
</p>
|
|
129
|
-
<flex-row slot="actions">
|
|
130
|
-
<custom-button type="filled" label="YES"></custom-button>
|
|
131
|
-
</flex-row>
|
|
132
|
-
</custom-card>
|
|
133
|
-
|
|
134
|
-
<custom-card type="elevated">
|
|
135
|
-
<span slot="headline">elevated</span>
|
|
136
|
-
<span slot="subline">subline</span>
|
|
137
|
-
<p slot="supportingText">
|
|
138
|
-
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
|
|
139
|
-
magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
|
|
140
|
-
facilis et quasi?
|
|
141
|
-
</p>
|
|
142
|
-
<flex-row slot="actions">
|
|
143
|
-
<custom-button type="elevated" label="YES"></custom-button>
|
|
144
|
-
</flex-row>
|
|
145
|
-
</custom-card>
|
|
146
|
-
|
|
147
|
-
<custom-card type="outlined">
|
|
148
|
-
<span slot="headline">outlined</span>
|
|
149
|
-
<span slot="subline">subline</span>
|
|
150
|
-
<p slot="supportingText">
|
|
151
|
-
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
|
|
152
|
-
magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
|
|
153
|
-
facilis et quasi?
|
|
154
|
-
</p>
|
|
155
|
-
<flex-row slot="actions">
|
|
156
|
-
<custom-button type="outlined" label="YES"></custom-button>
|
|
157
|
-
</flex-row>
|
|
158
|
-
</custom-card>
|
|
159
|
-
|
|
160
|
-
<custom-card type="tertiary">
|
|
161
|
-
<img
|
|
162
|
-
loading="lazy"
|
|
163
|
-
slot="image"
|
|
164
|
-
src="https://lh3.googleusercontent.com/9NBw6U14z6f-EAnwPqfcX-mIkxNdpK0IXvwiun9w84JkMcZfBT0bfRqn7QWdBVqnCYC5hsDEnGhSjbaWcgi1HT_Q6pCioSRTgMFODqZdAXw=s0"
|
|
165
|
-
/>
|
|
166
|
-
<span slot="headline">tertiary</span>
|
|
167
|
-
<span slot="subline">subline</span>
|
|
168
|
-
|
|
169
|
-
<flex-row slot="actions">
|
|
170
|
-
<custom-button type="tertiary" label="YES"></custom-button>
|
|
171
|
-
</flex-row>
|
|
172
|
-
</custom-card>
|
|
173
|
-
</demo-section>
|
|
174
|
-
|
|
175
|
-
<demo-section route="buttons">
|
|
176
|
-
<custom-button type="text" label="text"></custom-button>
|
|
177
|
-
|
|
178
|
-
<custom-button type="text" label="with icon">
|
|
179
|
-
<span slot="icon">+</span>
|
|
180
|
-
</custom-button>
|
|
181
|
-
|
|
182
|
-
<custom-button type="filled" label="filled"></custom-button>
|
|
183
|
-
|
|
184
|
-
<custom-button type="filled" label="with icon">
|
|
185
|
-
<span slot="icon">+</span>
|
|
186
|
-
</custom-button>
|
|
187
|
-
|
|
188
|
-
<custom-button type="elevated" label="elevated"></custom-button>
|
|
189
|
-
|
|
190
|
-
<custom-button type="elevated" label="with icon">
|
|
191
|
-
<span slot="icon">+</span>
|
|
192
|
-
</custom-button>
|
|
193
|
-
|
|
194
|
-
<custom-button type="outlined" label="outlined"></custom-button>
|
|
195
|
-
|
|
196
|
-
<custom-button type="outlined" label="with icon">
|
|
197
|
-
<span slot="icon">+</span>
|
|
198
|
-
</custom-button>
|
|
199
|
-
|
|
200
|
-
<custom-button type="tonal" label="tonal"></custom-button>
|
|
201
|
-
|
|
202
|
-
<custom-button type="tonal" label="with icon">
|
|
203
|
-
<span slot="icon">+</span>
|
|
204
|
-
</custom-button>
|
|
205
|
-
|
|
206
|
-
<custom-button type="tertiary" label="tertiary"></custom-button>
|
|
207
|
-
|
|
208
|
-
<custom-button type="tertiary" label="with icon">
|
|
209
|
-
<span slot="icon">+</span>
|
|
210
|
-
</custom-button>
|
|
211
|
-
</demo-section>
|
|
212
|
-
|
|
213
|
-
<demo-section route="top-app-bar">
|
|
214
|
-
<custom-top-app-bar>
|
|
215
|
-
<span slot="title">title</span>
|
|
216
|
-
</custom-top-app-bar>
|
|
217
|
-
|
|
218
|
-
<custom-top-app-bar type="small">
|
|
219
|
-
<custom-icon-button slot="start" icon="menu"></custom-icon-button>
|
|
220
|
-
<span slot="title">title</span>
|
|
221
|
-
</custom-top-app-bar>
|
|
222
|
-
|
|
223
|
-
<custom-top-app-bar type="medium">
|
|
224
|
-
<custom-icon-button slot="start" icon="menu"></custom-icon-button>
|
|
225
|
-
<span slot="title">title</span>
|
|
226
|
-
</custom-top-app-bar>
|
|
227
|
-
|
|
228
|
-
<custom-top-app-bar type="large">
|
|
229
|
-
<custom-icon-button slot="start" icon="menu"></custom-icon-button>
|
|
230
|
-
<span slot="title">title</span>
|
|
231
|
-
</custom-top-app-bar>
|
|
232
|
-
</demo-section>
|
|
233
|
-
|
|
234
|
-
<demo-section route="typography">
|
|
235
|
-
<custom-typography>
|
|
236
|
-
<span>title</span>
|
|
237
|
-
</custom-typography>
|
|
238
|
-
|
|
239
|
-
<custom-typography size="medium">
|
|
240
|
-
<span>title medium</span>
|
|
241
|
-
</custom-typography>
|
|
242
|
-
|
|
243
|
-
<custom-typography size="small">
|
|
244
|
-
<span>title small</span>
|
|
245
|
-
</custom-typography>
|
|
246
|
-
|
|
247
|
-
<custom-typography type="body">
|
|
248
|
-
<span>body</span>
|
|
249
|
-
</custom-typography>
|
|
250
|
-
|
|
251
|
-
<custom-typography type="body" size="medium">
|
|
252
|
-
<span>body medium</span>
|
|
253
|
-
</custom-typography>
|
|
254
|
-
|
|
255
|
-
<custom-typography type="body" size="small">
|
|
256
|
-
<span>body small</span>
|
|
257
|
-
</custom-typography>
|
|
258
|
-
|
|
259
|
-
<custom-typography type="label">
|
|
260
|
-
<span>label</span>
|
|
261
|
-
</custom-typography>
|
|
262
|
-
|
|
263
|
-
<custom-typography type="label" size="medium">
|
|
264
|
-
<span>label medium</span>
|
|
265
|
-
</custom-typography>
|
|
266
|
-
|
|
267
|
-
<custom-typography type="label" size="small">
|
|
268
|
-
<span>label small</span>
|
|
269
|
-
</custom-typography>
|
|
270
|
-
|
|
271
|
-
<custom-typography type="headline">
|
|
272
|
-
<span>headline</span>
|
|
273
|
-
</custom-typography>
|
|
274
|
-
|
|
275
|
-
<custom-typography type="headline" size="medium">
|
|
276
|
-
<span>headline medium</span>
|
|
277
|
-
</custom-typography>
|
|
278
|
-
|
|
279
|
-
<custom-typography type="headline" size="small">
|
|
280
|
-
<span>headline small</span>
|
|
281
|
-
</custom-typography>
|
|
282
|
-
|
|
283
|
-
<custom-typography type="display">
|
|
284
|
-
<span>display</span>
|
|
285
|
-
</custom-typography>
|
|
286
|
-
|
|
287
|
-
<custom-typography type="display" size="medium">
|
|
288
|
-
<span>display medium</span>
|
|
289
|
-
</custom-typography>
|
|
290
|
-
|
|
291
|
-
<custom-typography type="display" size="small">
|
|
292
|
-
<span>display small</span>
|
|
293
|
-
</custom-typography>
|
|
294
|
-
</demo-section>
|
|
295
|
-
|
|
296
|
-
<demo-section route="drawer">
|
|
297
|
-
<custom-drawer open type="modal" id="demo-drawer">
|
|
298
|
-
<span slot="content">
|
|
299
|
-
<custom-drawer-item>home</custom-drawer-item>
|
|
300
|
-
<custom-drawer-item>about</custom-drawer-item>
|
|
301
|
-
</span>
|
|
302
|
-
</custom-drawer>
|
|
303
|
-
|
|
304
|
-
<custom-drawer-button id="demo-drawer"></custom-drawer-button>
|
|
305
|
-
|
|
306
|
-
<custom-selector>
|
|
307
|
-
<custom-drawer-item id="demo-drawer">drawer-item</custom-drawer-item>
|
|
308
|
-
</custom-selector>
|
|
309
|
-
</demo-section>
|
|
310
|
-
|
|
311
|
-
<demo-section route="pane">
|
|
312
|
-
<custom-pane open type="modal" id="demo-pane">
|
|
313
|
-
<span slot="content">
|
|
314
|
-
<custom-drawer-item>home</custom-drawer-item>
|
|
315
|
-
<custom-drawer-item>about</custom-drawer-item>
|
|
316
|
-
</span>
|
|
317
|
-
</custom-pane>
|
|
318
|
-
|
|
319
|
-
<custom-pane open type="modal" id="demo-pane" right>
|
|
320
|
-
<span slot="content">
|
|
321
|
-
<custom-drawer-item>home</custom-drawer-item>
|
|
322
|
-
<custom-drawer-item>about</custom-drawer-item>
|
|
323
|
-
</span>
|
|
324
|
-
</custom-pane>
|
|
325
|
-
</demo-section>
|
|
326
|
-
<demo-section route="supporting-pane">
|
|
327
|
-
<custom-supporting-pane id="demo-supporting-pane">
|
|
328
|
-
<flex-column>
|
|
329
|
-
<p>
|
|
330
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolor minima. Ab nobis quae neque
|
|
331
|
-
dolor. Asperiores itaque incidunt quae quis est explicabo dolorem, laudantium repellat earum nisi.
|
|
332
|
-
Quae, cum.
|
|
333
|
-
</p>
|
|
334
|
-
</flex-column>
|
|
335
|
-
<flex-column slot="supporting"></flex-column>
|
|
336
|
-
</custom-supporting-pane>
|
|
337
|
-
<custom-drawer-button id="demo-supporting-pane"></custom-drawer-button>
|
|
338
|
-
<custom-supporting-pane open left>
|
|
339
|
-
<flex-column>
|
|
340
|
-
<p>
|
|
341
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolor minima. Ab nobis quae neque
|
|
342
|
-
dolor. Asperiores itaque incidunt quae quis est explicabo dolorem, laudantium repellat earum nisi.
|
|
343
|
-
Quae, cum.
|
|
344
|
-
</p>
|
|
345
|
-
</flex-column>
|
|
346
|
-
<flex-column slot="supporting"></flex-column>
|
|
347
|
-
</custom-supporting-pane>
|
|
348
|
-
</demo-section>
|
|
349
|
-
|
|
350
|
-
<demo-section route="tabs">
|
|
351
|
-
<custom-tabs>
|
|
352
|
-
<custom-tab>home</custom-tab>
|
|
353
|
-
<custom-tab>about</custom-tab>
|
|
354
|
-
</custom-tabs>
|
|
355
|
-
|
|
356
|
-
<custom-tabs round>
|
|
357
|
-
<custom-tab>
|
|
358
|
-
<custom-icon>home</custom-icon>
|
|
359
|
-
home
|
|
360
|
-
</custom-tab>
|
|
361
|
-
<custom-tab>about</custom-tab>
|
|
362
|
-
</custom-tabs>
|
|
363
|
-
</demo-section>
|
|
364
|
-
|
|
365
|
-
<demo-section route="dialog">
|
|
366
|
-
<flex-container>
|
|
367
|
-
<custom-button class="fullscreen-dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
|
|
368
|
-
<custom-dialog fullscreen>
|
|
369
|
-
<span slot="title">title</span>
|
|
370
|
-
<p>
|
|
371
|
-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
372
|
-
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
373
|
-
dolorem corporis.
|
|
374
|
-
</p>
|
|
375
|
-
<p>
|
|
376
|
-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
377
|
-
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
378
|
-
dolorem corporis.
|
|
379
|
-
</p>
|
|
380
|
-
<p>
|
|
381
|
-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
382
|
-
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
383
|
-
dolorem corporis.
|
|
384
|
-
</p>
|
|
385
|
-
<p>
|
|
386
|
-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
387
|
-
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
388
|
-
dolorem corporis.
|
|
389
|
-
</p>
|
|
390
|
-
<p>
|
|
391
|
-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
392
|
-
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
393
|
-
dolorem corporis.
|
|
394
|
-
</p>
|
|
395
|
-
<p>
|
|
396
|
-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
397
|
-
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
398
|
-
dolorem corporis.
|
|
399
|
-
</p>
|
|
400
|
-
<flex-row slot="actions">
|
|
401
|
-
<custom-button label="agree" action="agree">agree</custom-button>
|
|
402
|
-
</flex-row>
|
|
403
|
-
</custom-dialog>
|
|
404
|
-
|
|
405
|
-
<script>
|
|
406
|
-
const demoSection = document.querySelector('demo-section[route="dialog"]')
|
|
407
|
-
const fullscreenDialog = demoSection.querySelector('custom-dialog[fullscreen]')
|
|
408
|
-
demoSection.querySelector('.fullscreen-dialog').addEventListener('click', () => {
|
|
409
|
-
fullscreenDialog.open = !fullscreenDialog.open
|
|
410
|
-
})
|
|
411
|
-
</script>
|
|
412
|
-
</flex-container>
|
|
413
|
-
|
|
414
|
-
<flex-container>
|
|
415
|
-
<custom-button class="dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
|
|
416
|
-
<custom-dialog class="dialog">
|
|
417
|
-
<span slot="title">title</span>
|
|
418
|
-
<p>
|
|
419
|
-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
420
|
-
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
421
|
-
dolorem corporis.
|
|
422
|
-
</p>
|
|
423
|
-
|
|
424
|
-
<flex-row slot="actions">
|
|
425
|
-
<custom-button label="agree" action="agree">agree</custom-button>
|
|
426
|
-
</flex-row>
|
|
427
|
-
</custom-dialog>
|
|
428
|
-
|
|
429
|
-
<script>
|
|
430
|
-
const dialog = demoSection.querySelector('custom-dialog.dialog')
|
|
431
|
-
demoSection.querySelector('.dialog').addEventListener('click', () => {
|
|
432
|
-
dialog.open = !dialog.open
|
|
433
|
-
})
|
|
434
|
-
</script>
|
|
435
|
-
</flex-container>
|
|
436
|
-
</demo-section>
|
|
437
|
-
|
|
438
|
-
<demo-section route="time-picker">
|
|
439
|
-
<custom-time-picker></custom-time-picker>
|
|
440
|
-
</demo-section>
|
|
441
|
-
|
|
442
|
-
<demo-section route="menu">
|
|
443
|
-
<custom-menu>
|
|
444
|
-
<custom-list-item type="menu">
|
|
445
|
-
<custom-icon slot="start">info</custom-icon>
|
|
446
|
-
item 1
|
|
447
|
-
</custom-list-item>
|
|
448
|
-
|
|
449
|
-
<custom-list-item type="menu">
|
|
450
|
-
<custom-icon slot="start">info</custom-icon>
|
|
451
|
-
item 2
|
|
452
|
-
</custom-list-item>
|
|
453
|
-
|
|
454
|
-
<custom-list-item type="menu">
|
|
455
|
-
<custom-icon slot="start">info</custom-icon>
|
|
456
|
-
item 3
|
|
457
|
-
</custom-list-item>
|
|
458
|
-
</custom-menu>
|
|
459
|
-
</demo-section>
|
|
460
|
-
|
|
461
|
-
<demo-section route="dropdown-menu">
|
|
462
|
-
<custom-dropdown-menu>
|
|
463
|
-
<custom-list-item type="menu">
|
|
464
|
-
<custom-icon slot="start">info</custom-icon>
|
|
465
|
-
item 1
|
|
466
|
-
</custom-list-item>
|
|
467
|
-
|
|
468
|
-
<custom-list-item type="menu">
|
|
469
|
-
<custom-icon slot="start">info</custom-icon>
|
|
470
|
-
item 2
|
|
471
|
-
</custom-list-item>
|
|
472
|
-
|
|
473
|
-
<custom-list-item type="menu">
|
|
474
|
-
<custom-icon slot="start">info</custom-icon>
|
|
475
|
-
item 3
|
|
476
|
-
</custom-list-item>
|
|
477
|
-
</custom-dropdown-menu>
|
|
478
|
-
|
|
479
|
-
<flex-row>
|
|
480
|
-
<flex-it></flex-it>
|
|
481
|
-
<custom-dropdown-menu right>
|
|
482
|
-
<custom-list-item type="menu">
|
|
483
|
-
<custom-icon slot="start">info</custom-icon>
|
|
484
|
-
item 1
|
|
485
|
-
</custom-list-item>
|
|
486
|
-
|
|
487
|
-
<custom-list-item type="menu">
|
|
488
|
-
<custom-icon slot="start">info</custom-icon>
|
|
489
|
-
item 2
|
|
490
|
-
</custom-list-item>
|
|
491
|
-
|
|
492
|
-
<custom-list-item type="menu">
|
|
493
|
-
<custom-icon slot="start">info</custom-icon>
|
|
494
|
-
item 3
|
|
495
|
-
</custom-list-item>
|
|
496
|
-
</custom-dropdown-menu>
|
|
497
|
-
</flex-row>
|
|
498
|
-
|
|
499
|
-
<custom-dropdown-menu bottom>
|
|
500
|
-
<custom-list-item type="menu">
|
|
501
|
-
<custom-icon slot="start">info</custom-icon>
|
|
502
|
-
item 1
|
|
503
|
-
</custom-list-item>
|
|
504
|
-
|
|
505
|
-
<custom-list-item type="menu">
|
|
506
|
-
<custom-icon slot="start">info</custom-icon>
|
|
507
|
-
item 2
|
|
508
|
-
</custom-list-item>
|
|
509
|
-
|
|
510
|
-
<custom-list-item type="menu">
|
|
511
|
-
<custom-icon slot="start">info</custom-icon>
|
|
512
|
-
item 3
|
|
513
|
-
</custom-list-item>
|
|
514
|
-
</custom-dropdown-menu>
|
|
515
|
-
|
|
516
|
-
<flex-row>
|
|
517
|
-
<flex-it></flex-it>
|
|
518
|
-
<custom-dropdown-menu bottom right>
|
|
519
|
-
<custom-list-item type="menu">
|
|
520
|
-
<custom-icon slot="start">info</custom-icon>
|
|
521
|
-
item 1
|
|
522
|
-
</custom-list-item>
|
|
523
|
-
|
|
524
|
-
<custom-list-item type="menu">
|
|
525
|
-
<custom-icon slot="start">info</custom-icon>
|
|
526
|
-
item 2
|
|
527
|
-
</custom-list-item>
|
|
528
|
-
|
|
529
|
-
<custom-list-item type="menu">
|
|
530
|
-
<custom-icon slot="start">info</custom-icon>
|
|
531
|
-
item 3
|
|
532
|
-
</custom-list-item>
|
|
533
|
-
</custom-dropdown-menu>
|
|
534
|
-
</flex-row>
|
|
535
|
-
</demo-section>
|
|
536
|
-
|
|
537
|
-
<demo-section route="list-item">
|
|
538
|
-
<custom-list-item>
|
|
539
|
-
<custom-icon slot="start">info</custom-icon>
|
|
540
|
-
</custom-list-item>
|
|
541
|
-
</demo-section>
|
|
542
|
-
<demo-section route="toggle">
|
|
543
|
-
<custom-toggle togglers='["check_box","check_box_outline_blank", "info"]'></custom-toggle>
|
|
544
|
-
|
|
545
|
-
<custom-button label="next"></custom-button>
|
|
546
|
-
|
|
547
|
-
<script>
|
|
548
|
-
const toggleDemo = document.querySelector('demo-section[route="toggle"]')
|
|
549
|
-
toggleDemo.querySelector('custom-button').addEventListener('click', () => {
|
|
550
|
-
toggleDemo.querySelector('custom-toggle').next()
|
|
551
|
-
})
|
|
552
|
-
</script>
|
|
553
|
-
</demo-section>
|
|
554
|
-
|
|
555
|
-
<demo-section route="toggle-button">
|
|
556
|
-
<custom-toggle-button togglers='["check_box","check_box_outline_blank"]'> </custom-toggle-button>
|
|
557
|
-
</demo-section>
|
|
558
|
-
</custom-pages>
|
|
559
|
-
</flex-column>
|
|
560
|
-
</custom-drawer-layout>
|
|
561
|
-
<!-- </custom-root> -->
|
|
562
|
-
<!-- </flex-row> -->
|
|
563
|
-
|
|
564
|
-
<script type="module">
|
|
565
|
-
import './demo-elements.js'
|
|
566
|
-
import './elements.js'
|
|
567
|
-
|
|
568
|
-
const selector = document.querySelector('custom-selector')
|
|
569
|
-
const pages = document.querySelector('custom-pages')
|
|
570
|
-
|
|
571
|
-
const onSelected = async ({ detail }) => {
|
|
572
|
-
document.dispatchEvent(new CustomEvent('custom-scroll', { detail: { scrolling: false } }))
|
|
573
|
-
pages.select(detail)
|
|
574
|
-
localStorage.setItem('last-selected', detail)
|
|
575
|
-
}
|
|
576
|
-
|
|
577
|
-
selector.addEventListener('selected', onSelected)
|
|
578
|
-
|
|
579
|
-
const lastSelected = localStorage.getItem('last-selected')
|
|
580
|
-
if (lastSelected)
|
|
581
|
-
if (customElements.get('custom-serlector')) selector.select(lastSelected)
|
|
582
|
-
else {
|
|
583
|
-
await customElements.whenDefined('custom-selector')
|
|
584
|
-
selector.select(lastSelected)
|
|
585
|
-
|
|
586
|
-
pages.select(lastSelected)
|
|
587
|
-
}
|
|
588
|
-
</script>
|
|
589
|
-
</body>
|
|
590
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Document</title>
|
|
8
|
+
<style>
|
|
9
|
+
html,
|
|
10
|
+
body {
|
|
11
|
+
inset: 0;
|
|
12
|
+
position: absolute;
|
|
13
|
+
margin: 0;
|
|
14
|
+
width: 100%;
|
|
15
|
+
color: var(--md-sys-color-on-background);
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
}
|
|
18
|
+
custom-drawer-layout {
|
|
19
|
+
height: 100%;
|
|
20
|
+
width: 100%;
|
|
21
|
+
inset: 0;
|
|
22
|
+
|
|
23
|
+
background: var(--md-sys-color-background, #fff);
|
|
24
|
+
position: absolute;
|
|
25
|
+
display: flex;
|
|
26
|
+
}
|
|
27
|
+
.demo-container {
|
|
28
|
+
height: 100%;
|
|
29
|
+
width: 100%;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
flex-column {
|
|
33
|
+
width: 100%;
|
|
34
|
+
height: 100%;
|
|
35
|
+
overflow-y: auto;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.demo-container section {
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
[non-interactive] {
|
|
44
|
+
pointer-events: none;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
h4 {
|
|
48
|
+
margin: 0;
|
|
49
|
+
padding-top: 16px;
|
|
50
|
+
padding-bottom: 12px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
custom-drawer custom-divider {
|
|
54
|
+
margin-top: 16px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
flex-row:not([slot='top-app-bar-end']) {
|
|
58
|
+
width: 100%;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
flex-column {
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
}
|
|
65
|
+
</style>
|
|
66
|
+
</head>
|
|
67
|
+
<body>
|
|
68
|
+
<custom-theme></custom-theme>
|
|
69
|
+
<demo-icons></demo-icons>
|
|
70
|
+
|
|
71
|
+
<!-- <custom-root> -->
|
|
72
|
+
<custom-drawer-layout class="demo-container" drawer-open>
|
|
73
|
+
<span slot="drawer-headline"> menu </span>
|
|
74
|
+
|
|
75
|
+
<flex-column slot="drawer-content">
|
|
76
|
+
<custom-selector attr-for-selected="route" default-selected="banner">
|
|
77
|
+
<custom-drawer-item route="banner">banner</custom-drawer-item>
|
|
78
|
+
<custom-drawer-item route="dialog">dialog</custom-drawer-item>
|
|
79
|
+
<custom-drawer-item route="divider">divider</custom-drawer-item>
|
|
80
|
+
<custom-drawer-item route="buttons">buttons</custom-drawer-item>
|
|
81
|
+
<custom-drawer-item route="cards">cards</custom-drawer-item>
|
|
82
|
+
<custom-drawer-item route="top-app-bar">top-app-bar</custom-drawer-item>
|
|
83
|
+
<custom-drawer-item route="typography">typography</custom-drawer-item>
|
|
84
|
+
<custom-drawer-item route="drawer">drawer</custom-drawer-item>
|
|
85
|
+
<custom-drawer-item route="pane">pane</custom-drawer-item>
|
|
86
|
+
<custom-drawer-item route="supporting-pane">supporting-pane</custom-drawer-item>
|
|
87
|
+
<custom-drawer-item route="tabs">tabs</custom-drawer-item>
|
|
88
|
+
<custom-drawer-item route="menu">menu</custom-drawer-item>
|
|
89
|
+
<custom-drawer-item route="dropdown-menu">dropdown-menu</custom-drawer-item>
|
|
90
|
+
<custom-drawer-item route="list-item">list-item</custom-drawer-item>
|
|
91
|
+
<custom-drawer-item route="toggle">toggle</custom-drawer-item>
|
|
92
|
+
<custom-drawer-item route="toggle-button">toggle-button</custom-drawer-item>
|
|
93
|
+
<custom-drawer-item route="time-picker">time-picker</custom-drawer-item>
|
|
94
|
+
</custom-selector>
|
|
95
|
+
</flex-column>
|
|
96
|
+
|
|
97
|
+
<span slot="top-app-bar-title">custom-elements</span>
|
|
98
|
+
|
|
99
|
+
<flex-row slot="top-app-bar-end">
|
|
100
|
+
<custom-theme-mode></custom-theme-mode>
|
|
101
|
+
<custom-button>
|
|
102
|
+
<custom-icon slot="icon">more_vert</custom-icon>
|
|
103
|
+
</custom-button>
|
|
104
|
+
</flex-row>
|
|
105
|
+
|
|
106
|
+
<flex-column>
|
|
107
|
+
<custom-pages attr-for-selected="route" default-selected="banner">
|
|
108
|
+
<demo-section route="banner">
|
|
109
|
+
<custom-banner>Banner</custom-banner>
|
|
110
|
+
</demo-section>
|
|
111
|
+
|
|
112
|
+
<demo-section route="divider">
|
|
113
|
+
<custom-divider></custom-divider>
|
|
114
|
+
<custom-divider inset></custom-divider>
|
|
115
|
+
<custom-divider middle-inset></custom-divider>
|
|
116
|
+
</demo-section>
|
|
117
|
+
|
|
118
|
+
<demo-section route="cards">
|
|
119
|
+
<custom-card type="filled">
|
|
120
|
+
<span slot="headline">filled</span>
|
|
121
|
+
<span slot="subline">subline</span>
|
|
122
|
+
<p slot="supportingText">
|
|
123
|
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
|
|
124
|
+
magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
|
|
125
|
+
facilis et quasi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi
|
|
126
|
+
eum aliquam enim, magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam
|
|
127
|
+
praesentium veritatis facilis et quasi?
|
|
128
|
+
</p>
|
|
129
|
+
<flex-row slot="actions">
|
|
130
|
+
<custom-button type="filled" label="YES"></custom-button>
|
|
131
|
+
</flex-row>
|
|
132
|
+
</custom-card>
|
|
133
|
+
|
|
134
|
+
<custom-card type="elevated">
|
|
135
|
+
<span slot="headline">elevated</span>
|
|
136
|
+
<span slot="subline">subline</span>
|
|
137
|
+
<p slot="supportingText">
|
|
138
|
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
|
|
139
|
+
magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
|
|
140
|
+
facilis et quasi?
|
|
141
|
+
</p>
|
|
142
|
+
<flex-row slot="actions">
|
|
143
|
+
<custom-button type="elevated" label="YES"></custom-button>
|
|
144
|
+
</flex-row>
|
|
145
|
+
</custom-card>
|
|
146
|
+
|
|
147
|
+
<custom-card type="outlined">
|
|
148
|
+
<span slot="headline">outlined</span>
|
|
149
|
+
<span slot="subline">subline</span>
|
|
150
|
+
<p slot="supportingText">
|
|
151
|
+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique ratione eligendi eum aliquam enim,
|
|
152
|
+
magni beatae facere tempora ex accusantium a, dolorem tempore placeat laboriosam praesentium veritatis
|
|
153
|
+
facilis et quasi?
|
|
154
|
+
</p>
|
|
155
|
+
<flex-row slot="actions">
|
|
156
|
+
<custom-button type="outlined" label="YES"></custom-button>
|
|
157
|
+
</flex-row>
|
|
158
|
+
</custom-card>
|
|
159
|
+
|
|
160
|
+
<custom-card type="tertiary">
|
|
161
|
+
<img
|
|
162
|
+
loading="lazy"
|
|
163
|
+
slot="image"
|
|
164
|
+
src="https://lh3.googleusercontent.com/9NBw6U14z6f-EAnwPqfcX-mIkxNdpK0IXvwiun9w84JkMcZfBT0bfRqn7QWdBVqnCYC5hsDEnGhSjbaWcgi1HT_Q6pCioSRTgMFODqZdAXw=s0"
|
|
165
|
+
/>
|
|
166
|
+
<span slot="headline">tertiary</span>
|
|
167
|
+
<span slot="subline">subline</span>
|
|
168
|
+
|
|
169
|
+
<flex-row slot="actions">
|
|
170
|
+
<custom-button type="tertiary" label="YES"></custom-button>
|
|
171
|
+
</flex-row>
|
|
172
|
+
</custom-card>
|
|
173
|
+
</demo-section>
|
|
174
|
+
|
|
175
|
+
<demo-section route="buttons">
|
|
176
|
+
<custom-button type="text" label="text"></custom-button>
|
|
177
|
+
|
|
178
|
+
<custom-button type="text" label="with icon">
|
|
179
|
+
<span slot="icon">+</span>
|
|
180
|
+
</custom-button>
|
|
181
|
+
|
|
182
|
+
<custom-button type="filled" label="filled"></custom-button>
|
|
183
|
+
|
|
184
|
+
<custom-button type="filled" label="with icon">
|
|
185
|
+
<span slot="icon">+</span>
|
|
186
|
+
</custom-button>
|
|
187
|
+
|
|
188
|
+
<custom-button type="elevated" label="elevated"></custom-button>
|
|
189
|
+
|
|
190
|
+
<custom-button type="elevated" label="with icon">
|
|
191
|
+
<span slot="icon">+</span>
|
|
192
|
+
</custom-button>
|
|
193
|
+
|
|
194
|
+
<custom-button type="outlined" label="outlined"></custom-button>
|
|
195
|
+
|
|
196
|
+
<custom-button type="outlined" label="with icon">
|
|
197
|
+
<span slot="icon">+</span>
|
|
198
|
+
</custom-button>
|
|
199
|
+
|
|
200
|
+
<custom-button type="tonal" label="tonal"></custom-button>
|
|
201
|
+
|
|
202
|
+
<custom-button type="tonal" label="with icon">
|
|
203
|
+
<span slot="icon">+</span>
|
|
204
|
+
</custom-button>
|
|
205
|
+
|
|
206
|
+
<custom-button type="tertiary" label="tertiary"></custom-button>
|
|
207
|
+
|
|
208
|
+
<custom-button type="tertiary" label="with icon">
|
|
209
|
+
<span slot="icon">+</span>
|
|
210
|
+
</custom-button>
|
|
211
|
+
</demo-section>
|
|
212
|
+
|
|
213
|
+
<demo-section route="top-app-bar">
|
|
214
|
+
<custom-top-app-bar>
|
|
215
|
+
<span slot="title">title</span>
|
|
216
|
+
</custom-top-app-bar>
|
|
217
|
+
|
|
218
|
+
<custom-top-app-bar type="small">
|
|
219
|
+
<custom-icon-button slot="start" icon="menu"></custom-icon-button>
|
|
220
|
+
<span slot="title">title</span>
|
|
221
|
+
</custom-top-app-bar>
|
|
222
|
+
|
|
223
|
+
<custom-top-app-bar type="medium">
|
|
224
|
+
<custom-icon-button slot="start" icon="menu"></custom-icon-button>
|
|
225
|
+
<span slot="title">title</span>
|
|
226
|
+
</custom-top-app-bar>
|
|
227
|
+
|
|
228
|
+
<custom-top-app-bar type="large">
|
|
229
|
+
<custom-icon-button slot="start" icon="menu"></custom-icon-button>
|
|
230
|
+
<span slot="title">title</span>
|
|
231
|
+
</custom-top-app-bar>
|
|
232
|
+
</demo-section>
|
|
233
|
+
|
|
234
|
+
<demo-section route="typography">
|
|
235
|
+
<custom-typography>
|
|
236
|
+
<span>title</span>
|
|
237
|
+
</custom-typography>
|
|
238
|
+
|
|
239
|
+
<custom-typography size="medium">
|
|
240
|
+
<span>title medium</span>
|
|
241
|
+
</custom-typography>
|
|
242
|
+
|
|
243
|
+
<custom-typography size="small">
|
|
244
|
+
<span>title small</span>
|
|
245
|
+
</custom-typography>
|
|
246
|
+
|
|
247
|
+
<custom-typography type="body">
|
|
248
|
+
<span>body</span>
|
|
249
|
+
</custom-typography>
|
|
250
|
+
|
|
251
|
+
<custom-typography type="body" size="medium">
|
|
252
|
+
<span>body medium</span>
|
|
253
|
+
</custom-typography>
|
|
254
|
+
|
|
255
|
+
<custom-typography type="body" size="small">
|
|
256
|
+
<span>body small</span>
|
|
257
|
+
</custom-typography>
|
|
258
|
+
|
|
259
|
+
<custom-typography type="label">
|
|
260
|
+
<span>label</span>
|
|
261
|
+
</custom-typography>
|
|
262
|
+
|
|
263
|
+
<custom-typography type="label" size="medium">
|
|
264
|
+
<span>label medium</span>
|
|
265
|
+
</custom-typography>
|
|
266
|
+
|
|
267
|
+
<custom-typography type="label" size="small">
|
|
268
|
+
<span>label small</span>
|
|
269
|
+
</custom-typography>
|
|
270
|
+
|
|
271
|
+
<custom-typography type="headline">
|
|
272
|
+
<span>headline</span>
|
|
273
|
+
</custom-typography>
|
|
274
|
+
|
|
275
|
+
<custom-typography type="headline" size="medium">
|
|
276
|
+
<span>headline medium</span>
|
|
277
|
+
</custom-typography>
|
|
278
|
+
|
|
279
|
+
<custom-typography type="headline" size="small">
|
|
280
|
+
<span>headline small</span>
|
|
281
|
+
</custom-typography>
|
|
282
|
+
|
|
283
|
+
<custom-typography type="display">
|
|
284
|
+
<span>display</span>
|
|
285
|
+
</custom-typography>
|
|
286
|
+
|
|
287
|
+
<custom-typography type="display" size="medium">
|
|
288
|
+
<span>display medium</span>
|
|
289
|
+
</custom-typography>
|
|
290
|
+
|
|
291
|
+
<custom-typography type="display" size="small">
|
|
292
|
+
<span>display small</span>
|
|
293
|
+
</custom-typography>
|
|
294
|
+
</demo-section>
|
|
295
|
+
|
|
296
|
+
<demo-section route="drawer">
|
|
297
|
+
<custom-drawer open type="modal" id="demo-drawer">
|
|
298
|
+
<span slot="content">
|
|
299
|
+
<custom-drawer-item>home</custom-drawer-item>
|
|
300
|
+
<custom-drawer-item>about</custom-drawer-item>
|
|
301
|
+
</span>
|
|
302
|
+
</custom-drawer>
|
|
303
|
+
|
|
304
|
+
<custom-drawer-button id="demo-drawer"></custom-drawer-button>
|
|
305
|
+
|
|
306
|
+
<custom-selector>
|
|
307
|
+
<custom-drawer-item id="demo-drawer">drawer-item</custom-drawer-item>
|
|
308
|
+
</custom-selector>
|
|
309
|
+
</demo-section>
|
|
310
|
+
|
|
311
|
+
<demo-section route="pane">
|
|
312
|
+
<custom-pane open type="modal" id="demo-pane">
|
|
313
|
+
<span slot="content">
|
|
314
|
+
<custom-drawer-item>home</custom-drawer-item>
|
|
315
|
+
<custom-drawer-item>about</custom-drawer-item>
|
|
316
|
+
</span>
|
|
317
|
+
</custom-pane>
|
|
318
|
+
|
|
319
|
+
<custom-pane open type="modal" id="demo-pane" right>
|
|
320
|
+
<span slot="content">
|
|
321
|
+
<custom-drawer-item>home</custom-drawer-item>
|
|
322
|
+
<custom-drawer-item>about</custom-drawer-item>
|
|
323
|
+
</span>
|
|
324
|
+
</custom-pane>
|
|
325
|
+
</demo-section>
|
|
326
|
+
<demo-section route="supporting-pane">
|
|
327
|
+
<custom-supporting-pane id="demo-supporting-pane">
|
|
328
|
+
<flex-column>
|
|
329
|
+
<p>
|
|
330
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolor minima. Ab nobis quae neque
|
|
331
|
+
dolor. Asperiores itaque incidunt quae quis est explicabo dolorem, laudantium repellat earum nisi.
|
|
332
|
+
Quae, cum.
|
|
333
|
+
</p>
|
|
334
|
+
</flex-column>
|
|
335
|
+
<flex-column slot="supporting"></flex-column>
|
|
336
|
+
</custom-supporting-pane>
|
|
337
|
+
<custom-drawer-button id="demo-supporting-pane"></custom-drawer-button>
|
|
338
|
+
<custom-supporting-pane open left>
|
|
339
|
+
<flex-column>
|
|
340
|
+
<p>
|
|
341
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, dolor minima. Ab nobis quae neque
|
|
342
|
+
dolor. Asperiores itaque incidunt quae quis est explicabo dolorem, laudantium repellat earum nisi.
|
|
343
|
+
Quae, cum.
|
|
344
|
+
</p>
|
|
345
|
+
</flex-column>
|
|
346
|
+
<flex-column slot="supporting"></flex-column>
|
|
347
|
+
</custom-supporting-pane>
|
|
348
|
+
</demo-section>
|
|
349
|
+
|
|
350
|
+
<demo-section route="tabs">
|
|
351
|
+
<custom-tabs>
|
|
352
|
+
<custom-tab>home</custom-tab>
|
|
353
|
+
<custom-tab>about</custom-tab>
|
|
354
|
+
</custom-tabs>
|
|
355
|
+
|
|
356
|
+
<custom-tabs round>
|
|
357
|
+
<custom-tab>
|
|
358
|
+
<custom-icon>home</custom-icon>
|
|
359
|
+
home
|
|
360
|
+
</custom-tab>
|
|
361
|
+
<custom-tab>about</custom-tab>
|
|
362
|
+
</custom-tabs>
|
|
363
|
+
</demo-section>
|
|
364
|
+
|
|
365
|
+
<demo-section route="dialog">
|
|
366
|
+
<flex-container>
|
|
367
|
+
<custom-button class="fullscreen-dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
|
|
368
|
+
<custom-dialog fullscreen>
|
|
369
|
+
<span slot="title">title</span>
|
|
370
|
+
<p>
|
|
371
|
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
372
|
+
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
373
|
+
dolorem corporis.
|
|
374
|
+
</p>
|
|
375
|
+
<p>
|
|
376
|
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
377
|
+
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
378
|
+
dolorem corporis.
|
|
379
|
+
</p>
|
|
380
|
+
<p>
|
|
381
|
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
382
|
+
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
383
|
+
dolorem corporis.
|
|
384
|
+
</p>
|
|
385
|
+
<p>
|
|
386
|
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
387
|
+
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
388
|
+
dolorem corporis.
|
|
389
|
+
</p>
|
|
390
|
+
<p>
|
|
391
|
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
392
|
+
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
393
|
+
dolorem corporis.
|
|
394
|
+
</p>
|
|
395
|
+
<p>
|
|
396
|
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
397
|
+
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
398
|
+
dolorem corporis.
|
|
399
|
+
</p>
|
|
400
|
+
<flex-row slot="actions">
|
|
401
|
+
<custom-button label="agree" action="agree">agree</custom-button>
|
|
402
|
+
</flex-row>
|
|
403
|
+
</custom-dialog>
|
|
404
|
+
|
|
405
|
+
<script>
|
|
406
|
+
const demoSection = document.querySelector('demo-section[route="dialog"]')
|
|
407
|
+
const fullscreenDialog = demoSection.querySelector('custom-dialog[fullscreen]')
|
|
408
|
+
demoSection.querySelector('.fullscreen-dialog').addEventListener('click', () => {
|
|
409
|
+
fullscreenDialog.open = !fullscreenDialog.open
|
|
410
|
+
})
|
|
411
|
+
</script>
|
|
412
|
+
</flex-container>
|
|
413
|
+
|
|
414
|
+
<flex-container>
|
|
415
|
+
<custom-button class="dialog"><custom-icon slot="icon">menu</custom-icon></custom-button>
|
|
416
|
+
<custom-dialog class="dialog">
|
|
417
|
+
<span slot="title">title</span>
|
|
418
|
+
<p>
|
|
419
|
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum quae ipsum autem, recusandae impedit
|
|
420
|
+
minus cumque odit vel incidunt, exercitationem sint tempore sit ea ratione accusamus nemo magni
|
|
421
|
+
dolorem corporis.
|
|
422
|
+
</p>
|
|
423
|
+
|
|
424
|
+
<flex-row slot="actions">
|
|
425
|
+
<custom-button label="agree" action="agree">agree</custom-button>
|
|
426
|
+
</flex-row>
|
|
427
|
+
</custom-dialog>
|
|
428
|
+
|
|
429
|
+
<script>
|
|
430
|
+
const dialog = demoSection.querySelector('custom-dialog.dialog')
|
|
431
|
+
demoSection.querySelector('.dialog').addEventListener('click', () => {
|
|
432
|
+
dialog.open = !dialog.open
|
|
433
|
+
})
|
|
434
|
+
</script>
|
|
435
|
+
</flex-container>
|
|
436
|
+
</demo-section>
|
|
437
|
+
|
|
438
|
+
<demo-section route="time-picker">
|
|
439
|
+
<custom-time-picker></custom-time-picker>
|
|
440
|
+
</demo-section>
|
|
441
|
+
|
|
442
|
+
<demo-section route="menu">
|
|
443
|
+
<custom-menu>
|
|
444
|
+
<custom-list-item type="menu">
|
|
445
|
+
<custom-icon slot="start">info</custom-icon>
|
|
446
|
+
item 1
|
|
447
|
+
</custom-list-item>
|
|
448
|
+
|
|
449
|
+
<custom-list-item type="menu">
|
|
450
|
+
<custom-icon slot="start">info</custom-icon>
|
|
451
|
+
item 2
|
|
452
|
+
</custom-list-item>
|
|
453
|
+
|
|
454
|
+
<custom-list-item type="menu">
|
|
455
|
+
<custom-icon slot="start">info</custom-icon>
|
|
456
|
+
item 3
|
|
457
|
+
</custom-list-item>
|
|
458
|
+
</custom-menu>
|
|
459
|
+
</demo-section>
|
|
460
|
+
|
|
461
|
+
<demo-section route="dropdown-menu">
|
|
462
|
+
<custom-dropdown-menu>
|
|
463
|
+
<custom-list-item type="menu">
|
|
464
|
+
<custom-icon slot="start">info</custom-icon>
|
|
465
|
+
item 1
|
|
466
|
+
</custom-list-item>
|
|
467
|
+
|
|
468
|
+
<custom-list-item type="menu">
|
|
469
|
+
<custom-icon slot="start">info</custom-icon>
|
|
470
|
+
item 2
|
|
471
|
+
</custom-list-item>
|
|
472
|
+
|
|
473
|
+
<custom-list-item type="menu">
|
|
474
|
+
<custom-icon slot="start">info</custom-icon>
|
|
475
|
+
item 3
|
|
476
|
+
</custom-list-item>
|
|
477
|
+
</custom-dropdown-menu>
|
|
478
|
+
|
|
479
|
+
<flex-row>
|
|
480
|
+
<flex-it></flex-it>
|
|
481
|
+
<custom-dropdown-menu right>
|
|
482
|
+
<custom-list-item type="menu">
|
|
483
|
+
<custom-icon slot="start">info</custom-icon>
|
|
484
|
+
item 1
|
|
485
|
+
</custom-list-item>
|
|
486
|
+
|
|
487
|
+
<custom-list-item type="menu">
|
|
488
|
+
<custom-icon slot="start">info</custom-icon>
|
|
489
|
+
item 2
|
|
490
|
+
</custom-list-item>
|
|
491
|
+
|
|
492
|
+
<custom-list-item type="menu">
|
|
493
|
+
<custom-icon slot="start">info</custom-icon>
|
|
494
|
+
item 3
|
|
495
|
+
</custom-list-item>
|
|
496
|
+
</custom-dropdown-menu>
|
|
497
|
+
</flex-row>
|
|
498
|
+
|
|
499
|
+
<custom-dropdown-menu bottom>
|
|
500
|
+
<custom-list-item type="menu">
|
|
501
|
+
<custom-icon slot="start">info</custom-icon>
|
|
502
|
+
item 1
|
|
503
|
+
</custom-list-item>
|
|
504
|
+
|
|
505
|
+
<custom-list-item type="menu">
|
|
506
|
+
<custom-icon slot="start">info</custom-icon>
|
|
507
|
+
item 2
|
|
508
|
+
</custom-list-item>
|
|
509
|
+
|
|
510
|
+
<custom-list-item type="menu">
|
|
511
|
+
<custom-icon slot="start">info</custom-icon>
|
|
512
|
+
item 3
|
|
513
|
+
</custom-list-item>
|
|
514
|
+
</custom-dropdown-menu>
|
|
515
|
+
|
|
516
|
+
<flex-row>
|
|
517
|
+
<flex-it></flex-it>
|
|
518
|
+
<custom-dropdown-menu bottom right>
|
|
519
|
+
<custom-list-item type="menu">
|
|
520
|
+
<custom-icon slot="start">info</custom-icon>
|
|
521
|
+
item 1
|
|
522
|
+
</custom-list-item>
|
|
523
|
+
|
|
524
|
+
<custom-list-item type="menu">
|
|
525
|
+
<custom-icon slot="start">info</custom-icon>
|
|
526
|
+
item 2
|
|
527
|
+
</custom-list-item>
|
|
528
|
+
|
|
529
|
+
<custom-list-item type="menu">
|
|
530
|
+
<custom-icon slot="start">info</custom-icon>
|
|
531
|
+
item 3
|
|
532
|
+
</custom-list-item>
|
|
533
|
+
</custom-dropdown-menu>
|
|
534
|
+
</flex-row>
|
|
535
|
+
</demo-section>
|
|
536
|
+
|
|
537
|
+
<demo-section route="list-item">
|
|
538
|
+
<custom-list-item>
|
|
539
|
+
<custom-icon slot="start">info</custom-icon>
|
|
540
|
+
</custom-list-item>
|
|
541
|
+
</demo-section>
|
|
542
|
+
<demo-section route="toggle">
|
|
543
|
+
<custom-toggle togglers='["check_box","check_box_outline_blank", "info"]'></custom-toggle>
|
|
544
|
+
|
|
545
|
+
<custom-button label="next"></custom-button>
|
|
546
|
+
|
|
547
|
+
<script>
|
|
548
|
+
const toggleDemo = document.querySelector('demo-section[route="toggle"]')
|
|
549
|
+
toggleDemo.querySelector('custom-button').addEventListener('click', () => {
|
|
550
|
+
toggleDemo.querySelector('custom-toggle').next()
|
|
551
|
+
})
|
|
552
|
+
</script>
|
|
553
|
+
</demo-section>
|
|
554
|
+
|
|
555
|
+
<demo-section route="toggle-button">
|
|
556
|
+
<custom-toggle-button togglers='["check_box","check_box_outline_blank"]'> </custom-toggle-button>
|
|
557
|
+
</demo-section>
|
|
558
|
+
</custom-pages>
|
|
559
|
+
</flex-column>
|
|
560
|
+
</custom-drawer-layout>
|
|
561
|
+
<!-- </custom-root> -->
|
|
562
|
+
<!-- </flex-row> -->
|
|
563
|
+
|
|
564
|
+
<script type="module">
|
|
565
|
+
import './demo-elements.js'
|
|
566
|
+
import './elements.js'
|
|
567
|
+
|
|
568
|
+
const selector = document.querySelector('custom-selector')
|
|
569
|
+
const pages = document.querySelector('custom-pages')
|
|
570
|
+
|
|
571
|
+
const onSelected = async ({ detail }) => {
|
|
572
|
+
document.dispatchEvent(new CustomEvent('custom-scroll', { detail: { scrolling: false } }))
|
|
573
|
+
pages.select(detail)
|
|
574
|
+
localStorage.setItem('last-selected', detail)
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
selector.addEventListener('selected', onSelected)
|
|
578
|
+
|
|
579
|
+
const lastSelected = localStorage.getItem('last-selected')
|
|
580
|
+
if (lastSelected)
|
|
581
|
+
if (customElements.get('custom-serlector')) selector.select(lastSelected)
|
|
582
|
+
else {
|
|
583
|
+
await customElements.whenDefined('custom-selector')
|
|
584
|
+
selector.select(lastSelected)
|
|
585
|
+
|
|
586
|
+
pages.select(lastSelected)
|
|
587
|
+
}
|
|
588
|
+
</script>
|
|
589
|
+
</body>
|
|
590
|
+
</html>
|