Gitiles
Code Review Sign In
gerrit.avm99963.com / hores-external / be50d49a1de3579494650ceb3cad0f04719b087f / . / node_modules / material-design-lite / dist / index.html
blob: e1b1e4ce6b894383752602a974109bec8104d75f [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.0, minimum-scale=1.0">
8 <title>Material Design Lite</title>
9
10 <!-- Add to homescreen -->
11 <link rel="manifest" href="manifest.json">
12
13 <!-- Fallback to homescreen for Chrome <39 on Android -->
14 <meta name="mobile-web-app-capable" content="yes">
15 <meta name="application-name" content="Material Design Lite">
16 <link rel="icon" sizes="192x192" href="./assets/android-desktop.png">
17
18 <!-- Add to homescreen for Safari on iOS -->
19 <meta name="apple-mobile-web-app-capable" content="yes">
20 <meta name="apple-mobile-web-app-status-bar-style" content="black">
21 <meta name="apple-mobile-web-app-title" content="Material Design Lite">
22 <link rel="apple-touch-icon" href="./assets/ios-desktop.png">
23
24 <!-- TODO: Tile icon for Win8 (144x144 + tile color) -->
25 <!-- <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"> -->
26 <!-- <meta name="msapplication-TileColor" content="#3372DF"> -->
27
28 <meta name="theme-color" content="#263238">
29
30 <link rel="shortcut icon" href="./assets/favicon.png">
31 <!-- 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 -->
32 <!--
33 <link rel="canonical" href="http://www.example.com/">
34 -->
35
36 <!-- Page styles -->
37 <link rel="stylesheet" href="./assets/prism-default.css">
38 <link rel="stylesheet" href="./material.min.css">
39 <link rel="stylesheet" href="./assets/main.css">
40
41 <!-- Fonts -->
42 <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'>
43 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
44 </head>
45 <body class="about">
46 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
47 <script>
48 // if (document.location.hostname !== 'localhost' &&
49 // document.location.hostname !== '127.0.0.1' &&
50 // document.location.hostname.search('.corp.') === -1) {
51 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
52 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
53 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
54 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
55 ga('create', 'UA-25993200-9', 'auto');
56 // If a specific component page is loaded directly we'll attribute the
57 // page view to the specific component's page
58 if (window.location.pathname.indexOf('/components/') !== -1 &&
59 window.location.hash.indexOf('-section') !== -1) {
60 ga('send', 'pageview', '/components/' +
61 window.location.hash.split('#')[1].split('/')[0]);
62 } else {
63 ga('send', 'pageview');
64 }
65 // }
66
67 // Setup error tracking before anything else runs.
68 window.onerror = function(message, file, lineNumber, columnNumber, error) {
69 try {
70 if (error !== undefined) {
71 message = error.stack;
72 }
73 ga('send', 'event', 'error', file + ':' + lineNumber, String(message));
74 } catch (e) {
75 // no-op
76 }
77 };
78 </script>
79 <div class="image-preloader"></div>
80 <div class="docs-layout mdl-layout mdl-js-layout">
81 <header class="docs-layout-header mdl-layout__header">
82 <div class="mdl-layout__header-row">
83 <span class="docs-layout-title mdl-layout-title"><a href="./">Material<br>Design<br>Lite</a></span>
84 </div>
85 <div class="docs-navigation__container">
86 <nav class="docs-navigation mdl-navigation">
87 <a href="./index.html" class="mdl-navigation__link about">About</a>
88 <a href="./started/index.html" class="mdl-navigation__link started">Getting Started</a>
89 <a href="./templates/index.html" class="mdl-navigation__link templates">Templates</a>
90 <a href="./components/index.html" class="mdl-navigation__link components">Components</a>
91 <a href="./styles/index.html" class="mdl-navigation__link styles">Styles</a>
92 <a href="./customize/index.html" class="mdl-navigation__link customize">Customize</a>
93 <a href="./showcase/index.html" class="mdl-navigation__link showcase">Showcase</a>
94 <a href="./faq/index.html" class="mdl-navigation__link faq">FAQ</a>
95 <div class="spacer"></div>
96 <a href="https://github.com/google/material-design-lite" class="mdl-navigation__link mdl-navigation__link--icon github"><i class="material-icons">link</i><span>GitHub</span></a>
97 <a href="./started/index.html#download" class="mdl-navigation__link mdl-navigation__link--icon download">
98 <i class="material-icons">&#xE2C4;</i><span>Download</span>
99 <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-button--mini-fab mdl-color--lime-A200">
100 <i class="material-icons">&#xE2C4;</i>
101 </button>
102 </a>
103 </nav>
104 </div>
105 <i class="material-icons scrollindicator scrollindicator--right">&#xE315;</i>
106 <i class="material-icons scrollindicator scrollindicator--left">&#xE314;</i>
107 </header>
108 <main class="docs-layout-content mdl-layout__content mdl-color-text--grey-600">
109 <div class="content mdl-grid mdl-grid--no-spacing" id="content">
110 <div class="subpageheader mdl-cell--12-col"></div>
111
112 <!-- TODO: Try to separate markup and content -->
113<section class="docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
114 <dl>
115 <dt>Material Design Lite</dt>
116 <dd>
117 Material Design Lite lets you add a <a href="http://google.com/design/spec">Material Design</a> look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. <a href="started/index.html">Get started now</a>.
118 </dd>
119 </dl>
120</section>
121
122<section class="about-panel about-panel--templates mdl-cell mdl-cell--12-col" data-target="templates/index.html">
123 Templates
124</section>
125
126<section class="docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
127 <p>
128 The MDL components are created with CSS, JavaScript, and HTML. You can use the components to construct web pages and web apps that are attractive, consistent, and functional. Pages developed with MDL will adhere to modern web design principles like browser portability, device independence, and graceful degradation.
129 </p>
130</section>
131
132<section class="about-panel about-panel--components mdl-color-text--white mdl-cell mdl-cell--6-col" data-target="components/index.html">
133 Components
134</section>
135<section class="about-panel about-panel--styles mdl-color-text--white mdl-cell mdl-cell--6-col" data-target="styles/index.html">
136 Styles
137</section>
138<section class="about-panel about-panel--customize mdl-color-text--white mdl-cell mdl-cell--12-col" data-target="customize/index.html">
139 Customize
140</section>
141
142<p><section class="docs-text-styling about-panel about-panel--text mdl-cell mdl-cell--12-col">
143 <p>
144 The MDL component library includes new versions of common user interface controls such as buttons, check boxes, and text fields, adapted to follow Material Design concepts. The library also includes enhanced and specialized features like cards, column layouts, sliders, spinners, tabs, typography, and more. MDL is free to download and use, and may be used with or without any library or development environment (such as <a href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a>). It is a cross-browser, cross-OS web developer&#39;s toolkit that can be used by anyone who wants to write more productive, portable, and &mdash; most importantly &mdash; usable web pages.
145 </p>
146</section></p>
147<script src="assets/index.js" async></script>
148
149
150 </div>
151 <section class="docs-text-styling download mdl-color--grey-800">
152 <a href="./started/index.html#download" class="mdl-color-text--grey-50">Download Kit</a>
153 </section>
154 <footer class="docs-text-styling docs-footer mdl-mini-footer mdl-color--grey-900">
155 <ul>
156 <li class="mdl-mini-footer--social-btn">
157 <a href="https://twitter.com/googledesign" class="social-btn social-btn__twitter" role="button" title="Twitter"></a>
158 </li>
159 <li class="mdl-mini-footer--social-btn">
160 <a href="https://github.com/google/material-design-lite" class="social-btn social-btn__github" role="button" title="GitHub"></a>
161 </li>
162 <li class="mdl-mini-footer--social-btn">
163 <a href="https://plus.google.com/+googledesign" class="social-btn social-btn__gplus" role="button" title="Google+"></a>
164 </li>
165 </ul>
166 <ul class="docs-link-list">
167 <li><a class="mdl-color-text--grey-600" href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a></li>
168 <li><a class="mdl-color-text--grey-600" href="https://github.com/google/material-design-lite/issues">Help</a></li>
169 </ul>
170 </footer>
171 </main>
172 </div>
173
174 <!-- IE Compatibility shims -->
175 <!--[if lt IE 9]>
176 <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js""></script>
177 <![endif]-->
178
179 <!--[if IE]>
180 <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script>
181 <script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
182 <script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
183 <script src="//cdnjs.cloudflare.com/ajax/libs/flexie/1.0.3/flexie.min.js"></script>
184 <link href="./assets/ie.css" rel="stylesheet">
185 <![endif]-->
186 <!-- end shims -->
187
188
189 <!-- Material Design Lite -->
190 <script src="./material.min.js"></script>
191 <!-- Add Copy-to-CodePen buttons to code blocks -->
192 <script src="./assets/codepen.js"></script>
193 <!-- Enable Prism syntax highlighting -->
194 <script src="./assets/prism.js"></script>
195 <script src="./assets/prism-markup.min.js"></script>
196 <script src="./assets/prism-javascript.min.js"></script>
197 <script src="./assets/prism-css.min.js"></script>
198 <script src="./assets/prism-bash.min.js"></script>
199 <script src="./assets/main.js"></script>
200 <!-- Built with love using Material Design Lite -->
201 </body>
202</html>