Todos los componentes (204)

Armazón de aplicación

Estructura · AppShell · .amset-shell

Qué es y cuándo usarlo

El armazón de una aplicación: cabecera, columna lateral, contenido y pie, en una rejilla de CSS y en un solo componente: header, sider, children y footer.

Cuándo usarlo

La carcasa de una pantalla de gestión: TopBar arriba, SideNav a la izquierda y el contenido en medio.

Cuándo no

Una página pública o una landing: ahí no hay columna ni cabecera de aplicación.

Lo que da sin pedirlo: el contenido es un <main> con id (mainId, content por defecto) y tabindex="-1" —el destino de «saltar al contenido» del TopBar (skipTo)—, la cabecera se queda fija (stickyHeader={false} para que no), y la columna lateral se queda fija justo debajo de ella (mide su alto) con su propio desplazamiento si el menú es más alto que la ventana.

Pantalla estrecha (menos de 48 rem): la columna pasa encima del contenido y deja de ser fija, salvo si es un SideNav: ese ya se queda en su carril de baldosas por debajo de 40 rem y sigue al lado del contenido, fijo y hasta abajo. Un menú que se esconde tras un botón necesita su propio panel (Drawer) y eso se monta fuera.

Teclado: Tab recorre cabecera, columna y contenido en ese orden. Con un TopBar que lleve skipTo, el primer Tab ofrece «Saltar al contenido».

Aspecto fino: --amset-shell-sider-width (16 rem; también con la prop siderWidth) y --amset-shell-gap (relleno del contenido).

Cómo se ve

Dos anillos y un colgante.

<AppShell
  header={<TopBar brand="Joyeria Aurelia" skipTo="contenido" actions={<Avatar name="Lucia Ferrer" size="sm" />} />}
  sider={
    <SideNav
      label="Menú principal"
      sections={secciones}
      active={activo}
      onNavigate={(clave) => setActivo(clave)}
      collapsed={plegado}
      onCollapsedChange={setPlegado}
    />
  }
  siderWidth="auto"
  mainId="contenido"
>
  <Pedidos />
</AppShell>

Props

Se importa con import { AppShell } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	El contenido de la pantalla.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`footer`	`ReactNode`	El pie de la pagina, bajo el contenido.
`header`	`ReactNode`	La barra de arriba: normalmente un `TopBar`. Se queda fija al desplazar.
`mainId`	`string`	El `id` del contenido principal. A el apunta el enlace «saltar al contenido» del `TopBar` (`skipTo`). Por defecto, `content`.
`sider`	`ReactNode`	La columna de la izquierda: normalmente un `SideNav`. Se queda fija bajo la cabecera.
`siderWidth`	`string`	Ancho de la columna de la izquierda. Por defecto, el de `--amset-shell-sider-width` (16 rem).
`stickyHeader`	`boolean`	La cabecera se queda pegada arriba al desplazar. Por defecto, si.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-shell-sider-width`	`16rem`
`--amset-shell-gap`	`var(--amset-space-6)`

Cómo se cambia

.amset-shell {
  --amset-shell-sider-width: ...;
  --amset-shell-gap: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech:

Armazón de aplicación

Qué es y cuándo usarlo

Cuándo usarlo

Cuándo no

Cómo se ve

Pedidos

Pedido 1040

Pedido 1041

Pedido 1042

Pedido 1043

Pedido 1044

Pedido 1045

Props

Mandos

Cómo se cambia

En el banco de pruebas