Cuando son pocas pestañas, pueden mantenerse fijas.
Se crea el elemento personalizado
nav-tab-fixed
.
Puedes ver su código en
m-js/m-nav-tab-fixed-js.html
Añade al
top-app-bar
el atributo
adicional
con el id para
nav-tab-fixed
.
Coloca
nav-tab-fixed
después de
top-app-bar
y de
h1
.
Ponle su
id
.
Puedes cambiar el ancho de las pestañas cambiando la definición de
--tabWidth
en
estilos.css.
o redefine el valor de --tabWidth en el atributo
style
de la etiquta
nav-tab-fixed
.
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 fijas - 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>fijas</h1> |
36 | |
37 | <button type="button" title="Agregar" |
38 | slot="action" |
39 | class="md-standard-icon-button"> |
40 | <span |
41 | class="material-symbols-outlined"> |
42 | add |
43 | </span> |
44 | </button> |
45 | <button type="button" title="Editar" |
46 | slot="action" |
47 | class="md-standard-icon-button"> |
48 | <span |
49 | class="material-symbols-outlined"> |
50 | edit |
51 | </span> |
52 | </button> |
53 | |
54 | </md-top-app-bar> |
55 | |
56 | <h1 id="headline">Pestañas fijas</h1> |
57 | |
58 | <nav-tab-fixed |
59 | id="tab"></nav-tab-fixed> |
60 | |
61 | <main> |
62 | <p> |
63 | Esta página usa navegación por |
64 | pestañas filas. Las X que siguen son |
65 | para que veas como se comporta |
66 | cuando se hace scroll. |
67 | </p> |
68 | <p>x</p> |
69 | <p>x</p> |
70 | <p>x</p> |
71 | <p>x</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 | </main> |
92 | |
93 | </body> |
94 | |
95 | </html> |