AppShell
Un diseño de regiones para un producto. Nacido en móvil: cabecera arriba, contenido abajo, navegación en un Drawer; en pantallas anchas, el drawer se convierte en la columna lateral.
En esta página
Playground
Citas
Recordatorio 1: cada semana, 8h.
Recordatorio 2: cada semana, 9h.
Recordatorio 3: cada semana, 10h.
Recordatorio 4: cada semana, 11h.
Recordatorio 5: cada semana, 12h.
Recordatorio 6: cada semana, 13h.
Recordatorio 7: cada semana, 14h.
Recordatorio 8: cada semana, 15h.
Recordatorio 9: cada semana, 16h.
Recordatorio 10: cada semana, 17h.
Quién entró
Fondo
<div class="feitio-app-frame" style="block-size: 22rem; inline-size: min(100%, 24rem); overflow-y: auto; border: var(--feitio-border-width) solid var(--feitio-color-line)"><div class="feitio-app"><header class="feitio-app-header" data-hide-on-scroll><a class="brand" href="#pg-app-content">Producto</a><button type="button" class="feitio-button menu" data-size="small" popovertarget="pg-app" aria-controls="pg-app">Menu<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-menu"></use></svg></button></header><nav class="feitio-drawer feitio-app-nav" id="pg-app" popover aria-label="Menu"><div class="drawer-header"><h2>Menu</h2><button type="button" class="feitio-button close" data-size="small" popovertarget="pg-app" popovertargetaction="hide"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Cerrar</button></div><div class="drawer-body"><nav class="feitio-nav"><div class="group"><p class="group-title">Trabajo</p><ul><li><a href="#playground" aria-current="page"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-calendar"></use></svg>Citas</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-task"></use></svg>Tareas</a></li></ul></div><div class="group"><p class="group-title">Producto</p><ul><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-sliders"></use></svg>Ajustes</a></li></ul></div></nav></div></nav><div class="feitio-app-main" id="pg-app-content" tabindex="-1"><div style="padding: var(--feitio-space-4)"><h3>Citas</h3><p>Recordatorio 1: cada semana, 8h.</p><p>Recordatorio 2: cada semana, 9h.</p><p>Recordatorio 3: cada semana, 10h.</p><p>Recordatorio 4: cada semana, 11h.</p><p>Recordatorio 5: cada semana, 12h.</p><p>Recordatorio 6: cada semana, 13h.</p><p>Recordatorio 7: cada semana, 14h.</p><p>Recordatorio 8: cada semana, 15h.</p><p>Recordatorio 9: cada semana, 16h.</p><p>Recordatorio 10: cada semana, 17h.</p></div><span class="feitio-scroll-fade" aria-hidden="true"></span><a class="feitio-button feitio-back-to-top" data-size="small" href="#pg-app-content"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-down"></use></svg>Arriba</a></div></div></div>Cuándo usarlo
- En cada pantalla de un producto con más de un lugar a donde ir: un dashboard, un admin.
Cuándo no usarlo
- Una página de lectura independiente o documentación: solo el contenido, o DocPage.
Ejemplos
En móvil
Desliza dentro del marco y toca Menú: el panel deslizante se abre desde la derecha, con la cuenta y "Cerrar sesión" en su pie de página. Al final del contenido, ScrollFade y BackToTop.
Mostrar código
<div class="feitio-app-frame">
<div class="feitio-app">
<header class="feitio-app-header" data-hide-on-scroll>
<a class="brand" href="/">Produto</a>
<button type="button" class="feitio-button menu" data-size="small" popovertarget="menu">Menu…</button>
</header>
<nav class="feitio-drawer feitio-app-nav" id="menu" popover aria-label="Principal">…</nav>
<main class="feitio-app-main" id="conteudo" tabindex="-1">
…
<span class="feitio-scroll-fade" aria-hidden="true"></span>
<a class="feitio-button feitio-back-to-top" data-size="small" href="#conteudo">…Topo</a>
</main>
</div>
</div>En pantallas anchas
Desde un marco de 64rem, el panel se convierte en la columna lateral, con su pie de página abajo; Menú desaparece. El ejemplo se encoge a la mitad.
Mostrar código
<!-- o mesmo HTML: a moldura mede a própria largura -->Las regiones
| Región | Lo que va ahí |
|---|---|
brand | El nombre del producto, apuntando al inicio. Obligatorio. |
actions | Opcional, como máximo dos piezas usadas siempre. Nunca la cuenta ni "Cerrar sesión". |
menu | El botón que abre el panel, último, a la derecha. Desaparece en pantallas anchas. |
nav | Una Navegación, dentro de un Panel en móvil. |
nav-footer | Opcional: quién está conectado, "Cerrar sesión", la versión. |
main | La pantalla en sí misma, con la tarea principal primero. Lleva ScrollFade y BackToTop. |
Anatomía
Contenido
- marca: lleva a casa.
- acciones, opcional: lo que se usa todo el tiempo.
- menú: abre el panel lateral, a la derecha, por el pulgar.
- principal: la pantalla en sí misma.
Estados
- Hacer scroll hacia abajo: el encabezado se desliza; hacia arriba, vuelve. Cerca del tope, o con foco dentro de él, permanece visible.
- Pantallas grandes: el contenido se detiene en 72rem y permanece centrado.
Hacer y no hacer
Do
Marca y Menú en el encabezado; la cuenta y "Cerrar sesión" en el pie del panel lateral.
Lo que se usa todo el tiempo queda a mano; el resto, escondido.
Don’t
"Cerrar sesión" anclado en el encabezado, junto al Menú, en cada pantalla.
El mejor lugar en la pantalla para la acción menos utilizada.
Accesibilidad
- Regiones reales:
<header>, un<nav>con nombre,<main>. - El SkipLink es el primer elemento de la página.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-app-frame" | alrededor | Mide su propio ancho y selecciona el formulario. |
class="feitio-app" | obligatorio | La cuadrícula de regiones. |
data-hide-on-scroll | en el encabezado | Se oculta al hacer scroll hacia abajo, en móvil. |
class="feitio-drawer feitio-app-nav" | con popover | Cuadro lateral en móvil, columna en pantallas anchas. |