NavigationBar

La Navigation Bar permet de naviguer facilement entre les pages principales d'une application mobile.

Utilisation

Importez les composants :

import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';

Importez les types TypeScript correspondants :

import type { NavigationBar } from 'mdui/components/navigation-bar.js';
import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js';

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

Élément 1

Élément 2

Élément 3

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Élément 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Élément 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Élément 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

Remarques importantes :

Ce composant utilise par défaut un positionnement position: fixed et ajoute automatiquement un style padding-bottom 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 devient 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

Visibilité des libellés

Par défaut, le texte des éléments s'affiche toujours lorsqu'il y a 3 éléments ou moins. Au-delà de 3 éléments, seul le texte de l'élément sélectionné s'affiche.

Élément 1

Élément 2

Élément 3

Élément 1

Élément 2

Élément 3

Élément 4

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Élément 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Élément 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Élément 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

<br/>

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">Élément 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Élément 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="directions_railway" value="item-3">Élément 3</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-4">Élément 4</mdui-navigation-bar-item>
</mdui-navigation-bar>

Source

Utilisez l'attribut label-visibility sur <mdui-navigation-bar> pour ajuster la visibilité du texte :

selected : Affiche le texte uniquement pour l'élément sélectionné
labeled : Affiche toujours le texte
unlabeled : N'affiche jamais le texte

Élément 1

Élément 2

Élément 3

selected

labeled

unlabeled

<mdui-navigation-bar value="item-1" label-visibility="selected" style="position: relative" class="example-label">
  <mdui-navigation-bar-item icon="place" value="item-1">Élément 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Élément 2</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="people" value="item-3">Élément 3</mdui-navigation-bar-item>
</mdui-navigation-bar>

<mdui-segmented-button-group value="selected" selects="single" style="margin-top: 16px">
  <mdui-segmented-button value="selected">selected</mdui-segmented-button>
  <mdui-segmented-button value="labeled">labeled</mdui-segmented-button>
  <mdui-segmented-button value="unlabeled">unlabeled</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  const navigationBar = document.querySelector(".example-label");
  const segmentedButtonGroup = navigationBar.nextElementSibling;

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

Source

Dans un conteneur spécifique

Par défaut, la Navigation Bar s'affiche en bas de page par rapport à la fenêtre active.

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

Élément 1

Élément 2

Élément 3

Contenu de la page

<div style="position: relative;overflow: hidden">
  <mdui-navigation-bar scroll-target=".example-scroll-target" value="item-1">
    <mdui-navigation-bar-item icon="place" value="item-1">Élément 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">Élément 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">Élément 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

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

Source

Masquer lors du défilement

Définissez l'attribut scroll-behavior="hide" sur <mdui-navigation-bar> pour masquer la barre lors du défilement vers le bas et la réafficher lors du défilement vers le haut.

Utilisez scroll-threshold pour définir le nombre de pixels de défilement avant le masquage.

Élément 1

Élément 2

Élément 3

Contenu de la page

<div style="position: relative;overflow: hidden">
  <mdui-navigation-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
    value="item-1"
  >
    <mdui-navigation-bar-item icon="place" value="item-1">Élément 1</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="commute" value="item-2">Élément 2</mdui-navigation-bar-item>
    <mdui-navigation-bar-item icon="people" value="item-3">Élément 3</mdui-navigation-bar-item>
  </mdui-navigation-bar>

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

Source

Icône

Sur <mdui-navigation-bar-item>, utilisez icon pour l'icône de l'état inactif et active-icon pour l'état actif. Utilisez les slots correspondants pour des éléments personnalisés.

Élément 1

Élément 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item
    icon="place--outlined"
    active-icon="place"
    value="item-1"
  >Élément 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item value="item-2">
    Élément 2
    <mdui-icon slot="icon" name="people--outlined"></mdui-icon>
    <mdui-icon slot="active-icon" name="people"></mdui-icon>
  </mdui-navigation-bar-item>
</mdui-navigation-bar>

Source

Lien

Ajoutez l'attribut href à <mdui-navigation-bar-item> pour l'utiliser comme un lien. Les attributs liés aux liens (download, target, rel) sont disponibles.

Élément 1

Élément 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" href="https://www.mdui.org" target="_blank" value="item-1">Élément 1</mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Élément 2</mdui-navigation-bar-item>
</mdui-navigation-bar>

Source

Badge

Utilisez le slot badge dans <mdui-navigation-bar-item> pour ajouter un badge.

Élément 1 99+

Élément 2

<mdui-navigation-bar value="item-1" style="position: relative">
  <mdui-navigation-bar-item icon="place" value="item-1">
    Élément 1
    <mdui-badge slot="badge">99+</mdui-badge>
  </mdui-navigation-bar-item>
  <mdui-navigation-bar-item icon="commute" value="item-2">Élément 2</mdui-navigation-bar-item>
</mdui-navigation-bar>

Source

