Barra da aplicação

Uma barra da aplicação é um <header> com uma linha lá dentro. As peças estão separadas para as poderes arrumar: appBarNav() para as ligações, appBarSpacer() para empurrar o que vem a seguir para a outra ponta, e appBarActions() para os botões do fim.

Barra básica

sitelo

appBar({ brand: 'sitelo' },
  appBarSpacer(),
  appBarActions(
    button({ size: 'sm', variant: 'soft' }, 'Entrar'),
  ),
)

Com navegação

navLink() é o estilo de ligação de uma barra; current marca a página ativa com aria-current além da cor.

sitelo

appBar({ brand: 'sitelo' },
  appBarNav(
    navLink({ href: '#docs', current: true }, 'Documentação'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Exemplos'),
  ),
  appBarSpacer(),
  appBarActions(
    button({ size: 'sm', variant: 'outline', color: 'neutral' }, 'GitHub'),
    button({ size: 'sm' }, 'Começar'),
  ),
)

Uma marca com símbolo

A marca aceita qualquer marcação e liga para / a não ser que href diga o contrário.

Ssitelo

v2.6.3

appBar({
  href: '#home',
  brand: stack({ direction: 'row', gap: 'sm', inline: true, align: 'center' },
    avatar({ name: 'S', size: 'sm', square: true, color: 'primary' }),
    'sitelo',
  ),
},
  appBarSpacer(),
  appBarActions(chip({ size: 'sm', color: 'neutral' }, 'v2.6.3')),
)

Fixa e desfocada

sticky prende a barra ao topo do contentor de deslocamento; blur torna-a translúcida para o conteúdo passar por baixo. Aqui as duas são mostradas dentro de uma caixa com deslocamento, e não na própria página.

sitelo

sticky

Desloca-me — parágrafo 1.

Desloca-me — parágrafo 2.

Desloca-me — parágrafo 3.

Desloca-me — parágrafo 4.

Desloca-me — parágrafo 5.

Desloca-me — parágrafo 6.

div({ style: 'height: 12rem; overflow: auto; border: 1px solid var(--su-border); border-radius: 0.6rem' },
  appBar({ brand: 'sitelo', sticky: true, blur: true },
    appBarSpacer(),
    appBarActions(chip({ size: 'sm', color: 'primary' }, 'sticky')),
  ),
  container({ size: 'sm', style: 'padding-block: 1rem' },
    stack({ gap: 'md' },
      ...Array.from({ length: 6 }, (unused, index) =>
        text({ variant: 'small', tone: 'muted' }, 'Desloca-me — parágrafo ' + (index + 1) + '.'),
      ),
    ),
  ),
)

Com um painel lateral em ecrãs pequenos

O padrão do costume: ligações na barra no computador, um botão que abre um drawer() no telemóvel. O painel é um popover, por isso o botão não precisa de script.

sitelo

fragment(
  appBar({ brand: 'sitelo' },
    appBarSpacer(),
    appBarActions(
      themeToggle(),
      iconButton({
        label: 'Abrir a navegação',
        variant: 'ghost',
        color: 'neutral',
        popovertarget: 'app-bar-drawer',
        icon: icon('menu'),
      }),
    ),
  ),
  drawer({ id: 'app-bar-drawer', title: 'Navegação' },
    navLink({ href: '#docs' }, 'Documentação'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Exemplos'),
  ),
)

Props

appBar():

Prop	Tipo	Predefinição	Descrição
`brand`	`Child`	—	Conteúdo da ligação de marca no início.
`href`	`string`	`'/'`	Para onde a marca liga.
`sticky`	`boolean`	`false`	Prende a barra ao topo ao deslocar.
`blur`	`boolean`	`false`	Fundo translúcido com desfoque por trás.
`as`	`string`	`'header'`	Elemento a renderizar.

As peças:

Peça	Props	Predefinição	Descrição
`appBarNav`		—	Um elemento nav que guarda as ligações.
`appBarSpacer`		—	Espaço flexível; tudo o que vem depois vai para a outra ponta.
`appBarActions`		—	Grupo de botões no fim.
`navLink`	`href, current, color`	—	Uma ligação com estilo de barra; current marca a página ativa.