NavigationRail
Le Navigation Rail offre un accès aux différentes pages principales pour les tablettes et les ordinateurs de bureau.
Importez les composants :
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
Importez les types TypeScript correspondants :
import type { NavigationRail } from 'mdui/components/navigation-rail.js';
import type { NavigationRailItem } from 'mdui/components/navigation-rail-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.)
Récent
Images
Bibliothèque
<mdui-navigation-rail value="recent" style="position: relative">
<mdui-navigation-rail-item icon="watch_later--outlined" value="recent">Récent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" value="images">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined" value="library">Bibliothèque</mdui-navigation-rail-item>
</mdui-navigation-rail>
Remarques importantes :
Ce composant utilise par défaut un positionnement position: fixed et ajoute automatiquement un style padding-left ou padding-right 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
contained du composant <mdui-navigation-rail> est true. Dans ce cas, le padding-left ou padding-right est ajouté à l'élément parent.
- Lorsqu'il se trouve à l'intérieur du composant
<mdui-layout></mdui-layout>. Dans ce cas, aucun padding-left ou padding-right n'est ajouté.
Par défaut, le rail s'affiche sur le côté de la fenêtre. Pour le placer dans un conteneur spécifique, ajoutez l'attribut contained. Le rail s'affichera alors par rapport à son parent (ajoutez position: relative sur le parent).
Récent
Images
Bibliothèque
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Récent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Bibliothèque</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenu de la page</div>
</div>
</div>
Source
Définissez l'attribut placement="right" sur <mdui-navigation-rail> pour l'afficher à droite.
Récent
Images
Bibliothèque
<div style="position: relative">
<mdui-navigation-rail placement="right" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Récent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Bibliothèque</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenu de la page</div>
</div>
</div>
Source
Ajoutez l'attribut divider à <mdui-navigation-rail> pour ajouter une ligne de séparation.
Récent
Images
Bibliothèque
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Récent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Bibliothèque</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenu de la page</div>
</div>
</div>
Source
Utilisez les slots top et bottom dans <mdui-navigation-rail> pour ajouter des éléments en haut et en bas.
Récent
Images
Bibliothèque
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-button-icon icon="menu" slot="top"></mdui-button-icon>
<mdui-fab lowered icon="edit--outlined" slot="top"></mdui-fab>
<mdui-button-icon icon="settings" slot="bottom"></mdui-button-icon>
<mdui-navigation-rail-item icon="watch_later--outlined">Récent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Bibliothèque</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 600px;overflow: auto">
<div style="height: 1000px">Contenu de la page</div>
</div>
</div>
Source
Utilisez l'attribut alignment de <mdui-navigation-rail> pour modifier l'alignement vertical des éléments.
Récent
Images
Bibliothèque
start
center
end
<div class="example-alignment" style="position: relative">
<mdui-navigation-rail alignment="start" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Récent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Bibliothèque</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 360px;overflow: auto">
<mdui-segmented-button-group value="start" selects="single">
<mdui-segmented-button value="start">start</mdui-segmented-button>
<mdui-segmented-button value="center">center</mdui-segmented-button>
<mdui-segmented-button value="end">end</mdui-segmented-button>
</mdui-segmented-button-group>
</div>
</div>
<script>
const example = document.querySelector(".example-alignment");
const navigationRail = example.querySelector("mdui-navigation-rail");
const segmentedButtonGroup = example.querySelector("mdui-segmented-button-group");
segmentedButtonGroup.addEventListener("change", (event) => {
navigationRail.alignment = event.target.value;
});
</script>
Source
Sur <mdui-navigation-rail-item>, utilisez icon pour l'icône inactive et active-icon pour l'active. Utilisez les slots correspondants.
Récent
Images
Bibliothèque
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Récent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" active-icon="image--filled">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item>
Bibliothèque
<mdui-icon slot="icon" name="library_music--outlined"></mdui-icon>
<mdui-icon slot="active-icon" name="library_music--filled"></mdui-icon>
</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenu de la page</div>
</div>
</div>
Source
<mdui-navigation-rail-item> peut être utilisé sans texte.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined"></mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenu de la page</div>
</div>
</div>
Source
Ajoutez l'attribut href à <mdui-navigation-rail-item> pour l'utiliser comme un lien. Les attributs liés aux liens (download, target, rel) sont disponibles.
Récent
Images
Bibliothèque
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item
href="https://www.mdui.org"
target="_blank"
icon="watch_later--outlined"
>Récent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Bibliothèque</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenu de la page</div>
</div>
</div>
Source
Utilisez le slot badge dans <mdui-navigation-rail-item> pour ajouter un badge.
Récent
99+
Images
Bibliothèque
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">
Récent
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Bibliothèque</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Contenu de la page</div>
</div>
</div>
Source| Attribut HTML | Propriété JavaScript | Reflect | 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 actuelauthor : Auteur du document actuel ou de l'articlebookmark : Lien permanent vers la section ancêtre la plus procheexternal : Le document référencé n'est pas sur le même site que le document actuelhelp : 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érienofollow : 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 à noopeneropener : 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 auxiliaireprev : Le document actuel fait partie d'une série, le document référencé est le précédent dans la sériesearch : Fournit un lien vers une ressource pouvant être utilisée pour rechercher le fichier actuel et ses pages associéestag : 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
|
| Attribut HTML | Propriété JavaScript | Reflect | Type | Défaut |
|---|
value | value | | string | - |
Valeur de l'élément <mdui-navigation-rail-item> actuellement sélectionné.
|
placement | placement | | 'left' | 'right' | 'left' |
Position du Navigation Rail. Les valeurs possibles incluent :
left : À gaucheright : À droite
|
alignment | alignment | | 'start' | 'center' | 'end' | 'start' |
Alignement des éléments <mdui-navigation-rail-item>. Les valeurs possibles incluent :
start : Aligné en hautcenter : Centréend : Aligné en bas
|
contained | contained | | boolean | false |
Par défaut, le Navigation Rail se positionne par rapport à l'élément body. Lorsque cet attribut est défini sur true, il se positionne par rapport à son élément parent.
Remarque : Lorsque vous définissez cet attribut, vous devez appliquer vous-même le style position: relative; à l'élément parent.
|
divider | divider | | boolean | false |
Si un séparateur doit être ajouté entre le Navigation Rail et le contenu de la page
|
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
|
| Nom |
|---|
| Défaut |
Composants <mdui-navigation-rail-item>
|
top |
Éléments en haut
|
bottom |
Éléments en bas
|
| Nom |
|---|
top |
Conteneur des éléments supérieurs
|
bottom |
Conteneur des éléments inférieurs
|
items |
Conteneur des composants <mdui-navigation-rail-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
NavigationDrawer
