18. Cajón de navegación

Salida

Ábrelo en otra pestaña.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport"
7 content="width=device-width">
8
9 <title>
10 Vista secundaria - PWA con MD
11 </title>
12
13 <meta name="theme-color"
14 content="#fffbfe">
15 <link rel="icon" sizes="32x32"
16 href="favicon.ico">
17 <link rel="manifest"
18 href="site.webmanifest">
19
20 <!-- Configuración de todas las
21 páginas y colores con CSS. -->
22 <link rel="stylesheet"
23 href="css/estilos.css">
24
25 <!-- Para manejar customized
26 built-in elements en Safari -->
27 <script
28 src="ungap/custom-elements.js">
29 </script>
30
31 <!-- Configuración de todas las
32 páginas con JavaSript. -->
33 <script type="module"
34 src="js/configura.js"></script>
35
36</head>
37
38<body>
39
40 <md-top-app-bar class="medium"
41 headline="h1Headline">
42
43 <h1>Secundaria</h1>
44
45 <button is="md-menu-button"
46 slot="navigation"
47 onclick="nav.abre()"></button>
48
49 <button type="button"
50 title="Agregar" slot="action"
51 class="md-standard-icon-button">
52 <span
53 class="material-symbols-outlined">
54 add
55 </span>
56 </button>
57
58 <button type="button"
59 title="Editar" slot="action"
60 class="md-standard-icon-button">
61 <span
62 class="material-symbols-outlined">
63 edit
64 </span>
65 </button>
66
67 <button is="md-overflow-button"
68 slot="action"
69 onclick="overflow.alterna(this)">
70 </button>
71
72 </md-top-app-bar>
73
74 <h1 id="h1Headline">
75 Página secundaria
76 </h1>
77
78 <main>
79 <p>
80 Esta es una página secundaria de la
81 app. Las X que siguen son para que
82 veas como se comporta cuando se hace
83 scroll.
84 </p>
85 <p>x</p>
86 <p>x</p>
87 <p>x</p>
88 <p>x</p>
89 <p>x</p>
90 <p>x</p>
91 <p>x</p>
92 <p>x</p>
93 <p>x</p>
94 <p>x</p>
95 <p>x</p>
96 <p>x</p>
97 <p>x</p>
98 <p>x</p>
99 <p>x</p>
100 <p>x</p>
101 <p>x</p>
102 <p>x</p>
103 <p>x</p>
104 <p>x</p>
105 <p>x</p>
106 <p>x</p>
107 <p>x</p>
108 </main>
109
110 <md-overflow-menu id="overflow">
111
112 <button type="button">
113 <span
114 class="material-symbols-outlined">
115 star
116 </span>
117 Marcar favorito
118 </button>
119
120 <button type="button">
121 <span
122 class="material-symbols-outlined">
123 delete
124 </span>
125 Eliminar
126 </button>
127
128 </md-overflow-menu>
129
130 <nav-drw id="nav"></nav-drw>
131
132</body>
133
134</html>

Solo para los más rudos

skip_previous skip_next