Se usa para seleccionar entre 2 o más vistas.
Se usa en:
Móvil
Tablet
Escritorio
Se crea el elemento personalizado
nav-tab-scrollable
.
Puedes ver su código en
m-js/m-nav-tab-scrollable-js.html
Para reducir los problemas de despliegues transitorios conocidos como fuoc,
se añade la siguiente línea después de los link para estilos:
<link rel="expect" blocking="render" href="#navtab">
,
donde navtab
es el id de cualquier hiperenlace del elemento
personalizado
nav-tab-scrollable
.
Añade al
top-app-bar
el atributo
adicional
con el id para
nav-tab-scrollable
.
Coloca
nav-tab-scrollable
después de
top-app-bar
y de
h1
.
Ponle su
id
.
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> |
Las pestañas están definidas en https://m3.material.io/components/tabs/overview.