Attribut HTML	Propriété JavaScript	Type	Défaut
`icon`	`icon`	`string`	-
Nom de l'icône Material Icons pour l'état inactif. Peut également être défini via `slot="icon"`.
`active-icon`	`activeIcon`	`string`	-
Nom de l'icône Material Icons pour l'état actif. Peut également être défini via `slot="active-icon"`.
`value`	`value`	`string`	-
Valeur de l'élément de navigation
`href`	`href`	`string`	-
URL cible du lien. Si cette propriété est définie, le composant sera rendu en tant qu'élément `<a>` et pourra utiliser les attributs liés aux liens.
`download`	`download`	`string`	-
Nom du fichier à télécharger. Remarque : Cette propriété ne s'applique que si l'attribut `href` est défini.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Cible d'ouverture du lien. Les valeurs possibles incluent : `_blank` : Ouvre le lien dans une nouvelle fenêtre `_parent` : Ouvre le lien dans le contexte parent `_self` : Par défaut. Ouvre le lien dans le contexte courant `_top` : Ouvre le lien dans toute la fenêtre Remarque : Cette propriété ne s'applique que si l'attribut `href` est défini.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relation entre le document actuel et le document lié. Les valeurs possibles incluent : `alternate` : Version alternative du document actuel `author` : Auteur du document actuel ou de l'article `bookmark` : Lien permanent vers la section ancêtre la plus proche `external` : Le document référencé n'est pas sur le même site que le document actuel `help` : Lien vers un document d'aide associé `license` : Le contenu principal du document actuel est couvert par la licence de droits d'auteur du fichier référencé `me` : Le document actuel représente le propriétaire du contenu lié `next` : Le document actuel fait partie d'une série, le document référencé est le suivant dans la série `nofollow` : L'auteur ou l'éditeur du document actuel n'approuve pas le fichier référencé `noreferrer` : N'inclut pas l'en-tête `Referer`. Effet similaire à `noopener` `opener` : Si l'hyperlien crée un contexte de navigation de premier niveau (c'est-à-dire que la valeur de l'attribut `target` est `_blank`), crée un contexte de navigation auxiliaire `prev` : Le document actuel fait partie d'une série, le document référencé est le précédent dans la série `search` : Fournit un lien vers une ressource pouvant être utilisée pour rechercher le fichier actuel et ses pages associées `tag` : Fournit une balise (identifiée par l'adresse donnée) applicable au document actuel Remarque : Disponible uniquement lorsque l'attribut `href` est spécifié.
`autofocus`	`autofocus`	`boolean`	`false`
Si le focus doit être automatiquement obtenu après le chargement de la page
`tabindex`	`tabIndex`	`number`	-
Ordre de l'élément lors de la navigation au clavier avec la touche Tab

Nom	Paramètres	Valeur de retour
`click`		`void`
Simule un clic sur l'élément
`focus`	`options: FocusOptions` (Optionnel)	`void`
Place le focus sur l'élément. Vous pouvez passer un objet en paramètre, dont les propriétés incluent : `preventScroll` : Par défaut, après la prise de focus, la page défile pour amener l'élément à l'écran. Si vous ne souhaitez pas que la page défile, vous pouvez définir cette propriété sur `true`.
`blur`		`void`
Retire le focus de l'élément

Nom
`focus`
Se déclenche lorsque l'élément obtient le focus
`blur`
Se déclenche lorsque l'élément perd le focus

Nom
Défaut
Texte de l'élément de navigation
`icon`
Icône
`active-icon`
Icône de l'état actif
`badge`
Badge

Nom
`container`
Conteneur de l'élément de navigation
`indicator`
Indicateur
`badge`
Badge
`icon`
Icône
`active-icon`
Icône de l'état actif
`label`
Texte de l'élément de navigation

Nom
`--shape-corner-indicator`
Taille des coins arrondis de l'indicateur. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.

Attribut HTML	Propriété JavaScript	Type	Défaut
`hide`	`hide`	`boolean`	`false`
Si le composant est masqué
`label-visibility`	`labelVisibility`	`'auto' \| 'selected' \| 'labeled' \| 'unlabeled'`	`'auto'`
État de visibilité du texte. Les valeurs possibles incluent : `auto` : Lorsque le nombre d'options est inférieur ou égal à 3, le texte est toujours affiché ; lorsque le nombre d'options est supérieur à 3, seul le texte de l'état sélectionné est affiché. `selected` : Le texte n'est affiché que dans l'état sélectionné. `labeled` : Le texte est toujours affiché. `unlabeled` : Le texte n'est jamais affiché.
`value`	`value`	`string`	-
Valeur de l'élément `<mdui-navigation-bar-item>` actuellement sélectionné.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
Comportement de défilement. Les valeurs possibles incluent : `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`.

Nom
`change`
Se déclenche lorsque la valeur change
`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.

Nom
Défaut
Composants `<mdui-navigation-bar-item>`

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

Chapitre suivant

NavigationDrawer

NavigationBar

Utilisation

Exemples

Visibilité des libellés

Dans un conteneur spécifique

Masquer lors du défilement

Icône

Lien

Badge

`mdui-navigation-bar-item` API

Propriétés

Méthodes

Événements

Slots

CSS Parts

Propriétés CSS personnalisées

`mdui-navigation-bar` API

Propriétés

Événements

Slots

Propriétés CSS personnalisées