Gitiles
Code Review Sign In
gerrit.avm99963.com / hores-external / be50d49a1de3579494650ceb3cad0f04719b087f / . / node_modules / material-design-lite / dist / components / list / demo.html
blob: 7a388b9834cf85f782d38d7adced4c17cc1ce3dd [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>list 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<!-- List items with avatar and action -->
33<style>
34.demo-list-action {
35 width: 300px;
36}
37</style>
38
39<div class="demo-list-action mdl-list">
40 <div class="mdl-list__item">
41 <span class="mdl-list__item-primary-content">
42 <i class="material-icons mdl-list__item-avatar">person</i>
43 <span>Bryan Cranston</span>
44 </span>
45 <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
46 </div>
47 <div class="mdl-list__item">
48 <span class="mdl-list__item-primary-content">
49 <i class="material-icons mdl-list__item-avatar">person</i>
50 <span>Aaron Paul</span>
51 </span>
52 <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
53 </div>
54 <div class="mdl-list__item">
55 <span class="mdl-list__item-primary-content">
56 <i class="material-icons mdl-list__item-avatar">person</i>
57 <span>Bob Odenkirk</span>
58 </span>
59 <span class="mdl-list__item-secondary-content">
60 <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
61 </span>
62 </div>
63</div>
64
65<!-- Icon List -->
66<style>
67.demo-list-icon {
68 width: 300px;
69}
70</style>
71
72<ul class="demo-list-icon mdl-list">
73 <li class="mdl-list__item">
74 <span class="mdl-list__item-primary-content">
75 <i class="material-icons mdl-list__item-icon">person</i>
76 Bryan Cranston
77</span>
78 </li>
79 <li class="mdl-list__item">
80 <span class="mdl-list__item-primary-content">
81 <i class="material-icons mdl-list__item-icon">person</i>
82 Aaron Paul
83 </span>
84 </li>
85 <li class="mdl-list__item">
86 <span class="mdl-list__item-primary-content">
87 <i class="material-icons mdl-list__item-icon">person</i>
88 Bob Odenkirk
89 </span>
90 </li>
91</ul>
92
93<!-- List with avatar and controls -->
94<style>
95.demo-list-control {
96 width: 300px;
97}
98
99.demo-list-radio {
100 display: inline;
101}
102</style>
103
104<ul class="demo-list-control mdl-list">
105 <li class="mdl-list__item">
106 <span class="mdl-list__item-primary-content">
107 <i class="material-icons mdl-list__item-avatar">person</i>
108 Bryan Cranston
109 </span>
110 <span class="mdl-list__item-secondary-action">
111 <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-1">
112 <input type="checkbox" id="list-checkbox-1" class="mdl-checkbox__input" checked />
113 </label>
114 </span>
115 </li>
116 <li class="mdl-list__item">
117 <span class="mdl-list__item-primary-content">
118 <i class="material-icons mdl-list__item-avatar">person</i>
119 Aaron Paul
120 </span>
121 <span class="mdl-list__item-secondary-action">
122 <label class="demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="list-option-1">
123 <input type="radio" id="list-option-1" class="mdl-radio__button" name="options" value="1" checked />
124 </label>
125 </span>
126 </li>
127 <li class="mdl-list__item">
128 <span class="mdl-list__item-primary-content">
129 <i class="material-icons mdl-list__item-avatar">person</i>
130 Bob Odenkirk
131 </span>
132 <span class="mdl-list__item-secondary-action">
133 <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-1">
134 <input type="checkbox" id="list-switch-1" class="mdl-switch__input" checked />
135 </label>
136 </span>
137 </li>
138</ul>
139
140<!-- Simple list -->
141<style>
142.demo-list-item {
143 width: 300px;
144}
145</style>
146
147<ul class="demo-list-item mdl-list">
148 <li class="mdl-list__item">
149 <span class="mdl-list__item-primary-content">
150 Bryan Cranston
151 </span>
152 </li>
153 <li class="mdl-list__item">
154 <span class="mdl-list__item-primary-content">
155 Aaron Paul
156 </span>
157 </li>
158 <li class="mdl-list__item">
159 <span class="mdl-list__item-primary-content">
160 Bob Odenkirk
161 </span>
162 </li>
163</ul>
164
165<!-- Three Line List with secondary info and action -->
166<style>
167.demo-list-three {
168 width: 650px;
169}
170</style>
171
172<ul class="demo-list-three mdl-list">
173 <li class="mdl-list__item mdl-list__item--three-line">
174 <span class="mdl-list__item-primary-content">
175 <i class="material-icons mdl-list__item-avatar">person</i>
176 <span>Bryan Cranston</span>
177 <span class="mdl-list__item-text-body">
178 Bryan Cranston played the role of Walter in Breaking Bad. He is also known
179 for playing Hal in Malcom in the Middle.
180 </span>
181 </span>
182 <span class="mdl-list__item-secondary-content">
183 <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
184 </span>
185 </li>
186 <li class="mdl-list__item mdl-list__item--three-line">
187 <span class="mdl-list__item-primary-content">
188 <i class="material-icons mdl-list__item-avatar">person</i>
189 <span>Aaron Paul</span>
190 <span class="mdl-list__item-text-body">
191 Aaron Paul played the role of Jesse in Breaking Bad. He also featured in
192 the "Need For Speed" Movie.
193 </span>
194 </span>
195 <span class="mdl-list__item-secondary-content">
196 <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
197 </span>
198 </li>
199 <li class="mdl-list__item mdl-list__item--three-line">
200 <span class="mdl-list__item-primary-content">
201 <i class="material-icons mdl-list__item-avatar">person</i>
202 <span>Bob Odenkirk</span>
203 <span class="mdl-list__item-text-body">
204 Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the
205 character, Bob stars in his own show now, called "Better Call Saul".
206 </span>
207 </span>
208 <span class="mdl-list__item-secondary-content">
209 <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
210 </span>
211 </li>
212</ul>
213
214<!-- Two Line List with secondary info and action -->
215<style>
216.demo-list-two {
217 width: 300px;
218}
219</style>
220
221<ul class="demo-list-two mdl-list">
222 <li class="mdl-list__item mdl-list__item--two-line">
223 <span class="mdl-list__item-primary-content">
224 <i class="material-icons mdl-list__item-avatar">person</i>
225 <span>Bryan Cranston</span>
226 <span class="mdl-list__item-sub-title">62 Episodes</span>
227 </span>
228 <span class="mdl-list__item-secondary-content">
229 <span class="mdl-list__item-secondary-info">Actor</span>
230 <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
231 </span>
232 </li>
233 <li class="mdl-list__item mdl-list__item--two-line">
234 <span class="mdl-list__item-primary-content">
235 <i class="material-icons mdl-list__item-avatar">person</i>
236 <span>Aaron Paul</span>
237 <span class="mdl-list__item-sub-title">62 Episodes</span>
238 </span>
239 <span class="mdl-list__item-secondary-content">
240 <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
241 </span>
242 </li>
243 <li class="mdl-list__item mdl-list__item--two-line">
244 <span class="mdl-list__item-primary-content">
245 <i class="material-icons mdl-list__item-avatar">person</i>
246 <span>Bob Odenkirk</span>
247 <span class="mdl-list__item-sub-title">62 Episodes</span>
248 </span>
249 <span class="mdl-list__item-secondary-content">
250 <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
251 </span>
252 </li>
253</ul>
254
255
256 </div>
257 <!-- Built with love using Material Design Lite -->
258
259
260 <script>
261
262 </script>
263 </body>
264</html>