Gitiles
Code Review Sign In
gerrit.avm99963.com / hores-external / be50d49a1de3579494650ceb3cad0f04719b087f / . / node_modules / material-design-lite / src / index.html
blob: 5b0f88bf8231cecf7493ad2dd843f77384907802 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +0100[diff] [blame^]1<!doctype html>
2<html lang="">
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>Material Design Lite</title>
9
10 <!-- Add to homescreen for Chrome on Android -->
11 <meta name="mobile-web-app-capable" content="yes">
12 <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
13
14 <!-- Add to homescreen for Safari on iOS -->
15 <meta name="apple-mobile-web-app-capable" content="yes">
16 <meta name="apple-mobile-web-app-status-bar-style" content="black">
17 <meta name="apple-mobile-web-app-title" content="Material Design Lite">
18 <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
19
20 <!-- Tile icon for Win8 (144x144 + tile color) -->
21 <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
22 <meta name="msapplication-TileColor" content="#3372DF">
23
24 <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
25 <!--
26 <link rel="canonical" href="http://www.example.com/">
27 -->
28
29 <!-- Page styles -->
30 <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
31
32 <link rel="stylesheet" href="styleguide.css">
33 </head>
34 <body>
35 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-styleguide">
36
37 <div class="mdl-layout__drawer">
38 <span class="mdl-layout-title">Material Design Lite</span>
39 <nav id="main-navigation" class="mdl-navigation">
40 </nav>
41 </div>
42
43 <div class="mdl-layout__content">
44 <div class="styleguide-demo">
45 <h1>Typography</h1>
46 <iframe src="./typography/demo.html" scrolling="no"></iframe>
47 </div>
48
49 <div class="styleguide-demo">
50 <h1>List</h1>
51 <iframe src="./list/demo.html" scrolling="no"></iframe>
52 </div>
53
54 <div class="styleguide-demo">
55 <h1>Palette</h1>
56 <iframe src="./palette/demo.html" scrolling="no"></iframe>
57 </div>
58
59 <div class="styleguide-demo">
60 <h1>Shadows</h1>
61 <iframe src="./shadow/demo.html" scrolling="no"></iframe>
62 </div>
63
64 <div class="styleguide-demo">
65 <h1>Cards</h1>
66 <iframe src="./card/demo.html" scrolling="no"></iframe>
67 </div>
68
69 <div class="styleguide-demo">
70 <h1>Animation</h1>
71 <iframe src="./animation/demo.html" scrolling="no"></iframe>
72 </div>
73
74 <div class="styleguide-demo">
75 <h1>Button</h1>
76 <iframe src="./button/demo.html" scrolling="no"></iframe>
77 </div>
78
79 <div class="styleguide-demo">
80 <h1>Menu</h1>
81 <iframe src="./menu/demo.html" scrolling="no"></iframe>
82 </div>
83
84 <div class="styleguide-demo">
85 <h1>Text Field</h1>
86 <iframe src="./textfield/demo.html" scrolling="no"></iframe>
87 </div>
88
89 <div class="styleguide-demo">
90 <h1>Radio Buttons</h1>
91 <iframe src="./radio/demo.html" scrolling="no"></iframe>
92 </div>
93
94 <div class="styleguide-demo">
95 <h1>Checkbox</h1>
96 <iframe src="./checkbox/demo.html" scrolling="no"></iframe>
97 </div>
98
99 <div class="styleguide-demo">
100 <h1>Switch</h1>
101 <iframe src="./switch/demo.html" scrolling="no"></iframe>
102 </div>
103
104 <div class="styleguide-demo">
105 <h1>Icon Toggle</h1>
106 <iframe src="./icon-toggle/demo.html" scrolling="no"></iframe>
107 </div>
108
109 <div class="styleguide-demo">
110 <h1>Slider</h1>
111 <iframe src="./slider/demo.html" scrolling="no"></iframe>
112 </div>
113
114 <div class="styleguide-demo">
115 <h1>Spinner</h1>
116 <iframe src="./spinner/demo.html" scrolling="no"></iframe>
117 </div>
118
119 <div class="styleguide-demo">
120 <h1>Progress Bar</h1>
121 <iframe src="./progress/demo.html" scrolling="no"></iframe>
122 </div>
123
124 <div class="styleguide-demo">
125 <h1>Layout</h1>
126 <iframe src="./layout/demo.html" scrolling="no"></iframe>
127 </div>
128
129 <div class="styleguide-demo">
130 <h1>Content Tabs</h1>
131 <iframe src="./tabs/demo.html" scrolling="no"></iframe>
132 </div>
133
134 <div class="styleguide-demo">
135 <h1>Icons</h1>
136 <iframe src="./icons/demo.html" scrolling="no"></iframe>
137 </div>
138
139
140 <div class="styleguide-demo">
141 <h1>Tooltip</h1>
142 <iframe src="./tooltip/demo.html" scrolling="no"></iframe>
143 </div>
144
145 <div class="styleguide-demo">
146 <h1>Column Layout</h1>
147 <iframe src="./column-layout/demo.html"></iframe>
148 </div>
149
150 <div class="styleguide-demo">
151 <h1>Footer</h1>
152 <iframe src="./footer/demo.html"></iframe>
153 </div>
154 </div>
155 </div>
156 <!-- build:js scripts/main.min.js -->
157 <script src="mdlComponentHandler.js"></script>
158 <script src="layout/layout.js" async defer></script>
159 <!-- endbuild -->
160
161 <!-- Script to handle sizing the iFrames -->
162 <script>
163 'use strict';
164 var navList = document.getElementById('main-navigation');
165 var totalDemosPendingLoading = 0;
166 sizeDemos();
167
168 function sizeDemos() {
169 var demos = document.querySelectorAll('.styleguide-demo');
170 totalDemosPendingLoading = demos.length;
171 for (var i = 0; i < demos.length; i++) {
172 var demoTitle = demos[i].querySelector('h1').textContent;
173 var anchorLink = 'demo-' + i;
174
175 // Add list item
176 var navAnchor = document.createElement('a');
177 navAnchor.classList.add('mdl-navigation__link');
178 navAnchor.href = '#' + anchorLink;
179 navAnchor.appendChild(document.createTextNode(demoTitle));
180 navList.appendChild(navAnchor);
181
182 var anchor = document.createElement('a');
183 anchor.id = anchorLink;
184 demos[i].insertBefore(anchor , demos[i].querySelector('h1'));
185
186 // Size iframe
187 sizeDemo(demos[i]);
188 }
189 }
190
191 function sizeDemo(rootDemoElement) {
192 var iframe = rootDemoElement.querySelector('iframe');
193 if (iframe === null) {
194 totalDemosPendingLoading--;
195 return;
196 }
197 iframe.onload = function() {
198 var contentHeight = iframe.contentDocument.documentElement.scrollHeight;
199 iframe.style.height = contentHeight + 'px';
200 iframe.classList.add('heightSet');
201 totalDemosPendingLoading--;
202 if (totalDemosPendingLoading <= 0) {
203 document.body.classList.add('demosLoaded');
204 }
205 };
206 }
207 </script>
208 </body>
209</html>