Barre d’application

Une barre d’application est un <header> contenant une ligne. Les pièces sont séparées pour que vous puissiez les arranger : appBarNav() pour les liens, appBarSpacer() pour pousser la suite à l’autre bout, et appBarActions() pour les boutons de fin.

Barre de base

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

Avec navigation

navLink() est le style de lien d’une barre ; current marque la page active avec aria-current en plus de la couleur.

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

La marque accepte n’importe quel balisage, et pointe vers / sauf si href en décide autrement.

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

Collante et floutée

sticky épingle la barre en haut du conteneur de défilement ; blur la rend translucide pour que le contenu passe dessous. Les deux sont montrées ici dans une boîte défilante plutôt que sur la page elle-même.

sitelo
sticky

Faites défiler — paragraphe 1.

Faites défiler — paragraphe 2.

Faites défiler — paragraphe 3.

Faites défiler — paragraphe 4.

Faites défiler — paragraphe 5.

Faites défiler — paragraphe 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' }, 'Faites défiler — paragraphe ' + (index + 1) + '.'),
      ),
    ),
  ),
)

Avec un tiroir sur petits écrans

Le schéma habituel : des liens dans la barre sur ordinateur, un bouton qui ouvre un drawer() sur téléphone. Le tiroir est un popover, donc le bouton n’a besoin d’aucun script.

sitelo
fragment(
  appBar({ brand: 'sitelo' },
    appBarSpacer(),
    appBarActions(
      themeToggle(),
      iconButton({
        label: 'Ouvrir la navigation',
        variant: 'ghost',
        color: 'neutral',
        popovertarget: 'app-bar-drawer',
        icon: icon('menu'),
      }),
    ),
  ),
  drawer({ id: 'app-bar-drawer', title: 'Navigation' },
    navLink({ href: '#docs' }, 'Documentation'),
    navLink({ href: '#ui' }, 'UI'),
    navLink({ href: '#examples' }, 'Exemples'),
  ),
)

Props

appBar() :

PropTypeDéfautDescription
brandChild—Contenu du lien de marque au début.
hrefstring'/'Vers où pointe la marque.
stickybooleanfalseÉpingle la barre en haut au défilement.
blurbooleanfalseFond translucide avec flou d’arrière-plan.
asstring'header'Élément à rendre.

Les pièces :

PiècePropsDéfautDescription
appBarNav—Un élément nav qui porte les liens.
appBarSpacer—Espace flexible ; tout ce qui suit part à l’autre bout.
appBarActions—Groupe de boutons en fin de barre.
navLinkhref, current, color—Un lien stylé pour la barre ; current marque la page active.