App Shell

Vista previa

App Shell proporciona un diseño de aplicación de nivel superior que organiza un encabezado, una barra lateral, un área de contenido principal y un pie de página en una estructura coherente. Es un primitivo puramente estructural que controla las regiones de diseño y sus landmarks semánticos.

#Uso

Compón Root, Header, Sidebar, Main y Footer.

import * as AppShell from "@solidiom/app-shell"

;<AppShell.Root>
  <AppShell.Header>Encabezado</AppShell.Header>
  <AppShell.Sidebar>Navegación</AppShell.Sidebar>
  <AppShell.Main>Contenido de la página</AppShell.Main>
  <AppShell.Footer>Pie de página</AppShell.Footer>
</AppShell.Root>

#Instalación

Instala el paquete con pnpm add @solidiom/app-shell. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.

#Partes

App Shell expone 5 partes:

• Root — data-part="root". Contenedor del diseño.
• Header — data-part="header". Región de la barra superior de la aplicación.
• Sidebar — data-part="sidebar". Región de navegación lateral.
• Main — data-part="main". Región de contenido principal.
• Footer — data-part="footer". Región inferior.

#Estilos

App Shell incluye los atributos data-scope="app-shell" y data-part en cada parte para seleccionar estilos CSS o recetas. Estiliza el root como un diseño grid o flex y posiciona las regiones mediante los atributos data.

#Teclado y comportamiento

Este primitivo no tiene interacción de teclado propia. Renderiza regiones estructurales; el comportamiento interactivo pertenece al contenido colocado en cada región.

#Composición

App Shell está diseñado para alojar otros primitivos. Coloca una navegación Sidebar, un Banner, un Breadcrumb o cualquier primitivo de contenido dentro de sus regiones.

#SSR e hidratación

App Shell es un elemento de diseño pasivo sin estado interactivo. Se renderiza como HTML estático y no requiere hidratación en el cliente.

solidiom add app-shell