TopAppBar

La Top App Bar affiche des informations clés et des actions en haut de la page, offrant une navigation claire et un accès facile aux fonctionnalités.

Utilisation

Importez les composants selon vos besoins :

import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';

Importez les types TypeScript correspondants :

import type { TopAppBar } from 'mdui/components/top-app-bar.js';
import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js';

Exemple d'utilisation : (le style="position: relative" dans l'exemple est uniquement présent à des fins de démonstration, supprimez-le dans le code réel.)

Titre

<mdui-top-app-bar style="position: relative;">
  <mdui-button-icon icon="menu"></mdui-button-icon>
  <mdui-top-app-bar-title>Titre</mdui-top-app-bar-title>
  <div style="flex-grow: 1"></div>
  <mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>

Remarques importantes :

Ce composant utilise par défaut un positionnement position: fixed et ajoute automatiquement un padding-top sur le body pour éviter que le contenu de la page ne soit masqué.

Cependant, dans les deux cas suivants, le positionnement par défaut sera position: absolute :

Lorsque l'attribut scroll-target est spécifié. Dans ce cas, le padding-top est ajouté à l'élément cible de scroll-target.
Lorsqu'il se trouve à l'intérieur du composant <mdui-layout></mdui-layout>. Dans ce cas, aucun padding-top n'est ajouté.

Exemples

Dans un conteneur spécifique

Par défaut, la barre s'affiche en haut de la fenêtre.

Pour la placer dans un conteneur spécifique, utilisez l'attribut scroll-target avec un sélecteur CSS ou un élément DOM du conteneur disposant d'un contenu défilable. La barre s'affichera alors par rapport à son parent (ajoutez position: relative; overflow: hidden sur le parent).

Titre

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar scroll-target=".example-scroll-target">
    <mdui-top-app-bar-title>Titre</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <div class="example-scroll-target" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Source

Variante

Définissez la variante à l'aide de l'attribut variant sur <mdui-top-app-bar>.

Titre

center-aligned

small

medium

large

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar variant="small" scroll-target=".example-variant" class="example-variant-bar">
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titre</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-variant" style="height: 160px;overflow: auto;">
    <div style="height: 1000px">
      <mdui-segmented-button-group selects="single" value="small">
        <mdui-segmented-button value="center-aligned">center-aligned</mdui-segmented-button>
        <mdui-segmented-button value="small">small</mdui-segmented-button>
        <mdui-segmented-button value="medium">medium</mdui-segmented-button>
        <mdui-segmented-button value="large">large</mdui-segmented-button>
      </mdui-segmented-button-group>
    </div>
  </div>
</div>

<script>
  const topAppBar = document.querySelector(".example-variant-bar");
  const segmentedButtonGroup = document.querySelector(".example-variant");

  segmentedButtonGroup.addEventListener("change", (event) => {
    topAppBar.variant = event.target.value;
  });
</script>

Source

Comportement lors du défilement

Utilisez l'attribut scroll-behavior (plusieurs valeurs séparées par des espaces) pour définir le comportement lors du défilement.

Comportements disponibles :

hide : Masque la barre lors du défilement vers le bas, la réaffiche lors du défilement vers le haut.
shrink : Uniquement pour variant="medium" ou "large". Déploie la barre lors du défilement vers le bas, la replie lors du défilement vers le haut.
elevate : Ajoute une ombre lors du défilement vers le bas, la retire en haut de page.

Utilisez scroll-threshold pour définir le nombre de pixels avant le déclenchement. (Note : à ne pas utiliser avec elevate).

Exemple : Masquer lors du défilement

Titre

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior-hide"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titre</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-scroll-behavior-hide" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Source

Exemple : Ajouter une ombre lors du défilement

Titre

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    scroll-behavior="elevate"
    scroll-target=".example-scroll-behavior-elevate"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titre</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-scroll-behavior-elevate" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Source

Exemple : Rétrécir lors du défilement

Titre

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior-shrink"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titre</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-scroll-behavior-shrink" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Source

Exemple : Rétrécir et ajouter une ombre

Titre

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink elevate"
    scroll-target=".example-scroll-behavior-shrink-elevate"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>Titre</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-scroll-behavior-shrink-elevate" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Source

Texte à l'état déployé

Pour variant="medium" ou "large" avec scroll-behavior="shrink", utilisez le slot label-large dans <mdui-top-app-bar-title> pour définir le texte affiché à l'état déployé.

Ceci est le titre en état replié Ceci est le titre en état déplié

<div style="position: relative;overflow: hidden">
  <mdui-top-app-bar
    variant="medium"
    scroll-behavior="shrink elevate"
    scroll-target=".example-label-large-slot"
  >
    <mdui-button-icon icon="menu"></mdui-button-icon>
    <mdui-top-app-bar-title>
      Ceci est le titre en état replié
      <span slot="label-large">Ceci est le titre en état déplié</span>
    </mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-button-icon icon="more_vert"></mdui-button-icon>
  </mdui-top-app-bar>

  <div class="example-label-large-slot" style="height: 160px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Source

`mdui-top-app-bar-title` API

Slots

Nom
Défaut
Titre de la Top App Bar
`label-large`
Texte du titre à l'état étendu

CSS Parts

Nom
`label`
Texte du titre
`label-large`
Texte du titre à l'état étendu

`mdui-top-app-bar` API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`variant`	`variant`	`'center-aligned' \| 'small' \| 'medium' \| 'large'`	`'small'`
Forme de la Top App Bar. Par défaut `small`. Les valeurs possibles incluent : `center-aligned` : Petite Top App Bar, titre centré `small` : Petite Top App Bar `medium` : Top App Bar moyenne `large` : Grande Top App Bar
`hide`	`hide`	`boolean`	`false`
Si le composant est masqué
`shrink`	`shrink`	`boolean`	`false`
Si la barre doit se réduire au style de `variant="small"`, n'est effectif que lorsque `variant="medium"` ou `variant="large"`.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Comportement de défilement. Peut utiliser plusieurs valeurs, séparées par des espaces. Les valeurs possibles incluent : `hide` : Masque lors du défilement `shrink` : S'applique aux Top App Bars moyennes et grandes ; elle se réduit au style d'une petite Top App Bar pendant le défilement `elevate` : Ajoute une ombre lors du défilement
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
Élément sur lequel l'événement de défilement doit être écouté. La valeur peut être un sélecteur CSS, un élément DOM ou un objet JQ. Par défaut, écoute l'événement de défilement de `window`.
`scroll-threshold`	`scrollThreshold`	`number`	-
Seuil de défilement avant activation du comportement, en `px`.
`order`	`order`	`number`	-
Ordre de ce composant dans le Layout `<mdui-layout>`, trié par ordre croissant. La valeur par défaut est `0`.

Événements

Nom
`show`
Se déclenche lorsque le composant commence à s'afficher. Vous pouvez empêcher l'affichage en appelant `event.preventDefault()`.
`shown`
Se déclenche lorsque l'animation d'affichage est terminée.
`hide`
Se déclenche lorsque le composant commence à se masquer. Vous pouvez empêcher le masquage en appelant `event.preventDefault()`.
`hidden`
Se déclenche lorsque l'animation de masquage est terminée.

Slots

Nom
Défaut
Éléments à l'intérieur de la Top App Bar

Propriétés CSS personnalisées

Nom
`--shape-corner`
Taille des coins arrondis du composant. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.
`--z-index`
Valeur CSS `z-index` du composant.

Chapitre précédent

Tooltip

Chapitre suivant

Bibliothèque d'utilitaires jq