Barra applicazione

Una barra applicazione è un <header> con dentro una riga. I pezzi sono separati così puoi disporli: appBarNav() per i link, appBarSpacer() per spingere ciò che segue all’estremità opposta, e appBarActions() per i pulsanti finali.

Barra di base

sitelo

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

Con la navigazione

navLink() è lo stile di link per una barra; current segna la pagina attiva con aria-current oltre che con il colore.

sitelo

appBar({ brand: 'sitelo' },
  appBarNav(
    navLink({ href: '#docs', current: true }, 'Documentazione'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Esempi'),
  ),
  appBarSpacer(),
  appBarActions(
    button({ size: 'sm', variant: 'outline', color: 'neutral' }, 'GitHub'),
    button({ size: 'sm' }, 'Inizia'),
  ),
)

Una marca con un simbolo

La marca accetta qualunque markup, e punta a / a meno che href non dica altrimenti.

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')),
)

Appiccicata e sfocata

sticky fissa la barra in cima al contenitore che scorre; blur la rende traslucida così il contenuto le passa sotto. Qui sono mostrate entrambe dentro un riquadro che scorre, invece che sulla pagina stessa.

sitelo

sticky

Scorrimi — paragrafo 1.

Scorrimi — paragrafo 2.

Scorrimi — paragrafo 3.

Scorrimi — paragrafo 4.

Scorrimi — paragrafo 5.

Scorrimi — paragrafo 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' }, 'Scorrimi — paragrafo ' + (index + 1) + '.'),
      ),
    ),
  ),
)

Con un pannello laterale sugli schermi piccoli

Lo schema consueto: i link nella barra su desktop, un pulsante che apre un drawer() su un telefono. Il pannello è un popover, quindi il pulsante non ha bisogno di alcuno script.

sitelo

fragment(
  appBar({ brand: 'sitelo' },
    appBarSpacer(),
    appBarActions(
      themeToggle(),
      iconButton({
        label: 'Apri la navigazione',
        variant: 'ghost',
        color: 'neutral',
        popovertarget: 'app-bar-drawer',
        icon: icon('menu'),
      }),
    ),
  ),
  drawer({ id: 'app-bar-drawer', title: 'Navigazione' },
    navLink({ href: '#docs' }, 'Documentazione'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Esempi'),
  ),
)

Props

appBar():

Prop	Tipo	Predefinito	Descrizione
`brand`	`Child`	—	Contenuto del link della marca all’inizio.
`href`	`string`	`'/'`	Dove punta la marca.
`sticky`	`boolean`	`false`	Fissa la barra in cima durante lo scorrimento.
`blur`	`boolean`	`false`	Sfondo traslucido con sfocatura dietro.
`as`	`string`	`'header'`	Elemento da renderizzare.

I pezzi:

Pezzo	Props	Predefinito	Descrizione
`appBarNav`		—	Un elemento nav che contiene i link.
`appBarSpacer`		—	Spazio flessibile; tutto ciò che segue va all’estremità opposta.
`appBarActions`		—	Gruppo di pulsanti in coda.
`navLink`	`href, current, color`	—	Un link con lo stile della barra; current segna la pagina attiva.