19. navtab.html - Navegación con pestañas scrollable

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 Pestañas scrollable - 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 <link rel="stylesheet"
21 href="css/estilos.css">
22 <script
23 src="ungap/custom-elements.js">
24 </script>
25 <script type="module"
26 src="js/configura.js"></script>
27
28</head>
29
30<body>
31
32 <md-top-app-bar adicional="tab"
33 headline="headline">
34
35 <h1>
36 Pestañas scrollable
37 </h1>
38
39 <button type="button" title="Agregar"
40 slot="action"
41 class="md-standard-icon-button">
42 <span
43 class="material-symbols-outlined">
44 add
45 </span>
46 </button>
47 <button type="button" title="Editar"
48 slot="action"
49 class="md-standard-icon-button">
50 <span
51 class="material-symbols-outlined">
52 edit
53 </span>
54 </button>
55
56 </md-top-app-bar>
57
58 <h1 id="headline">
59 Pestañas scrollable
60 </h1>
61
62 <nav-tab-scrollable
63 id="tab"></nav-tab-scrollable>
64
65 <main>
66 <p>
67 Esta página usa navegación por
68 pestañas fijas. Las X que siguen son
69 para que veas como se comporta
70 cuando se hace scroll.
71 </p>
72 <p>x</p>
73 <p>x</p>
74 <p>x</p>
75 <p>x</p>
76 <p>x</p>
77 <p>x</p>
78 <p>x</p>
79 <p>x</p>
80 <p>x</p>
81 <p>x</p>
82 <p>x</p>
83 <p>x</p>
84 <p>x</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 </main>
96
97</body>
98
99</html>

Solo para los más rudos

skip_previous skip_next