Page structure

UIPage

It paints a single focusable main and the link that skips to it, and keeps sidebar and aside in fixed columns while scrolling. At 75rem it hides aside and at 54rem it hides sidebar and shows bar, where the UIDrawer goes. This very guide is its example: a UIPage cannot be nested, because a page has only one main.

meeko

<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="Contents" triggerLabel="Contents">
      <UINavigationTree bind:groups="groups" />
    </UIDrawer>
  </snippet>
  <snippet name="sidebar"><UINavigationTree bind:groups="groups" /></snippet>
  <snippet name="aside"><UITableOfContents bind:entries="toc" /></snippet>
  <UIPageHeader title="Installation" description="Add the package to your application." />
  <UIProse as="article" bind:html="doc.html" />
  <UIPageNavigation bind:next="{ label: 'Routes', to: '/routes' }" />
  <snippet name="footer"><UIFooter bind:brand="brand" /></snippet>
</UIPage>

UIPage props
Name	Type / default	Description
`layout`	`docs \| dashboard \| landing` docs	Distribution of the columns.
`mainId`	`string` contenido	id of the main, target of the skip link.
`mainLang`	`string`	lang of the main, if its content is in another language.
`skipLabel`	`string`	Text of the skip link. The default value follows the language of the document.
`class / lang / dir`	`HTML attributes`	They reach the root.

Its snippets are default, header, notices, bar, sidebar, aside and footer. notices goes under the header, with the width of the page, and takes no room when its content paints nothing.

The title of a page, with its description, breadcrumb and actions. It is the only h1: the one of this guide is one.

UIPageHeader props
Name	Type / default	Description
`title`	`string`	Required. The h1.
`description`	`string`	Text under the title.
`layout`	`docs \| dashboard \| landing` docs	Size of the title.
`class`	`string`	Additional classes.

It accepts the breadcrumb, actions and default snippets.

The header has a fixed height, --ui-header-height. On narrow screens its links move to a menu with popover, which floats and does not move the page. A brand image declares width and height to reserve its space.

Meeko

meeko

<UIHeader bind:sticky="false" bind:brand="{ name: 'Meeko', href: '/' }"
  bind:items="[{ label: 'Guide', href: '/guide' }, { label: 'API', href: '/api' }]" current="/guide">
  <snippet name="actions"><UIButton size="sm">Sign in</UIButton></snippet>
</UIHeader>
<UIFooter bind:brand="{ name: 'Meeko', href: '/' }" description="Typed components."
  bind:groups="[{ title: 'Product', items: [{ label: 'Guide', href: '/guide' }] }]" />

UIHeader props
Name	Type / default	Description
`brand`	`UIBrand`	name, product, image and target of the brand.
`items`	`readonly UINavigationLink[]`	The links: label and href or to.
`current`	`string`	The current link, when they use href.
`label / menuLabel`	`string`	Name of the navigation and of the menu button.
`sticky`	`boolean` true	Keeps the header fixed while scrolling.
`size`	`UIContainerSize` 2xl	Maximum width.
`class`	`string`	Additional classes.

It accepts the brand, nav, actions and menu snippets.

UIFooter props
Name	Type / default	Description
`brand / description`	`UIBrand / string`	The brand and its text.
`groups`	`readonly UIFooterGroup[]`	Columns of links: title and items.
`items`	`readonly UINavigationLink[]`	Loose links.
`label`	`string`	Name of the navigation.
`size`	`UIContainerSize` 2xl	Maximum width.
`class`	`string`	Additional classes.

It accepts the brand, about, actions and legal snippets. The types UIPageProps, UIPageHeaderProps, UIHeaderProps, UIFooterProps and UIBrand are exported from @meekojs/ui/runtime.

Contents

UIPage

UIPageHeader

UIHeader and UIFooter

Was this page helpful?