Tabs
Le composant Onglets permet de regrouper et d'afficher des ensembles de données ou de contenu, facilitant la navigation entre différentes catégories.
Importez les composants selon vos besoins :
import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
Importez les types TypeScript correspondants :
import type { Tabs } from 'mdui/components/tabs.js';
import type { Tab } from 'mdui/components/tab.js';
import type { TabPanel } from 'mdui/components/tab-panel.js';
Exemple d'utilisation :
Onglet 1
Onglet 2
Onglet 3
Panneau d'onglets 1
Panneau d'onglets 2
Panneau d'onglets 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">Onglet 1</mdui-tab>
<mdui-tab value="tab-2">Onglet 2</mdui-tab>
<mdui-tab value="tab-3">Onglet 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panneau d'onglets 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panneau d'onglets 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panneau d'onglets 3</mdui-tab-panel>
</mdui-tabs>
Utilisez l'attribut variant sur <mdui-tabs> pour définir le style.
Onglet 1
Onglet 2
Onglet 3
Panneau d'onglets 1
Panneau d'onglets 2
Panneau d'onglets 3
Onglet 1
Onglet 2
Onglet 3
Panneau d'onglets 1
Panneau d'onglets 2
Panneau d'onglets 3
<mdui-tabs value="tab-1" variant="primary">
<mdui-tab value="tab-1">Onglet 1</mdui-tab>
<mdui-tab value="tab-2">Onglet 2</mdui-tab>
<mdui-tab value="tab-3">Onglet 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panneau d'onglets 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panneau d'onglets 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panneau d'onglets 3</mdui-tab-panel>
</mdui-tabs>
<mdui-tabs value="tab-1" variant="secondary">
<mdui-tab value="tab-1">Onglet 1</mdui-tab>
<mdui-tab value="tab-2">Onglet 2</mdui-tab>
<mdui-tab value="tab-3">Onglet 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panneau d'onglets 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panneau d'onglets 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panneau d'onglets 3</mdui-tab-panel>
</mdui-tabs>
Source
Utilisez l'attribut placement sur <mdui-tabs> pour définir la position des onglets.
top-start
top
top-end
bottom-start
bottom
bottom-end
left-start
left
left-end
right-start
right
right-end
Onglet 1
Onglet 2
Onglet 3
Panneau d'onglets 1
Panneau d'onglets 2
Panneau d'onglets 3
<mdui-select class="example-change-placement" placeholder="Choisir une position" style="width: 180px">
<mdui-menu-item value="top-start">top-start</mdui-menu-item>
<mdui-menu-item value="top">top</mdui-menu-item>
<mdui-menu-item value="top-end">top-end</mdui-menu-item>
<mdui-menu-item value="bottom-start">bottom-start</mdui-menu-item>
<mdui-menu-item value="bottom">bottom</mdui-menu-item>
<mdui-menu-item value="bottom-end">bottom-end</mdui-menu-item>
<mdui-menu-item value="left-start">left-start</mdui-menu-item>
<mdui-menu-item value="left">left</mdui-menu-item>
<mdui-menu-item value="left-end">left-end</mdui-menu-item>
<mdui-menu-item value="right-start">right-start</mdui-menu-item>
<mdui-menu-item value="right">right</mdui-menu-item>
<mdui-menu-item value="right-end">right-end</mdui-menu-item>
</mdui-select>
<mdui-tabs value="tab-1" placement="top-start" class="example-placement">
<mdui-tab value="tab-1">Onglet 1</mdui-tab>
<mdui-tab value="tab-2">Onglet 2</mdui-tab>
<mdui-tab value="tab-3">Onglet 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1" style="height: 260px">Panneau d'onglets 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2" style="height: 260px">Panneau d'onglets 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3" style="height: 260px">Panneau d'onglets 3</mdui-tab-panel>
</mdui-tabs>
<script>
const select = document.querySelector(".example-change-placement");
const tabs = document.querySelector(".example-placement");
select.addEventListener("change", (event) => {
tabs.placement = event.target.value;
});
</script>
Source
Ajoutez l'attribut full-width à <mdui-tabs> pour que les onglets s'étendent sur toute la largeur disponible.
Onglet 1
Onglet 2
Onglet 3
Panneau d'onglets 1
Panneau d'onglets 2
Panneau d'onglets 3
<mdui-tabs value="tab-1" full-width>
<mdui-tab value="tab-1">Onglet 1</mdui-tab>
<mdui-tab value="tab-2">Onglet 2</mdui-tab>
<mdui-tab value="tab-3">Onglet 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panneau d'onglets 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panneau d'onglets 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panneau d'onglets 3</mdui-tab-panel>
</mdui-tabs>
Source
Utilisez l'attribut icon sur <mdui-tab> pour ajouter une icône Material Icons. Ajoutez l'attribut inline pour aligner horizontalement l'icône et le texte.
Onglet 1
Onglet 2
Onglet 3
Panneau d'onglets 1
Panneau d'onglets 2
Panneau d'onglets 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1" icon="library_music">Onglet 1</mdui-tab>
<mdui-tab value="tab-2">
Onglet 2
<mdui-icon slot="icon" name="movie"></mdui-icon>
</mdui-tab>
<mdui-tab value="tab-3" icon="menu_book" inline>Onglet 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panneau d'onglets 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panneau d'onglets 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panneau d'onglets 3</mdui-tab-panel>
</mdui-tabs>
Source
Utilisez le slot badge dans <mdui-tab> pour ajouter un badge.
Onglet 1
99+
Onglet 2
Onglet 3
Panneau d'onglets 1
Panneau d'onglets 2
Panneau d'onglets 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
Onglet 1
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-tab>
<mdui-tab value="tab-2">Onglet 2</mdui-tab>
<mdui-tab value="tab-3">Onglet 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panneau d'onglets 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panneau d'onglets 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panneau d'onglets 3</mdui-tab-panel>
</mdui-tabs>
Source
Utilisez le slot custom dans <mdui-tab> pour personnaliser entièrement le contenu de l'onglet.
Onglet 1
Icon
Onglet 2
Onglet 3
Panneau d'onglets 1
Panneau d'onglets 2
Panneau d'onglets 3
<mdui-tabs value="tab-1">
<mdui-tab value="tab-1">
Onglet 1
<mdui-chip slot="custom" icon="search">Icon</mdui-chip>
</mdui-tab>
<mdui-tab value="tab-2">Onglet 2</mdui-tab>
<mdui-tab value="tab-3">Onglet 3</mdui-tab>
<mdui-tab-panel slot="panel" value="tab-1">Panneau d'onglets 1</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-2">Panneau d'onglets 2</mdui-tab-panel>
<mdui-tab-panel slot="panel" value="tab-3">Panneau d'onglets 3</mdui-tab-panel>
</mdui-tabs>
Source| Attribut HTML | Propriété JavaScript | Reflect | Type | Défaut |
|---|
value | value | | string | - |
Valeur du panneau d'onglets
|
| Nom |
|---|
| Défaut |
Contenu du panneau d'onglets
|
| Attribut HTML | Propriété JavaScript | Reflect | Type | Défaut |
|---|
value | value | | string | - |
Valeur de l'onglet
|
icon | icon | | string | - |
Nom de l'icône Material Icons. Peut également être défini via slot="icon".
|
inline | inline | | boolean | false |
Si l'icône et le texte doivent être disposés horizontalement
|
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 |
Contenu textuel de l'onglet
|
icon |
Icône de l'onglet
|
badge |
Badge
|
custom |
Contenu personnalisé pour tout l'onglet
|
| Attribut HTML | Propriété JavaScript | Reflect | Type | Défaut |
|---|
variant | variant | | 'primary' | 'secondary' | 'primary' |
Forme des onglets. Les valeurs possibles incluent :
primary : Convient aux scénarios où les onglets sont situés sous <mdui-top-app-bar> pour basculer entre les pages principales de l'application.secondary : Convient aux scénarios où les onglets sont situés dans une page pour basculer entre un ensemble de contenus associés.
|
value | value | | string | - |
Valeur de l'élément <mdui-tab> actuellement actif
|
placement | placement | | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'top-start' |
Position des onglets. Par défaut top-start. Les valeurs possibles incluent :
top-start : En haut, aligné à gauchetop : En haut, centrétop-end : En haut, aligné à droitebottom-start : En bas, aligné à gauchebottom : En bas, centrébottom-end : En bas, aligné à droiteleft-start : À gauche, aligné en hautleft : À gauche, centréleft-end : À gauche, aligné en basright-start : À droite, aligné en hautright : À droite, centréright-end : À droite, aligné en bas
|
full-width | fullWidth | | boolean | false |
Indique si le composant doit occuper toute la largeur de l'élément parent
|
| Nom |
|---|
change |
Se déclenche lorsque la valeur sélectionnée change
|
| Nom |
|---|
| Défaut |
Éléments <mdui-tab>
|
panel |
Éléments <mdui-tab-panel>
|
Chapitre suivant
TextField
