BottomAppBar

La Bottom App Bar est principalement conçue pour afficher la navigation et les actions importantes en bas de l'écran sur mobile.

Utilisation

Importez le composant :

import 'mdui/components/bottom-app-bar.js';

Importez le type TypeScript correspondant :

import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js';

Exemple d'utilisation : (Remarque : le style="position: relative" dans l'exemple est présent uniquement à titre de démonstration ; supprimez-le dans votre code.)

<mdui-bottom-app-bar style="position: relative;">
  <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
  <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
  <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
  <mdui-button-icon icon="image--outlined"></mdui-button-icon>
  <div style="flex-grow: 1"></div>
  <mdui-fab icon="add"></mdui-fab>
</mdui-bottom-app-bar>

Remarques importantes :

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

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-bottom est ajouté à l'élément ciblé par scroll-target.
Lorsqu'il se trouve à l'intérieur du composant <mdui-layout></mdui-layout>. Dans ce cas, aucun padding-bottom n'est ajouté.

Exemples

Dans un conteneur spécifique

Par défaut, la Bottom App Bar s'affiche en bas de la fenêtre.

Si vous souhaitez la placer dans un conteneur spécifique, utilisez l'attribut scroll-target avec un sélecteur CSS ou l'élément DOM d'un conteneur disposant de contenu défilable. La barre s'affichera alors par rapport à son élément parent (vous devez ajouter vous-même position: relative; overflow: hidden sur l'élément parent).

Contenu

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

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

Source

Masquer lors du défilement

En définissant l'attribut scroll-behavior sur hide, la Bottom App Bar se masque lors du défilement vers le bas et réapparaît lors du défilement vers le haut.

Utilisez l'attribut scroll-threshold pour définir le seuil de défilement avant que la barre ne commence à se masquer.

Contenu

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
  >Contenu</mdui-bottom-app-bar>

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

Source

Floating Action Button détaché

Si la Bottom App Bar contient un Floating Action Button, vous pouvez ajouter l'attribut fab-detach pour que, lorsque la barre se masque lors du défilement, le Floating Action Button reste ancré dans le coin inférieur droit de la page.

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    fab-detach
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-fab-detach"
  >
    <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
    <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
    <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
    <mdui-button-icon icon="image--outlined"></mdui-button-icon>
    <div style="flex-grow: 1"></div>
    <mdui-fab icon="add"></mdui-fab>
  </mdui-bottom-app-bar>

  <div class="example-fab-detach" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`hide`	`hide`	`boolean`	`false`
Si le composant est masqué
`fab-detach`	`fabDetach`	`boolean`	`false`
Indique si le composant `<mdui-fab>` dans la Bottom App Bar doit être détaché de la Bottom App Bar. Si `true`, le `<mdui-fab>` reste visible sur la page lorsque la Bottom App Bar est masquée.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Comportement de défilement. Les valeurs possibles sont : `hide` : Masque 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 Bottom 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

Badge

Chapitre suivant

Button