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/textfield.html
CHANGED
|
@@ -3,9 +3,10 @@
|
|
|
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 Text Fields">
|
|
6
7
|
<title>MICL Text Fields</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=cancel,credit_card,dark_mode,error,search&display=block">
|
|
9
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=cancel,credit_card,dark_mode,error,home,search&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">
|
|
@@ -15,148 +16,190 @@
|
|
|
15
16
|
}
|
|
16
17
|
</style>
|
|
17
18
|
</head>
|
|
18
|
-
<body class="light">
|
|
19
|
-
<
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
<body class="micl-window light">
|
|
20
|
+
<main class="micl-body micl-body--stacked-to-large">
|
|
21
|
+
<section class="micl-pane">
|
|
22
|
+
<header class="micl-appbar">
|
|
23
|
+
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
|
|
24
|
+
<span class="material-symbols-outlined" aria-hidden="true">home</span>
|
|
25
|
+
</a>
|
|
26
|
+
<div class="micl-appbar__headline micl-appbar__headline--center">
|
|
27
|
+
<h1>Text fields</h1>
|
|
28
|
+
<p class="micl-appbar__subtitle">Showcasing MICL text fields</p>
|
|
29
|
+
</div>
|
|
30
|
+
<div id="settings-placeholder" class="micl-appbar__trailing"></div>
|
|
31
|
+
</header>
|
|
23
32
|
|
|
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
|
-
|
|
33
|
+
<div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
|
|
34
|
+
<div class="micl-pane__column">
|
|
35
|
+
<div class="micl-card-elevated">
|
|
36
|
+
<div class="micl-card__content">
|
|
37
|
+
<div class="micl-textfield-outlined">
|
|
38
|
+
<label for="mytextfield1">Label text</label>
|
|
39
|
+
<input type="text" id="mytextfield1">
|
|
40
|
+
</div>
|
|
41
|
+
<div class="micl-textfield-outlined">
|
|
42
|
+
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
43
|
+
<label for="mytextfield2">Name</label>
|
|
44
|
+
<input type="text" id="mytextfield2" value="Marie Curie">
|
|
45
|
+
</div>
|
|
46
|
+
<div class="micl-textfield-outlined">
|
|
47
|
+
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
48
|
+
<label for="mytextfield3">Label text</label>
|
|
49
|
+
<input type="text" id="mytextfield3">
|
|
50
|
+
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="micl-textfield-outlined">
|
|
53
|
+
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
54
|
+
<label for="mytextfield4">City</label>
|
|
55
|
+
<input type="text" id="mytextfield4" disabled value="Paris">
|
|
56
|
+
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="micl-textfield-outlined">
|
|
59
|
+
<label for="mytextfield5">Multiline text field</label>
|
|
60
|
+
<textarea id="mytextfield5"></textarea>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="micl-textfield-outlined micl-textfield--error">
|
|
63
|
+
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
64
|
+
<label for="mytextfield6">Label text</label>
|
|
65
|
+
<input type="text" id="mytextfield6">
|
|
66
|
+
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="micl-textfield-outlined micl-textfield--error">
|
|
69
|
+
<label for="mytextfield7">Password</label>
|
|
70
|
+
<input type="password" id="mytextfield7" value="foobar">
|
|
71
|
+
<span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
|
|
72
|
+
<span class="micl-textfield__supporting-text">Include an uppercase letter, a lowercase letter, and a numeric character</span>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="micl-card-filled">
|
|
77
|
+
<div class="micl-card__content">
|
|
78
|
+
<div class="micl-textfield-outlined">
|
|
79
|
+
<input type="text" name="myname">
|
|
80
|
+
</div>
|
|
81
|
+
<div class="micl-textfield-outlined">
|
|
82
|
+
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
83
|
+
<label for="mytextfield12">Text field</label>
|
|
84
|
+
<input type="text" id="mytextfield12" value="Outlined">
|
|
85
|
+
<span class="micl-textfield__supporting-text">Supporting text</span>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="micl-textfield-outlined">
|
|
88
|
+
<span class="micl-textfield__prefix" aria-label="Euro">€</span>
|
|
89
|
+
<label for="mytextfield13">Amount</label>
|
|
90
|
+
<input type="text" id="mytextfield13" value="299.89">
|
|
91
|
+
<span class="micl-textfield__icon-trailing material-symbols-outlined">credit_card</span>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="micl-textfield-outlined">
|
|
94
|
+
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
95
|
+
<label for="mytextfield14">City</label>
|
|
96
|
+
<input type="text" id="mytextfield14" disabled value="Paris">
|
|
97
|
+
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
98
|
+
<span class="micl-textfield__supporting-text">This input field is disabled</span>
|
|
99
|
+
</div>
|
|
100
|
+
<div class="micl-textfield-outlined">
|
|
101
|
+
<label for="mytextfield15">Text area</label>
|
|
102
|
+
<textarea id="mytextfield15" rows="3">Text areas are taller than text fields and wrap overflow text onto a new line. They are a fixed height and scroll vertically when the cursor reaches the bottom of the field. </textarea>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="micl-textfield-outlined micl-textfield--error">
|
|
105
|
+
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
106
|
+
<label for="mytextfield16">Label text</label>
|
|
107
|
+
<input type="text" id="mytextfield16">
|
|
108
|
+
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
109
|
+
</div>
|
|
110
|
+
<div class="micl-textfield-outlined micl-textfield--error">
|
|
111
|
+
<label for="mytextfield17">Weight</label>
|
|
112
|
+
<input type="number" id="mytextfield17" value="17800">
|
|
113
|
+
<span class="micl-textfield__suffix" aria-label="Kilograms">kg</span>
|
|
114
|
+
<span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
|
|
115
|
+
<span class="micl-textfield__supporting-text">Too heavy</span>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="micl-pane__column">
|
|
121
|
+
<div class="micl-card-outlined">
|
|
122
|
+
<div class="micl-card__content">
|
|
123
|
+
<div class="micl-textfield-filled">
|
|
124
|
+
<label for="mytextfield21">Timestamp</label>
|
|
125
|
+
<input type="datetime-local" id="mytextfield21">
|
|
126
|
+
</div>
|
|
127
|
+
<div class="micl-textfield-filled" style="--md-sys-textfield-prefix-space:2.5em">
|
|
128
|
+
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
129
|
+
<span class="micl-textfield__prefix" aria-label="Norwegian kroner">NOK</span>
|
|
130
|
+
<label for="mytextfield22">Amount*</label>
|
|
131
|
+
<input type="text" id="mytextfield22" required value="">
|
|
132
|
+
<span class="micl-textfield__supporting-text">In Norwegian kroner</span>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="micl-textfield-filled">
|
|
135
|
+
<span class="micl-textfield__character-counter"></span>
|
|
136
|
+
<span class="micl-textfield__supporting-text micl-textfield__supporting-text--focus">Enter at least twelve characters</span>
|
|
137
|
+
<span class="micl-textfield__prefix" aria-label="Euro">€</span>
|
|
138
|
+
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
139
|
+
<input type="text" id="mytextfield23" maxlength="24">
|
|
140
|
+
<label for="mytextfield23">Label text</label>
|
|
141
|
+
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="micl-textfield-filled">
|
|
144
|
+
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
145
|
+
<label for="mytextfield24">City</label>
|
|
146
|
+
<input type="text" id="mytextfield24" disabled value="Paris">
|
|
147
|
+
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
148
|
+
<span class="micl-textfield__supporting-text">This input field is disabled</span>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="micl-textfield-filled">
|
|
151
|
+
<label for="mytextfield25">Multiline text field</label>
|
|
152
|
+
<textarea id="mytextfield25" maxlength="100">Lorem ipsum dolor sit amet consectetur adipiscing elit</textarea>
|
|
153
|
+
<span class="micl-textfield__character-counter"></span>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="micl-textfield-filled micl-textfield--error">
|
|
156
|
+
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
157
|
+
<label for="mytextfield26">Label text</label>
|
|
158
|
+
<input type="text" id="mytextfield26">
|
|
159
|
+
<span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="micl-textfield-filled micl-textfield--error">
|
|
162
|
+
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
163
|
+
<label for="mytextfield27">City</label>
|
|
164
|
+
<input type="text" id="mytextfield27" maxlength="20" value="Amsterdaaam">
|
|
165
|
+
<span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
|
|
166
|
+
<span class="micl-textfield__supporting-text">Incorrect spelling</span>
|
|
167
|
+
<span class="micl-textfield__character-counter"></span>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
106
171
|
</div>
|
|
107
172
|
</div>
|
|
108
|
-
</
|
|
109
|
-
<
|
|
110
|
-
<div class="micl-
|
|
111
|
-
<div class="micl-
|
|
112
|
-
<
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<input type="text" id="mytextfield24" disabled value="Paris">
|
|
135
|
-
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
136
|
-
<span class="micl-textfield__supporting-text">This input field is disabled</span>
|
|
137
|
-
</div>
|
|
138
|
-
<div class="micl-textfield-filled">
|
|
139
|
-
<label for="mytextfield25">Multiline text field</label>
|
|
140
|
-
<textarea id="mytextfield25" maxlength="100">Lorem ipsum dolor sit amet consectetur adipiscing elit</textarea>
|
|
141
|
-
<span class="micl-textfield__character-counter"></span>
|
|
142
|
-
</div>
|
|
143
|
-
<div class="micl-textfield-filled micl-textfield--error">
|
|
144
|
-
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
145
|
-
<label for="mytextfield26">Label text</label>
|
|
146
|
-
<input type="text" id="mytextfield26">
|
|
147
|
-
<span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
|
|
148
|
-
</div>
|
|
149
|
-
<div class="micl-textfield-filled micl-textfield--error">
|
|
150
|
-
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
151
|
-
<label for="mytextfield27">City</label>
|
|
152
|
-
<input type="text" id="mytextfield27" maxlength="20" value="Amsterdaaam">
|
|
153
|
-
<span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
|
|
154
|
-
<span class="micl-textfield__supporting-text">Incorrect spelling</span>
|
|
155
|
-
<span class="micl-textfield__character-counter"></span>
|
|
173
|
+
</section>
|
|
174
|
+
<section class="micl-pane">
|
|
175
|
+
<div class="micl-card-filled">
|
|
176
|
+
<div class="micl-card__headline-s">
|
|
177
|
+
<h2>Code example</h2>
|
|
178
|
+
</div>
|
|
179
|
+
<div class="micl-card__content docs-code">
|
|
180
|
+
<pre><code>
|
|
181
|
+
<div class="micl-textfield-outlined">
|
|
182
|
+
<label for="id0">Label text</label>
|
|
183
|
+
<input type="text" id="id0">
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<div class="micl-textfield-outlined">
|
|
187
|
+
<label for="id1">Multiline text field</label>
|
|
188
|
+
<textarea id="id1"></textarea>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<div class="micl-textfield-outlined">
|
|
192
|
+
<span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
|
|
193
|
+
<label for="id2">City</label>
|
|
194
|
+
<input type="text" id="id2" disabled value="Paris">
|
|
195
|
+
<span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
|
|
196
|
+
<span class="micl-textfield__supporting-text">Disabled field</span>
|
|
197
|
+
</div>
|
|
198
|
+
</code></pre>
|
|
156
199
|
</div>
|
|
157
200
|
</div>
|
|
158
|
-
</
|
|
159
|
-
</
|
|
201
|
+
</section>
|
|
202
|
+
</main>
|
|
160
203
|
|
|
161
204
|
<script src="micl.js"></script>
|
|
162
205
|
<script src="docs.js"></script>
|
package/layout/README.md
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# Layout
|
|
2
|
+
This guide explains how to use Material-Inspired Component Library (MICL) CSS classes to implement the [Material Design 3 Layout](https://m3.material.io/foundations/layout/understanding-layout/overview) guidelines.
|
|
3
|
+
|
|
4
|
+
## Basic Layout Structure
|
|
5
|
+
|
|
6
|
+
### HTML
|
|
7
|
+
A standard layout is comprised of a **navigation region** and a **body region**. The body region itself is divided into one or more **panes**.
|
|
8
|
+
|
|
9
|
+
```HTML
|
|
10
|
+
<body class="micl-window">
|
|
11
|
+
<nav id="micl-navigationrail">
|
|
12
|
+
...
|
|
13
|
+
</nav>
|
|
14
|
+
<main class="micl-body">
|
|
15
|
+
<section class="micl-pane">
|
|
16
|
+
<header class="micl-appbar">
|
|
17
|
+
...
|
|
18
|
+
</header>
|
|
19
|
+
<div>
|
|
20
|
+
...app content...
|
|
21
|
+
</div>
|
|
22
|
+
</section>
|
|
23
|
+
</main>
|
|
24
|
+
</body>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### CSS
|
|
28
|
+
Import the layout styles into your project:
|
|
29
|
+
|
|
30
|
+
```CSS
|
|
31
|
+
@use "material-inspired-component-library/dist/layout";
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Layout Components Explained
|
|
35
|
+
|
|
36
|
+
### Window
|
|
37
|
+
The **window** is the entire viewport of your application. Add the `micl-window` class to the `<body>` element to apply fundamental layout styles, such as horizontal margins and the background color.
|
|
38
|
+
|
|
39
|
+
For **spatial environments** where the main layout parts are visually separated, add the `micl-window--spatial` class. This makes the `<body>` background visible, allowing you to use a custom background image or color.
|
|
40
|
+
|
|
41
|
+
```HTML
|
|
42
|
+
<body class="micl-window micl-window--spatial" style="background-image:url('landscape.webp')">
|
|
43
|
+
...
|
|
44
|
+
</body>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
### Navigation region
|
|
48
|
+
Use the dedicated [Navigation Rail](../components/navigationrail/README.md) component to display the main destinations in your application.
|
|
49
|
+
|
|
50
|
+
### Body region
|
|
51
|
+
The body region holds the majority of your app's content. Use the `<main>` element with the `micl-body` class to define this area.
|
|
52
|
+
|
|
53
|
+
#### Panes
|
|
54
|
+
Panes divide the body region into 1 to 3 distinct vertical areas. Use an element like the `<section>` element with the `micl-pane` class to create a pane with a **flexible width** that adapts to its content. To create a pane with a **fixed width**, add the `micl-pane--fixed` class.
|
|
55
|
+
|
|
56
|
+
To ensure that flexible panes distribute space evenly among themselves, add the `micl-body--evenly` class to the `micl-body` container.
|
|
57
|
+
|
|
58
|
+
##### Responsive pane behavior
|
|
59
|
+
Panes respond to window width changes by either stacking or becoming hidden. The following classes control this behavior:
|
|
60
|
+
|
|
61
|
+
###### Hiding panes
|
|
62
|
+
These classes hide a pane based on the window's size, following Material Design's responsive breakpoints.
|
|
63
|
+
|
|
64
|
+
| CSS class | Description |
|
|
65
|
+
| --------- | ----------- |
|
|
66
|
+
| micl-pane--hidden-to-medium | Hides the pane in compact-sized windows. |
|
|
67
|
+
| micl-pane--hidden-to-expanded | Hides the pane in compact and medium-sized windows. |
|
|
68
|
+
| micl-pane--hidden-to-large | Hides the pane in compact, medium and expanded-sized windows. |
|
|
69
|
+
| micl-pane--hidden-to-extralarge | Hides the pane in all sizes except extra-large. |
|
|
70
|
+
|
|
71
|
+
###### Stacking panes
|
|
72
|
+
Add one of these classes to the `micl-body` container to determine when panes should stack vertically instead of aligning horizontally.
|
|
73
|
+
|
|
74
|
+
| CSS class | Description |
|
|
75
|
+
| --------- | ----------- |
|
|
76
|
+
| micl-body--stacked-to-medium | Panes stack vertically in compact-sized windows. |
|
|
77
|
+
| micl-body--stacked-to-expanded | Panes stack vertically in compact and medium-sized windows. |
|
|
78
|
+
| micl-body--stacked-to-large | Panes stack vertically in compact, medium, and expanded-sized windows. |
|
|
79
|
+
| micl-body--stacked-to-extralarge | Panes stack vertically in all sizes except extra-large. |
|
|
80
|
+
|
|
81
|
+
###### Columns within panes
|
|
82
|
+
You can further divide the content within a pane into multiple columns by using a `<div>` with the `micl-pane__columns` class. Use the `micl-pane__column` class for each column.
|
|
83
|
+
|
|
84
|
+
```HTML
|
|
85
|
+
<section class="micl-pane">
|
|
86
|
+
<header class="micl-appbar">
|
|
87
|
+
...
|
|
88
|
+
</header>
|
|
89
|
+
<div class="micl-pane__columns">
|
|
90
|
+
<div class="micl-pane__column">...</div>
|
|
91
|
+
<div class="micl-pane__column">...</div>
|
|
92
|
+
</div>
|
|
93
|
+
</section>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
To evenly distribute space between columns, add the `micl-pane__columns--evenly` class to the `micl-pane__columns` container.
|
|
97
|
+
|
|
98
|
+
Add one of these classes to the `micl-pane__columns` container to determine when columns should stack vertically instead of aligning horizontally.
|
|
99
|
+
|
|
100
|
+
| CSS class | Description |
|
|
101
|
+
| --------- | ----------- |
|
|
102
|
+
| micl-pane__columns--stacked-to-medium | Columns stack vertically in compact-sized windows. |
|
|
103
|
+
| micl-pane__columns--stacked-to-expanded | Columns stack vertically in compact and medium-sized windows. |
|
|
104
|
+
| micl-pane__columns--stacked-to-large | Columns stack vertically in compact, medium, and expanded-sized windows. |
|
|
105
|
+
| micl-pane__columns--stacked-to-extralarge | Columns stack vertically in all sizes except extra-large. |
|
|
106
|
+
|
|
107
|
+
## Customizations
|
|
108
|
+
You can customize the layout settings by overriding its global CSS variables. These variables are declared on the `:root` pseudo-class.
|
|
109
|
+
|
|
110
|
+
| Variable name | Default Value | Description |
|
|
111
|
+
| ------------- | ------------- | ----------- |
|
|
112
|
+
| --md-sys-layout-pane-spacer | 24px | |
|
|
113
|
+
|
|
114
|
+
**Example: Changing the space between panes**
|
|
115
|
+
|
|
116
|
+
```HTML
|
|
117
|
+
<body style="--md-sys-layout-pane-spacer:32px">
|
|
118
|
+
<main class="micl-body">
|
|
119
|
+
...
|
|
120
|
+
</main>
|
|
121
|
+
</body>
|
|
122
|
+
```
|