Estructura de página

UIPage

Pinta un único main enfocable y el enlace para saltar a él, y coloca sidebar y aside en columnas fijas al desplazarse. A 75rem oculta aside y a 54rem oculta sidebar y muestra bar, donde va el UIDrawer. Esta misma guía es su ejemplo: un UIPage no se puede anidar, porque una página sólo tiene un main.

<UIPage layout="docs">
  <snippet name="header">
    <UIHeader bind:brand="brand" bind:items="items">
      <snippet name="actions"><UIThemeToggle /></snippet>
    </UIHeader>
  </snippet>
  <snippet name="bar">
    <UIDrawer title="Contenidos" triggerLabel="Contenidos">
      <UINavigationTree bind:groups="groups" />
    </UIDrawer>
  </snippet>
  <snippet name="sidebar"><UINavigationTree bind:groups="groups" /></snippet>
  <snippet name="aside"><UITableOfContents bind:entries="toc" /></snippet>
  <UIPageHeader title="Instalación" description="Añade el paquete a tu aplicación." />
  <UIProse as="article" bind:html="doc.html" />
  <UIPageNavigation bind:next="{ label: 'Rutas', to: '/routes' }" />
  <snippet name="footer"><UIFooter bind:brand="brand" /></snippet>
</UIPage>

Sus snippets son default, header, notices, bar, sidebar, aside y footer. notices va bajo la cabecera, con el ancho de la página, y no ocupa sitio si su contenido no pinta nada.

UIPageHeader

El título de una página, con su descripción, sus migas y sus acciones. Es el único h1: el de esta guía es uno.

Admite los snippets breadcrumb, actions y default.

UIHeader y UIFooter

La cabecera tiene una altura fija, --ui-header-height. En pantallas estrechas sus enlaces pasan a un menú con popover, que flota y no mueve la página. Una imagen de brand declara width y height para reservar su espacio.

<UIHeader bind:sticky="false" bind:brand="{ name: 'Meeko', href: '/' }"
  bind:items="[{ label: 'Guía', href: '/guide' }, { label: 'API', href: '/api' }]" current="/guide">
  <snippet name="actions"><UIButton size="sm">Entrar</UIButton></snippet>
</UIHeader>
<UIFooter bind:brand="{ name: 'Meeko', href: '/' }" description="Componentes tipados."
  bind:groups="[{ title: 'Producto', items: [{ label: 'Guía', href: '/guide' }] }]" />

Admite los snippets brand, nav, actions y menu.

Admite los snippets brand, about, actions y legal. Los tipos UIPageProps, UIPageHeaderProps, UIHeaderProps, UIFooterProps y UIBrand se exportan desde @meekojs/ui/runtime.