14. one-line.html - Listas con elementos one-line

Las listas de Material Design usan un ul con la clase md-list.
Las listas pueden usar li con las clases one-line, two-line o three-line
Si el elemento es un hipervínculo, el elemento li no lleva clases y en su interior se pone una a con la clase one-line, two-line o three-line
Los elementos de la clase one-line, tienen el siguiente contenido:
- Un encabezado con un elemento span class="headline" que muestra texto resaltado truncado a un renglón.
- Opcionalmente muestran una imagen a la izquierda, que puede ser:
  Un pequeño ícono cuadrado
  - Se añade la clase icon junto a la clase one-line.
  - Se añade un img o un span class="material-symbols-outlined" dentro del elemento con la clase one-line.
  Una imagen cuadrada
  - Se añade la clase image junto a la clase one-line.
  - Se añade un img o un span class="material-symbols-outlined" dentro del elemento con la clase one-line.
  Una imagen rectangular
  - Se añade la clase video junto a la clase one-line.
  - Se añade un img dentro del elemento con la clase one-line.
  El avatar de un usuario (se muestra dentro de un círculo)
  - Se añade la clase avatar junto a la clase one-line.
  - Se añade un img, un label con las iniciales del usuario o un span class="material-symbols-outlined" dentro del elemento con la clase one-line.

Salida


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Listas one-line - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar headline="headline">
26
27	<h1>one-line</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	</md-top-app-bar>
32
33	<h1 id="headline">Listas one-line</h1>
34
35	<main>
36
37	<ul class="md-list">
38
39	<li class="md-one-line">
40	<span class="headline">
41	Ciudad de México
42	</span>
43	</li>
44
45	<li class="md-one-line">
46	<span class="headline">
47	Lorem ipsum dolor sit amet consectetur adipisicing elit.
48	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
49	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
50	alias!
51	</span>
52	</li>
53
54	<li class="md-one-line icon">
55	<span class="material-symbols-outlined">account_balance</span>
56	<span class="headline">
57	Atenas
58	</span>
59	</li>
60
61	<li class="md-one-line avatar">
62	<img alt="Avatar de Ana" src="img/pexels-moises-patrício-10961948.jpg">
63	<span class="headline">
64	Ana
65	</span>
66	</li>
67
68	<li class="md-one-line image">
69	<img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
70	<span class="headline">
71	Neza
72	</span>
73	</li>
74
75	<li class="md-one-line video">
76	<img alt="Ciudad de San Francisco"
77	src="img/pexels-craig-dennis-3701822.jpg">
78	<span class="headline">
79	San Francisco
80	</span>
81	</li>
82
83	<li class="md-one-line video">
84	<img alt="Ciudad de San Francisco"
85	src="img/pexels-craig-dennis-3701822.jpg">
86	<span class="headline">
87	Lorem ipsum dolor sit amet consectetur adipisicing elit.
88	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
89	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
90	</span>
91	</li>
92
93	<li>
94	<a class="md-one-line image" target="_blank" rel=”noreferrer”
95	href="https://culturacolectiva.com/historia/ciudad-neza-su-historia-en-fotografias/">
96	<img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
97	<span class="headline">
98	Neza Link
99	</span>
100	</a>
101	</li>
102
103	</ul>
104
105	<footer>
106	<ul>
107	<li>
108	<p>
109	<small>
110	<a target="_blank" rel=”noreferrer”
111	href="https://www.pexels.com/es-es/foto/nina-mono-cara-sonriente-10961948/">
112	La foto de la niña es de Moises Patrício, publicada en el sitio Pexels.
113	Haz clic en este hipervínculo para más información.
114	</a>
115	</small>
116	</p>
117	</li>
118	<li>
119	<p>
120	<small>
121	<a target="_blank" rel=”noreferrer”
122	href="https://www.pinterest.com.mx/ludresi/">
123	La foto del Coyote de Neza es de Ludres Isan, publicada en el sitio
124	Pinterest. Haz clic en este hipervínculo para más información.
125	</a>
126	</small>
127	</p>
128	</li>
129	<li>
130	<p>
131	<small>
132	<a target="_blank" rel=”noreferrer”
133	href="https://www.pexels.com/es-es/foto/puente-golden-gate-san-francisco-california-3701822/">
134	La foto del puente de San Francisco es de Craig Dennis, publicada en el
135	sitio Pexels. Haz clic en este hipervínculo para más información.
136	</a>
137	</small>
138	</p>
139	</li>
140	</ul>
141	</footer>
142
143	</main>
144
145	<nav-drw></nav-drw>
146
147	</body>
148
149	</html>

Solo para los más rudos

Las listas están definida en https://m3.material.io/components/lists/overview.

skip_previous skip_next