material-inspired-component-library 2.0.1 → 3.0.0
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/README.md +14 -0
- package/components/README.md +2 -0
- package/components/appbar/README.md +94 -0
- package/components/appbar/index.scss +216 -0
- package/components/button/index.scss +70 -65
- package/components/button/index.ts +1 -1
- package/components/card/index.scss +1 -1
- package/components/checkbox/index.scss +4 -0
- package/components/iconbutton/index.scss +111 -111
- package/components/iconbutton/index.ts +1 -1
- package/components/navigationrail/README.md +11 -11
- package/components/navigationrail/index.scss +20 -12
- package/components/radio/index.scss +1 -1
- package/dist/appbar.css +1 -0
- package/dist/appbar.js +1 -0
- package/dist/bottomsheet.css +1 -1
- package/dist/button.css +1 -1
- package/dist/card.css +1 -1
- package/dist/checkbox.css +1 -1
- package/dist/dialog.css +1 -1
- package/dist/iconbutton.css +1 -1
- package/dist/list.css +1 -1
- package/dist/micl.css +1 -1
- package/dist/navigationrail.css +1 -1
- package/dist/radio.css +1 -1
- package/dist/select.css +1 -1
- package/dist/slider.css +1 -1
- package/dist/switch.css +1 -1
- package/dist/textfield.css +1 -1
- package/docs/accordion.html +298 -254
- package/docs/bottomsheet.html +174 -145
- package/docs/button.html +210 -182
- package/docs/card.html +107 -72
- package/docs/checkbox.html +92 -65
- package/docs/dialog.html +154 -123
- package/docs/divider.html +96 -67
- package/docs/docs.css +14 -24
- package/docs/docs.js +4 -2
- package/docs/iconbutton.html +196 -171
- package/docs/index.html +296 -286
- package/docs/list.html +260 -216
- package/docs/menu.html +260 -220
- package/docs/micl.css +1 -1
- package/docs/navigationrail.html +36 -34
- package/docs/radio.html +93 -68
- package/docs/select.html +213 -173
- package/docs/sidesheet.html +104 -87
- package/docs/slider.html +105 -72
- package/docs/switch.html +126 -101
- package/docs/textfield.html +181 -138
- package/layout/README.md +122 -0
- package/layout/index.scss +258 -0
- package/package.json +1 -1
- package/styles/statelayer.scss +2 -0
- package/styles.scss +13 -0
- package/styles/layout.scss +0 -74
package/docs/button.html
CHANGED
|
@@ -3,202 +3,230 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="description" content="Demonstrating MICL Buttons">
|
|
6
7
|
<title>MICL Buttons</title>
|
|
7
8
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
|
|
8
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,edit&display=block">
|
|
9
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,edit,home&display=block">
|
|
9
10
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
10
11
|
<link rel="stylesheet" href="micl.css">
|
|
11
12
|
<link rel="stylesheet" href="docs.css">
|
|
12
13
|
</head>
|
|
13
|
-
<body class="light">
|
|
14
|
-
<
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
<body class="micl-window light">
|
|
15
|
+
<main class="micl-body micl-body--stacked-to-large">
|
|
16
|
+
<section class="micl-pane">
|
|
17
|
+
<header class="micl-appbar">
|
|
18
|
+
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
|
|
19
|
+
<span class="material-symbols-outlined" aria-hidden="true">home</span>
|
|
20
|
+
</a>
|
|
21
|
+
<div class="micl-appbar__headline micl-appbar__headline--center">
|
|
22
|
+
<h1>Buttons</h1>
|
|
23
|
+
<p class="micl-appbar__subtitle">Showcasing MICL buttons</p>
|
|
24
|
+
</div>
|
|
25
|
+
<div id="settings-placeholder" class="micl-appbar__trailing"></div>
|
|
26
|
+
</header>
|
|
18
27
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
28
|
+
<div class="micl-card-filled">
|
|
29
|
+
<div class="micl-card__headline-m">
|
|
30
|
+
<h2>Text buttons</h2>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="micl-card__content" style="padding-block:8px 16px">
|
|
33
|
+
<button type="button" class="micl-button-text-xs">Click</button>
|
|
34
|
+
<button type="button" class="micl-button-text-s">Click</button>
|
|
35
|
+
<button type="button" class="micl-button-text-m">Click</button>
|
|
36
|
+
<button type="button" class="micl-button-text-l">Click</button>
|
|
37
|
+
<button type="button" class="micl-button-text-xl">Click</button>
|
|
38
|
+
<p></p>
|
|
39
|
+
<button type="button" class="micl-button-text-xs micl-button--square">
|
|
40
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
41
|
+
Click
|
|
42
|
+
</button>
|
|
43
|
+
<button type="button" class="micl-button-text-s micl-button--square">
|
|
44
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
45
|
+
Click
|
|
46
|
+
</button>
|
|
47
|
+
<button type="button" class="micl-button-text-m micl-button--square">
|
|
48
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
49
|
+
Click
|
|
50
|
+
</button>
|
|
51
|
+
<button type="button" class="micl-button-text-l micl-button--square">
|
|
52
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
53
|
+
Click
|
|
54
|
+
</button>
|
|
55
|
+
<button type="button" class="micl-button-text-xl micl-button--square">
|
|
56
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
57
|
+
Click
|
|
58
|
+
</button>
|
|
59
|
+
</div>
|
|
23
60
|
</div>
|
|
24
|
-
<div class="micl-
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<
|
|
33
|
-
Click
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
61
|
+
<div class="micl-card-outlined">
|
|
62
|
+
<div class="micl-card__headline-m">
|
|
63
|
+
<h2>Elevated buttons</h2>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="micl-card__content" style="padding-block:8px 16px">
|
|
66
|
+
<button type="button" class="micl-button-elevated-xs">Click</button>
|
|
67
|
+
<button type="button" class="micl-button-elevated-s">Click</button>
|
|
68
|
+
<button type="button" class="micl-button-elevated-m">Click</button>
|
|
69
|
+
<button type="button" class="micl-button-elevated-l">Click</button>
|
|
70
|
+
<button type="button" class="micl-button-elevated-xl">Click</button>
|
|
71
|
+
<p></p>
|
|
72
|
+
<button type="button" class="micl-button-elevated-xs micl-button--square">
|
|
73
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
74
|
+
<span>Click</span>
|
|
75
|
+
</button>
|
|
76
|
+
<button type="button" class="micl-button-elevated-s micl-button--square">
|
|
77
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
78
|
+
<span>Click</span>
|
|
79
|
+
</button>
|
|
80
|
+
<button type="button" class="micl-button-elevated-m micl-button--square">
|
|
81
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
82
|
+
<span>Click</span>
|
|
83
|
+
</button>
|
|
84
|
+
<button type="button" class="micl-button-elevated-l micl-button--square">
|
|
85
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
86
|
+
<span>Click</span>
|
|
87
|
+
</button>
|
|
88
|
+
<button type="button" class="micl-button-elevated-xl micl-button--square">
|
|
89
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
90
|
+
<span>Click</span>
|
|
91
|
+
</button>
|
|
92
|
+
</div>
|
|
51
93
|
</div>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
94
|
+
<div class="micl-card-elevated">
|
|
95
|
+
<div class="micl-card__headline-m">
|
|
96
|
+
<h2>Filled buttons</h2>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="micl-card__content" style="padding-block:8px 16px">
|
|
99
|
+
<button type="button" class="micl-button-filled-xs">Click</button>
|
|
100
|
+
<button type="button" class="micl-button-filled-s">Click</button>
|
|
101
|
+
<button type="button" class="micl-button-filled-m">Click</button>
|
|
102
|
+
<button type="button" class="micl-button-filled-l">Click</button>
|
|
103
|
+
<button type="button" class="micl-button-filled-xl">Click</button>
|
|
104
|
+
<p></p>
|
|
105
|
+
<button type="button" class="micl-button-filled-xs micl-button--square">
|
|
106
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
107
|
+
Click
|
|
108
|
+
</button>
|
|
109
|
+
<button type="button" class="micl-button-filled-s micl-button--square">
|
|
110
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
111
|
+
Click
|
|
112
|
+
</button>
|
|
113
|
+
<button type="button" class="micl-button-filled-m micl-button--square">
|
|
114
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
115
|
+
Click
|
|
116
|
+
</button>
|
|
117
|
+
<button type="button" class="micl-button-filled-l micl-button--square">
|
|
118
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
119
|
+
Click
|
|
120
|
+
</button>
|
|
121
|
+
<button type="button" class="micl-button-filled-xl micl-button--square">
|
|
122
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
123
|
+
Click
|
|
124
|
+
</button>
|
|
125
|
+
</div>
|
|
56
126
|
</div>
|
|
57
|
-
<div class="micl-
|
|
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
|
-
|
|
127
|
+
<div class="micl-card-outlined">
|
|
128
|
+
<div class="micl-card__headline-m">
|
|
129
|
+
<h2>Tonal buttons</h2>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="micl-card__content" style="padding-block:8px 16px">
|
|
132
|
+
<button type="button" class="micl-button-tonal-xs">Click</button>
|
|
133
|
+
<button type="button" class="micl-button-tonal-s">Click</button>
|
|
134
|
+
<button type="button" class="micl-button-tonal-m">Click</button>
|
|
135
|
+
<button type="button" class="micl-button-tonal-l">Click</button>
|
|
136
|
+
<button type="button" class="micl-button-tonal-xl">Click</button>
|
|
137
|
+
<p></p>
|
|
138
|
+
<button type="button" class="micl-button-tonal-xs micl-button--square">
|
|
139
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
140
|
+
Click
|
|
141
|
+
</button>
|
|
142
|
+
<button type="button" class="micl-button-tonal-s micl-button--square">
|
|
143
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
144
|
+
Click
|
|
145
|
+
</button>
|
|
146
|
+
<button type="button" class="micl-button-tonal-m micl-button--square">
|
|
147
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
148
|
+
Click
|
|
149
|
+
</button>
|
|
150
|
+
<button type="button" class="micl-button-tonal-l micl-button--square">
|
|
151
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
152
|
+
Click
|
|
153
|
+
</button>
|
|
154
|
+
<button type="button" class="micl-button-tonal-xl micl-button--square">
|
|
155
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
156
|
+
Click
|
|
157
|
+
</button>
|
|
158
|
+
</div>
|
|
84
159
|
</div>
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
160
|
+
<div class="micl-card-elevated">
|
|
161
|
+
<div class="micl-card__headline-m">
|
|
162
|
+
<h2>Outlined buttons</h2>
|
|
163
|
+
</div>
|
|
164
|
+
<div class="micl-card__content" style="padding-block:8px 16px">
|
|
165
|
+
<button type="button" class="micl-button-outlined-xs">Click</button>
|
|
166
|
+
<button type="button" class="micl-button-outlined-s">Click</button>
|
|
167
|
+
<button type="button" class="micl-button-outlined-m">Click</button>
|
|
168
|
+
<button type="button" class="micl-button-outlined-l">Click</button>
|
|
169
|
+
<button type="button" class="micl-button-outlined-xl">Click</button>
|
|
170
|
+
<p></p>
|
|
171
|
+
<button type="button" class="micl-button-outlined-xs micl-button--square">
|
|
172
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
173
|
+
Click
|
|
174
|
+
</button>
|
|
175
|
+
<button type="button" class="micl-button-outlined-s micl-button--square">
|
|
176
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
177
|
+
Click
|
|
178
|
+
</button>
|
|
179
|
+
<button type="button" class="micl-button-outlined-m micl-button--square">
|
|
180
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
181
|
+
Click
|
|
182
|
+
</button>
|
|
183
|
+
<button type="button" class="micl-button-outlined-l micl-button--square">
|
|
184
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
185
|
+
Click
|
|
186
|
+
</button>
|
|
187
|
+
<button type="button" class="micl-button-outlined-xl micl-button--square">
|
|
188
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
189
|
+
Click
|
|
190
|
+
</button>
|
|
191
|
+
</div>
|
|
89
192
|
</div>
|
|
90
|
-
<div class="micl-
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
<
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
<
|
|
103
|
-
Click
|
|
104
|
-
</
|
|
105
|
-
<button type="button" class="micl-button-filled-m micl-button--square">
|
|
106
|
-
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
107
|
-
Click
|
|
108
|
-
</button>
|
|
109
|
-
<button type="button" class="micl-button-filled-l micl-button--square">
|
|
110
|
-
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
111
|
-
Click
|
|
112
|
-
</button>
|
|
113
|
-
<button type="button" class="micl-button-filled-xl micl-button--square">
|
|
114
|
-
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
115
|
-
Click
|
|
116
|
-
</button>
|
|
193
|
+
<div class="micl-card-outlined">
|
|
194
|
+
<div class="micl-card__headline-m">
|
|
195
|
+
<h2>Toggle buttons</h2>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="micl-card__content" style="padding-block:8px 16px">
|
|
198
|
+
<button type="button" class="micl-button-elevated-m micl-button--toggle">Click</button>
|
|
199
|
+
<button type="button" class="micl-button-filled-m micl-button--toggle">Click</button>
|
|
200
|
+
<button type="button" class="micl-button-tonal-m micl-button--toggle">Click</button>
|
|
201
|
+
<button type="button" class="micl-button-outlined-m micl-button--toggle">Click</button>
|
|
202
|
+
<p></p>
|
|
203
|
+
<button type="button" class="micl-button-elevated-m micl-button--toggle micl-button--selected">Click</button>
|
|
204
|
+
<button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected">Click</button>
|
|
205
|
+
<button type="button" class="micl-button-tonal-m micl-button--toggle micl-button--selected">Click</button>
|
|
206
|
+
<button type="button" class="micl-button-outlined-m micl-button--toggle micl-button--selected">Click</button>
|
|
207
|
+
</div>
|
|
117
208
|
</div>
|
|
118
|
-
</
|
|
119
|
-
<
|
|
120
|
-
<div class="micl-
|
|
121
|
-
<
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
<
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
Click
|
|
137
|
-
</button>
|
|
138
|
-
<button type="button" class="micl-button-tonal-m micl-button--square">
|
|
139
|
-
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
140
|
-
Click
|
|
141
|
-
</button>
|
|
142
|
-
<button type="button" class="micl-button-tonal-l micl-button--square">
|
|
143
|
-
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
144
|
-
Click
|
|
145
|
-
</button>
|
|
146
|
-
<button type="button" class="micl-button-tonal-xl micl-button--square">
|
|
147
|
-
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
148
|
-
Click
|
|
149
|
-
</button>
|
|
150
|
-
</div>
|
|
151
|
-
</div>
|
|
152
|
-
<div class="micl-card-elevated" style="width:850px">
|
|
153
|
-
<div class="micl-card__headline-m">
|
|
154
|
-
<h2>Outlined buttons</h2>
|
|
155
|
-
</div>
|
|
156
|
-
<div class="micl-card__content" style="padding-block:8px 16px">
|
|
157
|
-
<button type="button" class="micl-button-outlined-xs">Click</button>
|
|
158
|
-
<button type="button" class="micl-button-outlined-s">Click</button>
|
|
159
|
-
<button type="button" class="micl-button-outlined-m">Click</button>
|
|
160
|
-
<button type="button" class="micl-button-outlined-l">Click</button>
|
|
161
|
-
<button type="button" class="micl-button-outlined-xl">Click</button>
|
|
162
|
-
<p></p>
|
|
163
|
-
<button type="button" class="micl-button-outlined-xs micl-button--square">
|
|
164
|
-
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
165
|
-
Click
|
|
166
|
-
</button>
|
|
167
|
-
<button type="button" class="micl-button-outlined-s micl-button--square">
|
|
168
|
-
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
169
|
-
Click
|
|
170
|
-
</button>
|
|
171
|
-
<button type="button" class="micl-button-outlined-m micl-button--square">
|
|
172
|
-
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
173
|
-
Click
|
|
174
|
-
</button>
|
|
175
|
-
<button type="button" class="micl-button-outlined-l micl-button--square">
|
|
176
|
-
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
177
|
-
Click
|
|
178
|
-
</button>
|
|
179
|
-
<button type="button" class="micl-button-outlined-xl micl-button--square">
|
|
180
|
-
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
181
|
-
Click
|
|
182
|
-
</button>
|
|
183
|
-
</div>
|
|
184
|
-
</div>
|
|
185
|
-
<div class="micl-card-outlined" style="width:850px">
|
|
186
|
-
<div class="micl-card__headline-m">
|
|
187
|
-
<h2>Toggle buttons</h2>
|
|
188
|
-
</div>
|
|
189
|
-
<div class="micl-card__content" style="padding-block:8px 16px">
|
|
190
|
-
<button type="button" class="micl-button-elevated-m micl-button--toggle">Click</button>
|
|
191
|
-
<button type="button" class="micl-button-filled-m micl-button--toggle">Click</button>
|
|
192
|
-
<button type="button" class="micl-button-tonal-m micl-button--toggle">Click</button>
|
|
193
|
-
<button type="button" class="micl-button-outlined-m micl-button--toggle">Click</button>
|
|
194
|
-
<p></p>
|
|
195
|
-
<button type="button" class="micl-button-elevated-m micl-button--toggle micl-button--selected">Click</button>
|
|
196
|
-
<button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected">Click</button>
|
|
197
|
-
<button type="button" class="micl-button-tonal-m micl-button--toggle micl-button--selected">Click</button>
|
|
198
|
-
<button type="button" class="micl-button-outlined-m micl-button--toggle micl-button--selected">Click</button>
|
|
209
|
+
</section>
|
|
210
|
+
<section class="micl-pane">
|
|
211
|
+
<div class="micl-card-filled">
|
|
212
|
+
<div class="micl-card__headline-s">
|
|
213
|
+
<h2>Code example</h2>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="micl-card__content docs-code">
|
|
216
|
+
<pre><code>
|
|
217
|
+
<button type="button" class="micl-button-tonal-s">Click</button>
|
|
218
|
+
|
|
219
|
+
<button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected">Click</button>
|
|
220
|
+
|
|
221
|
+
<button type="button" class="micl-button-outlined-xl micl-button--square">
|
|
222
|
+
<span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
|
|
223
|
+
Click
|
|
224
|
+
</button>
|
|
225
|
+
</code></pre>
|
|
226
|
+
</div>
|
|
199
227
|
</div>
|
|
200
|
-
</
|
|
201
|
-
</
|
|
228
|
+
</section>
|
|
229
|
+
</main>
|
|
202
230
|
|
|
203
231
|
<script src="micl.js"></script>
|
|
204
232
|
<script src="docs.js"></script>
|