> ToolbarTop

ToolbarTop

La ToolbarTop est un composant de navigation et d'action. A utiliser uniquement sur Mobile. Elle dispose de 3 variantes : default, large et compactLarge.

TagsuiInformationsFigmaMobile onlyExemples10StylesDisponibles

Default

TitreSous-titre

export const Default = () => <ToolbarTop title="Titre" sousTitre="Sous-titre" />;

AvecRetourArriere

TitreSous-titre

export const AvecRetourArriere = () => (
  <ToolbarTop title="Titre" sousTitre="Sous-titre" onNavigate={() => router.back()} />
);

SansAvatarEtAvecActions

TitreSous-titre

export const SansAvatarEtAvecActions = () => (
  <ToolbarTop
    title="Titre"
    sousTitre="Sous-titre"
    onNavigate={console.log}
    actions={<ButtonIcon variant="tertiary" size="lg" iconSize="md" icon={'Plus'} onPress={console.log} />}
  />
);

AvecAvatarSansActions

TitreSous-titre

export const AvecAvatarSansActions = () => (
  <ToolbarTop title="Titre" sousTitre="Sous-titre" AvatarProps={{ src: 'https://picsum.photos/100/200' }} />
);

AvecAvatarEtActions

TitreSous-titre

export const AvecAvatarEtActions = () => (
  <ToolbarTop
    title="Titre"
    sousTitre="Sous-titre"
    onNavigate={console.log}
    AvatarProps={{ src: 'https://picsum.photos/100/200' }}
    actions={<ButtonIcon variant="tertiary" size="lg" iconSize="md" icon={'Plus'} onPress={console.log} />}
  />
);

AvecPlusieursActions

TitreSous-titre

export const AvecPlusieursActions = () => (
  <ToolbarTop
    title="Titre"
    sousTitre="Sous-titre"
    onNavigate={console.log}
    AvatarProps={{ src: 'https://picsum.photos/100/200' }}
    actions={
      <>
        <ButtonIcon variant="tertiary" size="lg" iconSize="md" icon={'Plus'} onPress={console.log} />
        <ButtonIcon variant="tertiary" size="lg" iconSize="md" icon={'Download'} onPress={console.log} />
      </>
    }
  />
);

AvecTitreEtSansSousTitre

Titre

export const AvecTitreEtSansSousTitre = () => (
  <ToolbarTop
    title="Titre"
    onNavigate={console.log}
    AvatarProps={{ src: 'https://picsum.photos/100/200' }}
    actions={
      <>
        <ButtonIcon variant="tertiary" size="lg" iconSize="md" icon={'Plus'} onPress={console.log} />
        <ButtonIcon variant="tertiary" size="lg" iconSize="md" icon={'Download'} onPress={console.log} />
      </>
    }
  />
);

AvecBorder

En règle générale, withBorder est appliqué dynamiquement au scroll : la bordure apparaît quand on a scrollé et disparaît en haut de la page.

TitreSous-titre

export const AvecBorder = () => <ToolbarTop title="Titre" sousTitre="Sous-titre" withBorder />;

CompactLarge

Titre compact large

export const CompactLarge = () => <ToolbarTop title="Titre compact large" variant="compactLarge" />;

Large

Titre largeSous-titre

export const Large = () => (
  <ToolbarTop title="Titre large" variant="large" onNavigate={console.log} sousTitre="Sous-titre" />
);

Alveole UI Kit — v1.8.4