La página principal de las aplicaciónes móviles incluye una barra de aplicación centrada, cuyo nombre oficial es centered aligned top app bar, que contiene:
El título de la aplicación, que se muestra centrado,
al inicio, de manera opcional, un botón de ícono navegación y
al final, un botón de acción, mostrando un ícono, que puede servir para acceder al perfil del usuario, mostrando su avatar, acceder a la configuración de la app, mostrando un engrane, o alguna otra acción.
Para que el contenido se muestra adecuadamente, se usa el elemento
personalizado
md-top-app-bar,
cuyo comportamiento está definido en la clase
MdTopAppBar.
Hay que añadirle class="center-aligned"
Para el título, dentro de la la barra de aplicación se usa un elemento de
tipo
h1.
El botón opcional de navegación debe llevar al atributo
slot="navigation".
El botón opcional de acción debe llevar al atributo
slot="action".
En los ejemplos con pestañas se muestra su uso.
El botón de perfil debe llevar la clase
avatar.
Para añadir elementos debajo del título, indica su id con el atributo
adicional. Los ejemplos sobre
pestañas indican como.
| 1 | <!DOCTYPE html> |
| 2 | <html lang="es" class="light dark"> |
| 3 | |
| 4 | <head> |
| 5 | |
| 6 | <meta charset="UTF-8"> |
| 7 | <title>PWA con MD</title> |
| 8 | |
| 9 | <!-- Resumen para los motores de búsqueda. --> |
| 10 | <meta name="description" content="Ejemplo de PWA con Material Design"> |
| 11 | |
| 12 | <script src="js/registraServiceWorker.js"></script> |
| 13 | |
| 14 | <meta name="viewport" content="width=device-width"> |
| 15 | |
| 16 | <!-- Color de la barra de navegación de Chrome en dispositivos móviles. --> |
| 17 | <meta name="theme-color" content="#fffbfe"> |
| 18 | |
| 19 | <!-- Ícono para la página web, que normalmente se pone en la raíz del sitio. |
| 20 | Puede ser diferente para cada página. --> |
| 21 | <link rel="icon" sizes="32x32" href="favicon.ico"> |
| 22 | |
| 23 | <!-- Configuración de la PWA para Chrome, Edge y Safari. |
| 24 | Debe ponerse en todas las páginas. --> |
| 25 | <link rel="manifest" href="site.webmanifest"> |
| 26 | |
| 27 | <!-- Permite a los navegadores, que como Safari no soportan el estándar |
| 28 | completo de custom elementsm, lo cumplan totalmente. Debe ponerse en todas |
| 29 | las páginas. --> |
| 30 | <script src="ungap/custom-elements.js"></script> |
| 31 | |
| 32 | <!-- Configuración de todas las páginas con JavaSript. --> |
| 33 | <script type="module" src="js/configura.js"></script> |
| 34 | <link rel="stylesheet" href="css/estilos.css"> |
| 35 | <link rel="stylesheet" href="css/transicion_completa.css"> |
| 36 | |
| 37 | </head> |
| 38 | |
| 39 | <body> |
| 40 | |
| 41 | <md-top-app-bar class="center-aligned"> |
| 42 | |
| 43 | <h1>PWA con MD</h1> |
| 44 | |
| 45 | <button is="md-menu-button" slot="navigation"></button> |
| 46 | |
| 47 | <button type="button" class="md-standard-icon-button avatar" title="Perfil" |
| 48 | slot="action"> |
| 49 | <span class="material-symbols-outlined">account_circle</span> |
| 50 | </button> |
| 51 | |
| 52 | </md-top-app-bar> |
| 53 | |
| 54 | <main> |
| 55 | <p> |
| 56 | Esta es la página principal de la app. Las X que siguen son para que veas |
| 57 | como se comporta cuando se hace scroll. |
| 58 | </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 | <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 | </main> |
| 83 | |
| 84 | <nav-drw></nav-drw> |
| 85 | |
| 86 | </body> |
| 87 | |
| 88 | </html> |
Las barras de aplicación en Material Design están definidas en https://m3.material.io/components/top-app-bar/overview.