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

Salida

Ábrelo en otra pestaña.

1<!DOCTYPE html>
2<html lang="es" class="light dark">
3
4<head>
5
6 <meta charset="UTF-8">
7 <title>Pestañas scrollable - 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_pestanas.css">
20 <link rel="expect" blocking="render" href="#navtab">
21
22</head>
23
24<body>
25
26 <md-top-app-bar adicional="tab" headline="headline">
27
28 <h1>scrollable</h1>
29
30 <button type="button" class="md-standard-icon-button" title="Agregar"
31 slot="action">
32 <span class="material-symbols-outlined">add</span>
33 </button>
34 <button type="button" class="md-standard-icon-button" title="Editar"
35 slot="action">
36 <span class="material-symbols-outlined">edit</span>
37 </button>
38
39 </md-top-app-bar>
40
41 <h1 id="headline">Pestañas scrollable</h1>
42
43 <nav-tab-scrollable id="tab"></nav-tab-scrollable>
44
45 <main>
46 <p>
47 Esta página usa navegación por pestañas fijas. Las X que siguen son para que
48 veas como se comporta cuando se hace scroll.
49 </p>
50 <p>x</p>
51 <p>x</p>
52 <p>x</p>
53 <p>x</p>
54 <p>x</p>
55 <p>x</p>
56 <p>x</p>
57 <p>x</p>
58 <p>x</p>
59 <p>x</p>
60 <p>x</p>
61 <p>x</p>
62 <p>x</p>
63 <p>x</p>
64 <p>x</p>
65 <p>x</p>
66 <p>x</p>
67 <p>x</p>
68 <p>x</p>
69 <p>x</p>
70 <p>x</p>
71 <p>x</p>
72 <p>x</p>
73 </main>
74
75</body>
76
77</html>

Solo para los más rudos

skip_previous skip_next