Gitiles
Code Review Sign In
gerrit.avm99963.com / hores-external / be50d49a1de3579494650ceb3cad0f04719b087f / . / node_modules / material-design-lite / dist / components / layout / demo.html
blob: 2c2c8a5f05c3c2e90ef133a6744f3394e6ec558f [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +0100[diff] [blame^]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="description" content="A front-end template that helps you build fast, modern mobile web apps.">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <title>layout test</title>
9
10 <!-- Fonts -->
11 <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
12 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
13 rel="stylesheet">
14
15 <!-- Page styles -->
16 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
17 <link rel="stylesheet" href="../../material.min.css">
18 <link rel="stylesheet" href="../../components/demos.css">
19 <script src="../../material.min.js"></script>
20
21
22 <style>
23
24 </style>
25
26 </head>
27 <body>
28
29 <div style="padding-top: 24px;">
30
31
32<style>
33.demo-layout.demo-layout__fixed-drawer {
34 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
35 0 3px 1px -2px rgba(0, 0, 0, 0.2),
36 0 1px 5px 0 rgba(0, 0, 0, 0.12);
37 width: 100%;
38 position: relative;
39 height: 300px;
40}
41.demo-layout.demo-layout__fixed-drawer .mdl-layout__content {
42 background: white;
43}
44</style>
45
46{% include "fixed-drawer.html" %}
47
48<!-- No header, and the drawer stays open on larger screens (fixed drawer). -->
49<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
50 <div class="mdl-layout__drawer">
51 <span class="mdl-layout-title">Title</span>
52 <nav class="mdl-navigation">
53 <a class="mdl-navigation__link" href="">Link</a>
54 <a class="mdl-navigation__link" href="">Link</a>
55 <a class="mdl-navigation__link" href="">Link</a>
56 <a class="mdl-navigation__link" href="">Link</a>
57 </nav>
58 </div>
59 <main class="mdl-layout__content">
60 <div class="page-content"><!-- Your content goes here --></div>
61 </main>
62</div>
63
64<style>
65.demo-layout.demo-layout__fixed-header {
66 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
67 0 3px 1px -2px rgba(0, 0, 0, 0.2),
68 0 1px 5px 0 rgba(0, 0, 0, 0.12);
69 width: 100%;
70 position: relative;
71 height: 300px;
72}
73.demo-layout.demo-layout__fixed-header .mdl-layout__content {
74 background: white;
75}
76</style>
77
78{% include "fixed-header.html" %}
79
80<style>
81.demo-layout.demo-layout__fixed-header-drawer {
82 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
83 0 3px 1px -2px rgba(0, 0, 0, 0.2),
84 0 1px 5px 0 rgba(0, 0, 0, 0.12);
85 width: 100%;
86 position: relative;
87 height: 300px;
88}
89.demo-layout.demo-layout__fixed-header-drawer.mdl-layout__content {
90 background: white;
91}
92</style>
93
94{% include "fixed-header-drawer.html" %}
95
96<!-- The drawer is always open in large screens. The header is always shown,
97 even in small screens. -->
98<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
99 mdl-layout--fixed-header">
100 <header class="mdl-layout__header">
101 <div class="mdl-layout__header-row">
102 <div class="mdl-layout-spacer"></div>
103 <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
104 mdl-textfield--floating-label mdl-textfield--align-right">
105 <label class="mdl-button mdl-js-button mdl-button--icon"
106 for="fixed-header-drawer-exp">
107 <i class="material-icons">search</i>
108 </label>
109 <div class="mdl-textfield__expandable-holder">
110 <input class="mdl-textfield__input" type="text" name="sample"
111 id="fixed-header-drawer-exp">
112 </div>
113 </div>
114 </div>
115 </header>
116 <div class="mdl-layout__drawer">
117 <span class="mdl-layout-title">Title</span>
118 <nav class="mdl-navigation">
119 <a class="mdl-navigation__link" href="">Link</a>
120 <a class="mdl-navigation__link" href="">Link</a>
121 <a class="mdl-navigation__link" href="">Link</a>
122 <a class="mdl-navigation__link" href="">Link</a>
123 </nav>
124 </div>
125 <main class="mdl-layout__content">
126 <div class="page-content"><!-- Your content goes here --></div>
127 </main>
128</div>
129
130<!-- Always shows a header, even in smaller screens. -->
131<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
132 <header class="mdl-layout__header">
133 <div class="mdl-layout__header-row">
134 <!-- Title -->
135 <span class="mdl-layout-title">Title</span>
136 <!-- Add spacer, to align navigation to the right -->
137 <div class="mdl-layout-spacer"></div>
138 <!-- Navigation. We hide it in small screens. -->
139 <nav class="mdl-navigation mdl-layout--large-screen-only">
140 <a class="mdl-navigation__link" href="">Link</a>
141 <a class="mdl-navigation__link" href="">Link</a>
142 <a class="mdl-navigation__link" href="">Link</a>
143 <a class="mdl-navigation__link" href="">Link</a>
144 </nav>
145 </div>
146 </header>
147 <div class="mdl-layout__drawer">
148 <span class="mdl-layout-title">Title</span>
149 <nav class="mdl-navigation">
150 <a class="mdl-navigation__link" href="">Link</a>
151 <a class="mdl-navigation__link" href="">Link</a>
152 <a class="mdl-navigation__link" href="">Link</a>
153 <a class="mdl-navigation__link" href="">Link</a>
154 </nav>
155 </div>
156 <main class="mdl-layout__content">
157 <div class="page-content"><!-- Your content goes here --></div>
158 </main>
159</div>
160
161<style>
162.demo-layout.demo-layout__fixed-tabs {
163 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
164 0 3px 1px -2px rgba(0, 0, 0, 0.2),
165 0 1px 5px 0 rgba(0, 0, 0, 0.12);
166 width: 100%;
167 position: relative;
168 height: 300px;
169}
170.demo-layout.demo-layout__fixed-tabs .mdl-layout__content {
171 background: white;
172}
173</style>
174
175{% include "fixed-tabs.html" %}
176
177<!-- Simple header with fixed tabs. -->
178<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
179 mdl-layout--fixed-tabs">
180 <header class="mdl-layout__header">
181 <div class="mdl-layout__header-row">
182 <!-- Title -->
183 <span class="mdl-layout-title">Title</span>
184 </div>
185 <!-- Tabs -->
186 <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
187 <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
188 <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
189 <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
190 </div>
191 </header>
192 <div class="mdl-layout__drawer">
193 <span class="mdl-layout-title">Title</span>
194 </div>
195 <main class="mdl-layout__content">
196 <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
197 <div class="page-content"><!-- Your content goes here --></div>
198 </section>
199 <section class="mdl-layout__tab-panel" id="fixed-tab-2">
200 <div class="page-content"><!-- Your content goes here --></div>
201 </section>
202 <section class="mdl-layout__tab-panel" id="fixed-tab-3">
203 <div class="page-content"><!-- Your content goes here --></div>
204 </section>
205 </main>
206</div>
207
208<style>
209.demo-layout.demo-layout__scrollable-tabs {
210 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
211 0 3px 1px -2px rgba(0, 0, 0, 0.2),
212 0 1px 5px 0 rgba(0, 0, 0, 0.12);
213 width: 100%;
214 position: relative;
215 height: 300px;
216}
217.demo-layout.demo-layout__scrollable-tabs .mdl-layout__content {
218 background: white;
219}
220</style>
221
222{% include "scrollable-tabs.html" %}
223
224<!-- Simple header with scrollable tabs. -->
225<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
226 <header class="mdl-layout__header">
227 <div class="mdl-layout__header-row">
228 <!-- Title -->
229 <span class="mdl-layout-title">Title</span>
230 </div>
231 <!-- Tabs -->
232 <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
233 <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
234 <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
235 <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
236 <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
237 <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
238 <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
239 </div>
240 </header>
241 <div class="mdl-layout__drawer">
242 <span class="mdl-layout-title">Title</span>
243 </div>
244 <main class="mdl-layout__content">
245 <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
246 <div class="page-content"><!-- Your content goes here --></div>
247 </section>
248 <section class="mdl-layout__tab-panel" id="scroll-tab-2">
249 <div class="page-content"><!-- Your content goes here --></div>
250 </section>
251 <section class="mdl-layout__tab-panel" id="scroll-tab-3">
252 <div class="page-content"><!-- Your content goes here --></div>
253 </section>
254 <section class="mdl-layout__tab-panel" id="scroll-tab-4">
255 <div class="page-content"><!-- Your content goes here --></div>
256 </section>
257 <section class="mdl-layout__tab-panel" id="scroll-tab-5">
258 <div class="page-content"><!-- Your content goes here --></div>
259 </section>
260 <section class="mdl-layout__tab-panel" id="scroll-tab-6">
261 <div class="page-content"><!-- Your content goes here --></div>
262 </section>
263 </main>
264</div>
265
266<style>
267.demo-layout.demo-layout__scrolling-header {
268 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
269 0 3px 1px -2px rgba(0, 0, 0, 0.2),
270 0 1px 5px 0 rgba(0, 0, 0, 0.12);
271 width: 100%;
272 position: relative;
273 height: 300px;
274}
275.demo-layout.demo-layout__scrolling-header .page-content {
276 height: 600px;
277 background: white;
278}
279</style>
280
281{% include "scrolling-header.html" %}
282
283<!-- Uses a header that scrolls with the text, rather than staying
284 locked at the top -->
285<div class="mdl-layout mdl-js-layout">
286 <header class="mdl-layout__header mdl-layout__header--scroll">
287 <div class="mdl-layout__header-row">
288 <!-- Title -->
289 <span class="mdl-layout-title">Title</span>
290 <!-- Add spacer, to align navigation to the right -->
291 <div class="mdl-layout-spacer"></div>
292 <!-- Navigation -->
293 <nav class="mdl-navigation">
294 <a class="mdl-navigation__link" href="">Link</a>
295 <a class="mdl-navigation__link" href="">Link</a>
296 <a class="mdl-navigation__link" href="">Link</a>
297 <a class="mdl-navigation__link" href="">Link</a>
298 </nav>
299 </div>
300 </header>
301 <div class="mdl-layout__drawer">
302 <span class="mdl-layout-title">Title</span>
303 <nav class="mdl-navigation">
304 <a class="mdl-navigation__link" href="">Link</a>
305 <a class="mdl-navigation__link" href="">Link</a>
306 <a class="mdl-navigation__link" href="">Link</a>
307 <a class="mdl-navigation__link" href="">Link</a>
308 </nav>
309 </div>
310 <main class="mdl-layout__content">
311 <div class="page-content"><!-- Your content goes here --></div>
312 </main>
313</div>
314
315<style>
316.demo-layout.demo-layout__transparent {
317 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
318 0 3px 1px -2px rgba(0, 0, 0, 0.2),
319 0 1px 5px 0 rgba(0, 0, 0, 0.12);
320 width: 100%;
321 position: relative;
322 height: 300px;
323}
324</style>
325
326{% include "transparent.html" %}
327
328<!-- Uses a transparent header that draws on top of the layout's background -->
329<style>
330.demo-layout-transparent {
331 background: url('../assets/demos/transparent.jpg') center / cover;
332}
333.demo-layout-transparent .mdl-layout__header,
334.demo-layout-transparent .mdl-layout__drawer-button {
335 /* This background is dark, so we set text to white. Use 87% black instead if
336 your background is light. */
337 color: white;
338}
339</style>
340
341<div class="demo-layout-transparent mdl-layout mdl-js-layout">
342 <header class="mdl-layout__header mdl-layout__header--transparent">
343 <div class="mdl-layout__header-row">
344 <!-- Title -->
345 <span class="mdl-layout-title">Title</span>
346 <!-- Add spacer, to align navigation to the right -->
347 <div class="mdl-layout-spacer"></div>
348 <!-- Navigation -->
349 <nav class="mdl-navigation">
350 <a class="mdl-navigation__link" href="">Link</a>
351 <a class="mdl-navigation__link" href="">Link</a>
352 <a class="mdl-navigation__link" href="">Link</a>
353 <a class="mdl-navigation__link" href="">Link</a>
354 </nav>
355 </div>
356 </header>
357 <div class="mdl-layout__drawer">
358 <span class="mdl-layout-title">Title</span>
359 <nav class="mdl-navigation">
360 <a class="mdl-navigation__link" href="">Link</a>
361 <a class="mdl-navigation__link" href="">Link</a>
362 <a class="mdl-navigation__link" href="">Link</a>
363 <a class="mdl-navigation__link" href="">Link</a>
364 </nav>
365 </div>
366 <main class="mdl-layout__content">
367 </main>
368</div>
369
370<style>
371.demo-layout.demo-layout__waterfall-header {
372 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
373 0 3px 1px -2px rgba(0, 0, 0, 0.2),
374 0 1px 5px 0 rgba(0, 0, 0, 0.12);
375 width: 100%;
376 position: relative;
377 height: 300px;
378}
379.demo-layout.demo-layout__waterfall-header .page-content {
380 height: 600px;
381 background: white;
382}
383</style>
384
385{% include "waterfall-header.html" %}
386
387<!-- Uses a header that contracts as the page scrolls down. -->
388<style>
389.demo-layout-waterfall .mdl-layout__header-row .mdl-navigation__link:last-of-type {
390 padding-right: 0;
391}
392</style>
393
394<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
395 <header class="mdl-layout__header mdl-layout__header--waterfall">
396 <!-- Top row, always visible -->
397 <div class="mdl-layout__header-row">
398 <!-- Title -->
399 <span class="mdl-layout-title">Title</span>
400 <div class="mdl-layout-spacer"></div>
401 <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
402 mdl-textfield--floating-label mdl-textfield--align-right">
403 <label class="mdl-button mdl-js-button mdl-button--icon"
404 for="waterfall-exp">
405 <i class="material-icons">search</i>
406 </label>
407 <div class="mdl-textfield__expandable-holder">
408 <input class="mdl-textfield__input" type="text" name="sample"
409 id="waterfall-exp">
410 </div>
411 </div>
412 </div>
413 <!-- Bottom row, not visible on scroll -->
414 <div class="mdl-layout__header-row">
415 <div class="mdl-layout-spacer"></div>
416 <!-- Navigation -->
417 <nav class="mdl-navigation">
418 <a class="mdl-navigation__link" href="">Link</a>
419 <a class="mdl-navigation__link" href="">Link</a>
420 <a class="mdl-navigation__link" href="">Link</a>
421 <a class="mdl-navigation__link" href="">Link</a>
422 </nav>
423 </div>
424 </header>
425 <div class="mdl-layout__drawer">
426 <span class="mdl-layout-title">Title</span>
427 <nav class="mdl-navigation">
428 <a class="mdl-navigation__link" href="">Link</a>
429 <a class="mdl-navigation__link" href="">Link</a>
430 <a class="mdl-navigation__link" href="">Link</a>
431 <a class="mdl-navigation__link" href="">Link</a>
432 </nav>
433 </div>
434 <main class="mdl-layout__content">
435 <div class="page-content"><!-- Your content goes here --></div>
436 </main>
437</div>
438
439
440 </div>
441 <!-- Built with love using Material Design Lite -->
442
443
444 <script>
445
446 </script>
447 </body>
448</html>