# Aperçu Commençons à utiliser mdui avec le CDN et un modèle de page simple. > Vous lisez la documentation de mdui 2 ! > > Pour la documentation de mdui 1, visitez [www.mdui.org/docs/](https://www.mdui.org/docs/). ## Démarrage rapide {#getting-started} La façon la plus simple d'utiliser mdui est d'inclure les fichiers CSS et JS directement depuis un CDN. Pour installer mdui avec npm, consultez la section [Installation](/fr/docs/2/getting-started/installation). **Inclure les fichiers** Ajoutez le code suivant dans la balise `` de votre page : ```html ``` Si vous utilisez l'attribut `icon` d'un composant (par exemple ``), vous devez également inclure le fichier CSS des icônes. Voir [Utiliser les icônes Material Icons](/fr/docs/2/components/icon#usage-material-icons). mdui ne dépend d'aucune bibliothèque tierce. Une fois les fichiers inclus, tout fonctionne. ## Modèle de page minimal {#template} Voici un modèle de page minimal dans lequel vous pouvez ajouter des composants et du contenu pour construire un site. ```html Bonjour le monde ! Bonjour le monde ! ``` # Installation Vous pouvez installer mdui via npm ou l'inclure via CDN. L'installation via npm est recommandée. ## Installation via npm {#npm} ```bash npm install mdui --save ``` ### Importation complète {#full-import} Dans le point d'entrée de votre projet, importez les deux fichiers suivants pour utiliser tous les composants mdui : ```js import 'mdui/mdui.css'; import 'mdui'; ``` Vous pouvez également importer directement les fonctions nécessaires depuis mdui. Par exemple, pour importer la fonction [`snackbar`](/fr/docs/2/functions/snackbar) : ```js import { snackbar } from 'mdui'; ``` Afficher toutes les fonctions importables depuis 'mdui' 
import {
  $,
  dialog,
  alert,
  confirm,
  prompt,
  snackbar,
  getTheme,
  setTheme,
  getColorFromImage,
  setColorScheme,
  removeColorScheme,
  loadLocale,
  setLocale,
  getLocale,
  throttle,
  observeResize,
  breakpoint
} from 'mdui';
 ### Importation sélective {#cherry-picking} Pour optimiser la taille du projet, vous pouvez importer uniquement les composants et fonctions nécessaires. Par exemple, pour utiliser le composant [``](/fr/docs/2/components/button) et la fonction [`snackbar`](/fr/docs/2/functions/snackbar) : ```js // Le fichier CSS doit toujours être importé import 'mdui/mdui.css'; // Importe le composant import 'mdui/components/button.js'; // Importe la fonction snackbar import { snackbar } from 'mdui/functions/snackbar.js'; ``` La page de documentation de chaque composant ou fonction détaille comment l'importer selon vos besoins. Afficher tous les composants et fonctions importables selon vos besoins 
import 'mdui/components/avatar.js';
import 'mdui/components/badge.js';
import 'mdui/components/bottom-app-bar.js';
import 'mdui/components/button.js';
import 'mdui/components/button-icon.js';
import 'mdui/components/card.js';
import 'mdui/components/checkbox.js';
import 'mdui/components/chip.js';
import 'mdui/components/circular-progress.js';
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
import 'mdui/components/dialog.js';
import 'mdui/components/divider.js';
import 'mdui/components/dropdown.js';
import 'mdui/components/fab.js';
import 'mdui/components/icon.js';
import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';
import 'mdui/components/linear-progress.js';
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
import 'mdui/components/navigation-drawer.js';
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
import 'mdui/components/radio.js';
import 'mdui/components/radio-group.js';
import 'mdui/components/range-slider.js';
import 'mdui/components/ripple.js';
import 'mdui/components/segmented-button.js';
import 'mdui/components/segmented-button-group.js';
import 'mdui/components/select.js';
import 'mdui/components/slider.js';
import 'mdui/components/snackbar.js';
import 'mdui/components/switch.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
import 'mdui/components/tabs.js';
import 'mdui/components/text-field.js';
import 'mdui/components/tooltip.js';
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
import { $ } from 'mdui/jq.js';
import { alert } from 'mdui/functions/alert.js';
import { breakpoint } from 'mdui/functions/breakpoint.js';
import { confirm } from 'mdui/functions/confirm.js';
import { dialog } from 'mdui/functions/dialog.js';
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { getLocale } from 'mdui/functions/getLocale.js';
import { getTheme } from 'mdui/functions/getTheme.js';
import { loadLocale } from 'mdui/functions/loadLocale.js';
import { observeResize } from 'mdui/functions/observeResize.js';
import { prompt } from 'mdui/functions/prompt.js';
import { removeColorScheme } from 'mdui/functions/removeColorScheme.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { setTheme } from 'mdui/functions/setTheme.js';
import { snackbar } from 'mdui/functions/snackbar.js';
import { throttle } from 'mdui/functions/throttle.js';
 ## CDN {#cdn} Vous pouvez utiliser mdui directement via CDN à l'aide des balises `` et ` Cliquez-moi ``` ### Utiliser la version module ES {#es-module} L'exemple suivant montre comment utiliser la version module ES de mdui. Vous pouvez importer mdui depuis le CDN en utilisant la syntaxe des modules ES : ```html Cliquez-moi ``` # Démarrage rapide Les composants mdui sont des Web Components standards. Vous pouvez les utiliser comme vous utiliseriez une balise `
`. La documentation de chaque composant décrit en détail son API complète : propriétés, méthodes, événements, slots, CSS Parts, propriétés CSS personnalisées, etc. Ce chapitre présente les bases de l'utilisation des Web Components. ## Attributs et propriétés {#attribute} Il existe des attributs HTML et des propriétés JavaScript. Ils sont généralement liés et restent synchronisés : modifier un attribut HTML met à jour la propriété JavaScript, et vice versa. Les attributs HTML peuvent être définis directement dans le code HTML du composant, et lus ou modifiés via `getAttribute` et `setAttribute` : ```html Cliquez-moi ``` Les propriétés JavaScript peuvent être lues ou modifiées directement sur l'instance du composant : ```html Cliquez-moi ``` Certaines propriétés sont de type booléen. Pour ces propriétés, la présence de l'attribut HTML rend la propriété JavaScript `true`, son absence la rend `false`. Pour des raisons de compatibilité avec certains frameworks, la chaîne `"false"` est également interprétée comme `false`. ```html ``` Parfois, les propriétés sont des tableaux, des objets ou des fonctions. Dans ce cas, il n'y a pas d'attribut HTML correspondant. Par exemple, la propriété [`labelFormatter`](/fr/docs/2/components/slider#attributes-labelFormatter) du composant [``](/fr/docs/2/components/slider) est une fonction, et ne peut être définie qu'en JavaScript : ```html ``` Voici un extrait de la documentation du composant [``](/fr/docs/2/components/slider) à titre d'illustration : | Attribut HTML | Propriété JavaScript | reflect | | ------------- | -------------------- | -------------------------------------------------------------------------------------- | | `name` | `name` | | | `value` | `value` | | | | `labelFormatter` | | Ce tableau montre que `name` a un attribut HTML et une propriété JavaScript, et la colonne `reflect` indique que la modification de la propriété JavaScript met à jour l'attribut HTML. Pour `value`, la modification de la propriété JavaScript ne met pas à jour l'attribut HTML. `labelFormatter` n'existe qu'en tant que propriété JavaScript. ## Méthodes {#method} Certains composants exposent des méthodes publiques que vous pouvez appeler pour réaliser différentes actions. Par exemple, la méthode [`focus()`](/fr/docs/2/components/text-field#methods-focus) du composant [``](/fr/docs/2/components/text-field) permet de donner le focus au champ de texte. ```html ``` Consultez les pages de documentation de chaque composant pour la liste complète des méthodes et de leurs paramètres. ## Événements {#event} Certains composants déclenchent des événements lors d'opérations spécifiques. Par exemple, le composant [``](/fr/docs/2/components/dialog) déclenche l'événement [`open`](/fr/docs/2/components/dialog#events-open) lorsqu'il commence à s'ouvrir. Vous pouvez écouter cet événement pour exécuter des actions personnalisées. ```html Boîte de dialogue ``` Consultez les pages de documentation de chaque composant pour la liste complète des événements et de leurs paramètres. Si vous utilisez mdui dans d'autres frameworks (comme Vue, React, Angular), vous pouvez utiliser la syntaxe du framework pour lier les événements. Cependant, la syntaxe de liaison d'événements de certains frameworks (comme React) ne fonctionne que pour les événements standards (comme `click`), et non pour les événements personnalisés (comme `open`). Dans ce cas, vous devez obtenir une référence à l'élément et utiliser `addEventListener`. Pour plus d'informations sur l'utilisation de mdui avec React, consultez la section [Intégration avec les frameworks - React](/fr/docs/2/frameworks/react). ## Slot {#slot} De nombreux composants fournissent des slots pour insérer du contenu HTML personnalisé. Le slot par défaut est le plus courant. Il s'agit d'un fragment de HTML ou de texte simple à l'intérieur du composant. Par exemple, le slot par défaut de [``](/fr/docs/2/components/button) définit le texte du bouton. "Cliquez-moi" est le contenu du slot par défaut : ```html Cliquez-moi ``` Certains composants possèdent également des slots nommés. Pour les utiliser, spécifiez le nom du slot dans l'attribut `slot` de l'élément HTML. Dans l'exemple suivant, le composant [``](/fr/docs/2/components/icon) a l'attribut `slot="start"`, ce qui signifie qu'il s'agit du slot nommé [`start`](/fr/docs/2/components/button#slots-icon). L'icône sera donc placée à gauche à l'intérieur du composant : ```html Paramètres ``` L'ordre des slots nommés dans le code n'a pas d'importance, tant qu'ils se trouvent à l'intérieur du composant. Le navigateur les placera automatiquement au bon endroit. Consultez les pages de documentation de chaque composant pour la liste des slots disponibles. ## Propriétés CSS personnalisées {#css-custom-properties} Les propriétés CSS personnalisées sont des variables CSS. mdui définit un ensemble de [propriétés CSS personnalisées globales](/fr/docs/2/styles/design-tokens) qui sont utilisées à l'intérieur des composants. En modifiant ces propriétés, vous pouvez modifier le style de tous les composants mdui globalement. Par exemple, le code suivant réduit le rayon des coins arrondis de tous les composants : ```css :root { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` Vous pouvez aussi modifier ces propriétés dans un contexte local. Par exemple, le code suivant ne modifie les rayons que pour l'élément possédant la classe `sharp` et ses enfants : ```css .sharp { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` Certains composants exposent également leurs propres propriétés CSS personnalisées, qui leur sont spécifiques. Ces propriétés ne sont pas préfixées par `--mdui`. Par exemple, le code suivant modifie la propriété `--z-index` du composant [``](/fr/docs/2/components/dialog) : ```css mdui-dialog { --z-index: 3000; } ``` Consultez les pages de documentation de chaque composant pour la liste des propriétés CSS personnalisées supportées. ## CSS Part {#css-part} Les composants mdui utilisent le shadow DOM pour encapsuler les styles et le comportement. Les sélecteurs CSS standards ne peuvent pas cibler les éléments à l'intérieur du shadow DOM. Certains composants ajoutent donc un attribut `part` à leurs éléments internes. Vous pouvez utiliser le sélecteur CSS `::part` pour les cibler et modifier leur style. Par exemple, le code suivant utilise le part [`button`](/fr/docs/2/components/button#cssParts-button) pour modifier le padding du bouton, et les parts [`label`](/fr/docs/2/components/button#cssParts-label), [`icon`](/fr/docs/2/components/button#cssParts-icon), [`end-icon`](/fr/docs/2/components/button#cssParts-end-icon) pour modifier la couleur du texte et des icônes : ```html Bouton ``` Pour connaître la structure des éléments internes et leurs styles par défaut, vous pouvez utiliser les outils de développement du navigateur. Avant d'utiliser les CSS Parts, vérifiez si les propriétés CSS personnalisées globales ou spécifiques au composant peuvent répondre à vos besoins. Si c'est le cas, privilégiez les propriétés CSS personnalisées. Consultez les pages de documentation de chaque composant pour la liste des parts exposés. ## Mécanisme de mise à jour des composants {#update-mechanism} Les composants mdui sont développés avec [Lit](https://lit.dev/), une bibliothèque légère qui simplifie le développement des Web Components. Il est utile de comprendre comment ils sont rendus et mis à jour. Lorsque vous modifiez une propriété d'un composant mdui, un nouveau rendu est déclenché. Cependant, ce processus de rendu n'est pas synchrone. Lorsque vous modifiez plusieurs propriétés en même temps, Lit met en cache ces changements et attend le prochain cycle de mise à jour pour appliquer le rendu. Ainsi, un composant ne fait l'objet que d'un seul rendu, quel que soit le nombre de modifications. De plus, seules les parties du shadow DOM qui ont changé sont mises à jour. Dans l'exemple suivant, nous définissons la propriété JavaScript `disabled` du bouton à `true`, puis nous vérifions immédiatement son attribut HTML. Comme le rendu du composant n'a pas encore eu lieu, l'attribut HTML est toujours `false` : ```js const button = document.querySelector('mdui-button'); button.disabled = true; console.log(button.hasAttribute('disabled')); // false ``` Pour attendre la fin du rendu après une modification de propriété, vous pouvez utiliser la propriété `updateComplete` du composant. Cette propriété retourne une Promise qui se résout lorsque le composant a terminé son rendu : ```js const button = document.querySelector('mdui-button'); button.disabled = true; button.updateComplete.then(() => { console.log(button.hasAttribute('disabled')); // true }); ``` # Support TypeScript mdui est développé avec TypeScript et offre donc un excellent support TypeScript. Toutes les bibliothèques officielles mdui sont livrées avec leurs déclarations de types et peuvent être utilisées directement. ## Type d'instance d'un composant {#instance} Parfois, vous pouvez avoir besoin de transtyper une variable JavaScript en une instance de composant mdui. Vous pouvez importer le type correspondant depuis mdui. Par exemple, pour importer le type Infobulle depuis le fichier du composant : ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Ou depuis mdui directement : ```ts import type { Tooltip } from 'mdui'; ``` Ensuite, vous pouvez transtyper une variable JavaScript en type Infobulle : ```ts const tooltip = document.querySelector('mdui-tooltip') as Tooltip; ``` Votre IDE vous suggérera automatiquement les propriétés et méthodes de `tooltip`. Si vous ajoutez un écouteur d'événement sur `tooltip`, les noms d'événements, leurs types, et la valeur de `this` dans la fonction de rappel seront également suggérés : ```ts tooltip.addEventListener('open', function (event) {}); ``` ## Types d'événements {#event} Chaque composant exporte une interface qui fait correspondre ses noms d'événements aux types d'objets d'événement correspondants. Le nom de l'interface est `${NomComposant}EventMap`. Par exemple, le composant Infobulle exporte une interface `TooltipEventMap` : ```ts export interface TooltipEventMap { open: CustomEvent; opened: CustomEvent; close: CustomEvent; closed: CustomEvent; } ``` Vous pouvez importer cette interface depuis le fichier du composant : ```ts import type { TooltipEventMap } from 'mdui/components/tooltip.js'; ``` Ou directement depuis mdui : ```ts import type { TooltipEventMap } from 'mdui'; ``` Notez que cette interface ne contient que les événements spécifiques au composant. Les composants mdui héritent de `HTMLElement`, donc ils supportent aussi les événements `HTMLElement`. Vous pouvez utiliser un type d'intersection pour obtenir tous les types d'événements d'un composant : ```ts type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap; ``` # Support IDE mdui est optimisé pour VS Code et WebStorm et offre des fonctionnalités telles que l'autocomplétion de code et les infobulles dans ces IDE. ## VS Code {#vscode} ### mdui installé via npm {#vscode-npm} Pour activer le support IDE avec une installation via npm, suivez ces étapes dans votre projet : 1. Créez un répertoire `.vscode` à la racine du projet. 2. Créez un fichier `settings.json` dans le répertoire `.vscode`. 3. Ajoutez le code suivant au fichier `settings.json` : ```json { "html.customData": ["./node_modules/mdui/html-data.en.json"], "css.customData": ["./node_modules/mdui/css-data.en.json"] } ``` Si le fichier `settings.json` existe déjà, ajoutez simplement ces deux lignes à la racine du document JSON. Redémarrez VS Code après la modification. ### mdui utilisé via CDN {#vscode-cdn} Si vous utilisez mdui via CDN, vous pouvez installer l'extension mdui pour VS Code afin d'obtenir le support IDE. Recherchez `mdui` dans la place de marché des extensions de VS Code et installez le premier résultat, ou [cliquez ici pour l'installer](vscode:extension/zdhxiong.mdui). Une fois installée, le support IDE est activé pour tous les projets. Il est recommandé d'installer via npm et de configurer le fichier `settings.json` plutôt que d'installer l'extension, afin de garantir la cohérence du support IDE avec la version de mdui utilisée. ## WebStorm {#webstorm} ### mdui installé via npm {#webstorm-npm} Pour activer le support IDE avec une installation via npm, suivez ces étapes dans votre projet : 1. Ajoutez le code suivant à la racine du fichier `package.json` du projet : ```json { "web-types": ["./node_modules/mdui/web-types.en.json"] } ``` Si la propriété `web-types` existe déjà à la racine du fichier `package.json`, ajoutez simplement `./node_modules/mdui/web-types.en.json` au tableau `web-types`. Redémarrez WebStorm après la modification. ### mdui utilisé via CDN {#webstorm-cdn} Si vous utilisez mdui via CDN, vous pouvez installer le plugin mdui pour WebStorm afin d'obtenir le support IDE. Recherchez `mdui` dans la place de marché des plugins de WebStorm et installez le premier résultat. Une fois installé, le support IDE est activé pour tous les projets. Il est recommandé d'installer via npm pour le support IDE plutôt que d'installer le plugin WebStorm, afin de garantir la cohérence avec la version de mdui utilisée. ## Différences de support entre VS Code et WebStorm {#difference} Il existe quelques différences dans la prise en charge de mdui entre VS Code et WebStorm. Le tableau suivant détaille ces différences : | Emplacement avec autocomplétion et infobulle | VS Code | WebStorm | | -------------------------------------------------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | Noms de balises HTML | | | | Noms d'attributs dans les balises HTML | | | | Valeurs énumérées des attributs HTML | | (pas de prise en charge des commentaires) | | Noms d'événements dans les balises HTML | | | | Valeurs de l'attribut `name` des slots HTML | | | | Noms des `part` dans le sélecteur CSS `::part()` | | | | Noms des propriétés CSS personnalisées internes aux composants | | | | Noms des propriétés CSS personnalisées globales | | | | Noms des classes CSS globales | | | # Localisation Par défaut, mdui utilise l'anglais. Pour utiliser une autre langue, vous devez configurer la localisation. ## Utilisation {#usage} mdui fournit trois fonctions pour la localisation : - [`loadLocale`](/fr/docs/2/functions/loadLocale) : Charge un pack de langue. Reçoit une fonction qui prend un code de langue et retourne une Promise résolue avec le pack de langue correspondant. Appelez cette fonction dans le point d'entrée de votre projet. - [`setLocale`](/fr/docs/2/functions/setLocale) : Change la langue active. Reçoit le nouveau code de langue et retourne une Promise résolue après le chargement du nouveau pack. - [`getLocale`](/fr/docs/2/functions/getLocale) : Obtient le code de la langue active. Exemple d'utilisation : ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import { setLocale } from 'mdui/functions/setLocale.js'; import { getLocale } from 'mdui/functions/getLocale.js'; // Dans le point d'entrée du projet, chargez les packs de langue loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); // Appelez cette fonction pour changer la langue. La Promise est résolue une fois le changement terminé. setLocale('zh-cn').then(() => { console.log(getLocale()); // zh-cn }); ``` ## Événements d'état {#event} Un événement `mdui-localize-status` est déclenché sur `window` au début, à la fin et en cas d'échec d'un changement de langue. Vous pouvez l'écouter pour exécuter des actions personnalisées, comme écrire le code de langue dans un cookie. La propriété `detail.status` de l'événement indique le type de changement. Les valeurs possibles sont `loading`, `ready`, `error` :
detail.status Description
loading

Début du chargement du nouveau pack de langue.

L'objet detail contient :

  • loadingLocale : le code de langue en cours de chargement.
ready

Le nouveau pack de langue a été chargé avec succès.

L'objet detail contient :

  • readyLocale : le code de langue chargé.
error

Le chargement du nouveau pack de langue a échoué.

L'objet detail contient :

  • errorLocale : le code de langue qui a échoué.
  • errorMessage : le message d'erreur.
Exemple d'utilisation : ```js window.addEventListener('mdui-localize-status', (event) => { if (event.detail.status === 'loading') { console.log(`Chargement du pack de langue : ${event.detail.loadingLocale}`); } else if (event.detail.status === 'ready') { console.log( `Pack de langue ${event.detail.readyLocale} chargé avec succès`, ); } else if (event.detail.status === 'error') { console.error( `Échec du chargement du pack ${event.detail.errorLocale} : ${event.detail.errorMessage}`, ); } }); ``` ## Méthodes de chargement des packs de langue {#load-locale} ### Chargement paresseux (Lazy load) {#lazy-load} Utiliser l'[import dynamique](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/import) permet de télécharger le pack de langue uniquement lorsque la langue correspondante est demandée. C'est la méthode recommandée. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); ``` ### Préchargement {#pre-load} Téléchargez tous les packs de langue nécessaires au chargement de la page. Cela rend le changement de langue plus rapide car aucun téléchargement supplémentaire n'est requis. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; const localizedTemplates = new Map([ ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)], ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ### Import statique {#static-imports} Cette méthode intègre tous les packs de langue nécessaires dans le même bundle que le code de votre projet, éliminant ainsi les téléchargements séparés. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import * as locale_zh_cn from 'mdui/locales/zh-cn.js'; import * as locale_zh_tw from 'mdui/locales/zh-tw.js'; const localizedTemplates = new Map([ ['zh-cn', locale_zh_cn], ['zh-tw', locale_zh_tw], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ## Charger les packs de langue via CDN {#cdn} Si vous utilisez mdui via CDN, vous pouvez charger les packs de langue directement depuis le CDN. Exemple : ```html ``` ## Langues supportées {#languages} Actuellement, mdui supporte les langues suivantes (codes de langue) : | Langue | Code | | -------------------------------- | ------ | | Arabe | ar-eg | | Azéri | az-az | | Bulgare | bg-bg | | Bengali (Bangladesh) | bn-bd | | Biélorusse | be-by | | Catalan | ca-es | | Tchèque | cs-cz | | Danois | da-dk | | Allemand | de-de | | Grec | el-gr | | Anglais | en-gb | | Anglais (États-Unis) | en-us | | Espagnol | es-es | | Estonien | et-ee | | Persan | fa-ir | | Finnois | fi-fi | | Français (Belgique) | fr-be | | Français (Canada) | fr-ca | | Français (France) | fr-fr | | Irlandais | ga-ie | | Galicien (Espagne) | gl-es | | Hébreu | he-il | | Hindi | hi-in | | Croate | hr-hr | | Hongrois | hu-hu | | Arménien | hy-am | | Indonésien | id-id | | Italien | it-it | | Islandais | is-is | | Japonais | ja-jp | | Géorgien | ka-ge | | Khmer | km-kh | | Kurde du Nord | kmr-iq | | Kannada | kn-in | | Kazakh | kk-kz | | Coréen | ko-kr | | Lituanien | lt-lt | | Letton | lv-lv | | Macédonien | mk-mk | | Malayalam | ml-in | | Mongol | mn-mn | | Malais (Malaisie) | ms-my | | Norvégien | nb-no | | Népalais | ne-np | | Néerlandais (Belgique) | nl-be | | Néerlandais | nl-nl | | Polonais | pl-pl | | Portugais (Brésil) | pt-br | | Portugais | pt-pt | | Roumain | ro-ro | | Russe | ru-ru | | Slovaque | sk-sk | | Serbe | sr-rs | | Slovène | sl-si | | Suédois | sv-se | | Tamoul | ta-in | | Thaï | th-th | | Turc | tr-tr | | Ourdou (Pakistan) | ur-pk | | Ukrainien | uk-ua | | Vietnamien | vi-vn | | Chinois simplifié | zh-cn | | Chinois traditionnel (Hong Kong) | zh-hk | | Chinois traditionnel (Taïwan) | zh-tw | ## Contribuer une nouvelle traduction {#contribute} Pour contribuer une nouvelle traduction ou améliorer une traduction existante, veuillez soumettre une Pull Request sur GitHub. Les packs de langue se trouvent dans [`packages/mdui/src/xliff`](https://github.com/zdhxiong/mdui/tree/v2/packages/mdui/src/xliff). Vous pouvez éditer directement sur GitHub. # Foire aux questions Voici quelques questions courantes de la communauté mdui ainsi que les réponses officielles. Avant de poser une question, vérifiez si un problème similaire existe déjà. ## Pourquoi les composants ne s'affichent-ils pas avec une balise auto-fermante ? {#no-self-closing} mdui est une bibliothèque de composants basée sur les Web Components. La spécification des Web Components ne prend pas en charge les balises auto-fermantes. Veillez donc à toujours utiliser une balise de fermeture pour les composants mdui. ```html ``` ## Comment masquer un composant avant son chargement ? {#waiting-load} Les composants mdui sont enregistrés via JavaScript. Avant que le fichier JS ne soit chargé et que le composant ne soit enregistré, il peut apparaître sans style. Voici deux solutions : Utilisez la pseudo-classe CSS [`:defined`](https://developer.mozilla.org/fr/docs/Web/CSS/:defined) pour masquer les composants mdui non enregistrés. Le CSS suivant masquera tous les composants mdui non enregistrés et les affichera immédiatement après leur enregistrement : ```css :not(:defined) { visibility: hidden; } ``` Une autre méthode consiste à utiliser [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined). Cette méthode retourne une Promise qui se résout lorsque le composant spécifié est enregistré. Vous pouvez utiliser [`Promise.allSettled()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) pour gérer plusieurs composants et éviter les problèmes si l'un d'entre eux ne peut pas être chargé. L'exemple suivant masque le `` avec `opacity: 0`, puis utilise `Promise.allSettled` pour attendre que tous les composants soient enregistrés avant de faire apparaître la page : ```html ``` # LLMs.txt mdui met à disposition les fichiers `llms.txt` et `llms-full.txt`, conçus pour fournir aux grands modèles de langage (LLM) un contexte clair et directement exploitable. Ils aident les IA à répondre de manière plus fiable aux questions concernant mdui. ## Utiliser llms.txt comme contexte pour une IA {#context} Deux formats sont disponibles : - `llms.txt` : https://www.mdui.org/fr/docs/2/llms.txt - `llms-full.txt` : https://www.mdui.org/fr/docs/2/llms-full.txt `llms.txt` est un index concis, particulièrement adapté aux modèles capables d'accéder au Web et de récupérer les pages Markdown nécessaires via les liens qu'il contient. Il peut également servir à obtenir un aperçu rapide du projet. `llms-full.txt` contient le contexte complet, c'est-à-dire l'intégralité du contenu des pages référencées dans `llms.txt`. Il est destiné aux modèles sans accès réseau, ou lorsqu'il est nécessaire de fournir tout le contexte en une seule fois. ## Version Markdown de la documentation {#md-mirror} Chaque page de documentation dispose d'une version Markdown correspondante : il suffit d'ajouter `.md` à la fin de l'URL de la page (ou `index.md` pour la page d'accueil). Par exemple : https://www.mdui.org/fr/docs/2/components/button → https://www.mdui.org/fr/docs/2/components/button.md https://www.mdui.org/fr/docs/2/ → https://www.mdui.org/fr/docs/2/index.md Vous pouvez utiliser directement ce lien Markdown, ou le contenu en texte brut de la page, comme contexte pour obtenir des réponses plus précises et ciblées. ## Utiliser ces fichiers avec ChatGPT, Claude et autres LLM {#how-to-use} Selon que le modèle prend en charge la navigation web ou le téléchargement de fichiers, choisissez l'une des options suivantes ou combinez-les : 1. Copier-coller : Collez le contenu de `llms-full.txt` en tant qu'instruction système ou comme premier message. Exemple : "Voici la documentation de référence de mdui. Basez-vous exclusivement sur ce contexte pour répondre aux questions suivantes. En cas de contradiction, ce contexte fait foi :\n\n[Collez le contenu de llms-full.txt]". 2. Fichier joint : Téléchargez `llms-full.txt` (ou `llms.txt`) et précisez dans le premier message "utilisez la pièce jointe comme contexte principal". Exemple : "En vous basant sur la documentation mdui jointe, indiquez-moi le mode d'emploi et les pièges à éviter avec ``.". 3. Lecture en ligne : Fournissez le lien vers `llms.txt` ou `llms-full.txt` dans la conversation. Exemple : "Veuillez lire et utiliser https://www.mdui.org/fr/docs/2/llms-full.txt comme contexte pour répondre à mes questions sur mdui.". 4. Lien direct vers une page : Pour discuter d'un composant ou d'une fonction particulière, donnez directement l'adresse Markdown de cette page. Exemple : "Veuillez lire https://www.mdui.org/fr/docs/2/components/button.md et me donner trois bonnes pratiques basées sur ce document.". **Astuce** : Cliquez sur l'icône en haut à droite de la page pour copier facilement les liens ci-dessus, accéder à la version Markdown de la page actuelle, ou utiliser celle-ci ou `llms-full.txt` comme contexte dans ChatGPT. # Serveur MCP mdui fournit un serveur [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) dédié, `@mdui/mcp`, qui permet aux agents IA locaux d'interroger les composants, les icônes, les propriétés CSS personnalisées et la documentation. Il peut être utilisé avec des outils de développement comme Claude Code, Cursor, GitHub Copilot, etc., pour faciliter la génération de code et l'exploitation des composants et styles de mdui. ## Outils {#tools} Le serveur MCP de mdui met à disposition des agents IA les outils suivants : - `list_components` : Liste tous les composants mdui. - `get_component_metadata` : Récupère les métadonnées détaillées de l'API d'un composant. - `list_css_classes` : Liste les noms des classes CSS globales. - `list_css_variables` : Liste les propriétés CSS personnalisées globales. - `list_documents` : Liste tous les documents. - `get_document` : Récupère le contenu complet d'un document. - `list_icon_codes` : Liste les codes d'icônes utilisables dans les attributs ou l'API. - `list_icon_components` : Liste les composants d'icônes indépendants et leurs instructions d'importation ESM. ## Utilisation {#usage} Le serveur MCP ne prend en charge que le [transport via stdio](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio). Il peut être intégré directement aux clients comme VS Code, Cursor, Claude Code, Windsurf, Zed, ainsi que dans les agents IA prenant en charge le protocole stdio. ### VS Code {#vscode} > Assurez-vous d'avoir installé les extensions [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) et [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat). 1. Créez un fichier `.vscode/mcp.json` à la racine du projet et ajoutez la configuration suivante : ```json { "servers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Cliquez sur le bouton "Démarrer" dans le fichier `mcp.json`. 3. Démarrez une conversation dans GitHub Copilot Chat. ### Cursor {#cursor} 1. Créez ou modifiez le fichier `.cursor/mcp.json` à la racine du projet et ajoutez la configuration suivante : ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Allez dans Settings > Cursor Settings > MCP & Integrations et activez le serveur mdui. 3. Démarrez une conversation dans Cursor Chat. ### Claude Code {#claude-code} 1. Exécutez la commande suivante dans le terminal pour ajouter le serveur MCP mdui : ```bash claude mcp add mdui -- npx -y @mdui/mcp ``` 2. Exécutez ensuite `claude` pour démarrer une session. 3. Saisissez votre requête pour démarrer la conversation. ### Windsurf {#windsurf} 1. Allez dans Settings > Windsurf Settings > Cascade 2. Cliquez sur Manage MCPs, puis sur "View raw config", et ajoutez ceci au fichier de configuration : ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` > Si le serveur MCP n'apparaît pas automatiquement, cliquez sur Refresh pour rafraîchir la liste. 3. Saisissez votre requête pour démarrer la conversation. ### Zed {#zed} 1. Ouvrez Settings > Open Settings et ajoutez la configuration suivante dans le fichier `settings.json` : ```json { "context_servers": { "mdui": { "source": "custom", "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Saisissez votre requête pour démarrer la conversation. ### Client MCP personnalisé {#custom} Si vous utilisez un client MCP personnalisé en local ou dans un environnement de développement, ajoutez simplement ce serveur au fichier de configuration du client. Par exemple : ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` # Mode sombre Tous les composants mdui prennent en charge le mode sombre et peuvent basculer automatiquement en fonction des paramètres du système d'exploitation. Vous pouvez cliquer sur l'icône en haut à droite de la documentation pour changer de thème et voir l'apparence des composants dans les différents thèmes. Pour activer le mode sombre, ajoutez simplement la classe `mdui-theme-dark` à la balise `` : ```html ``` Pour que le thème bascule automatiquement en fonction des paramètres système, ajoutez la classe `mdui-theme-auto` : ```html ``` Vous pouvez également utiliser des thèmes différents sur différentes parties de la page. Par exemple, le code suivant active le mode sombre sur l'ensemble de la page, mais un `
` interne possède la classe `mdui-theme-light`, de sorte que son contenu s'affiche en mode clair : ```html
``` En plus d'ajouter des classes CSS directement, mdui fournit deux fonctions pour faciliter la gestion du thème : - [`getTheme`](/fr/docs/2/functions/getTheme) : Obtient le thème de la page ou d'un élément spécifique. - [`setTheme`](/fr/docs/2/functions/setTheme) : Définit le thème de la page ou d'un élément spécifique. --- Notez que mdui définit les styles `color` et `background-color` sur les sélecteurs `:root`, `.mdui-theme-light`, `.mdui-theme-dark` et `.mdui-theme-auto`. Si vous ne souhaitez pas ces styles par défaut, vous pouvez les remplacer. L'exemple suivant définit un fond blanc et un texte noir pour le mode clair, et un fond noir et un texte blanc pour le mode sombre : ```css :root, .mdui-theme-light { color: #000; background-color: #fff; } .mdui-theme-dark { color: #fff; background-color: #000; } @media (prefers-color-scheme: dark) { .mdui-theme-auto { color: #fff; background-color: #000; } } ``` # Couleur dynamique mdui propose une fonction de couleur dynamique. À partir d'une seule valeur de couleur, mdui peut générer automatiquement un schéma de couleurs complet. mdui peut également extraire la couleur dominante d'un fond d'écran spécifié et générer le schéma de couleurs correspondant. Vous pouvez cliquer sur l'icône en haut à droite de la documentation pour changer le schéma de couleurs et voir l'apparence des composants. Un schéma de couleurs est un ensemble de propriétés CSS personnalisées. Les couleurs des composants mdui font référence à ces propriétés, ce qui permet de mettre à jour tous les composants en une seule fois. La liste complète des propriétés CSS personnalisées est disponible dans la section [Design Tokens - Couleur](/fr/docs/2/styles/design-tokens#color). ## Générer un schéma de couleurs {#color-scheme} Utilisez la fonction [`setColorScheme`](/fr/docs/2/functions/setColorScheme) pour générer un schéma de couleurs. Elle accepte une valeur de couleur hexadécimale et génère un schéma de couleurs qu'elle applique à l'élément `` de la page. Par exemple : ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Génère un schéma de couleurs à partir de #0061a4 et l'applique à setColorScheme('#0061a4'); ``` Vous pouvez spécifier un élément cible différent via l'option `target` : ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Applique le schéma de couleurs à l'élément .foo setColorScheme('#0061a4', { target: document.querySelector('.foo'), }); ``` Par défaut, le schéma de couleurs généré ne contient que les couleurs listées dans [Design Tokens - Couleur](/fr/docs/2/styles/design-tokens#color). Vous pouvez ajouter des couleurs personnalisées via l'option `customColors`. mdui générera un ensemble de quatre propriétés CSS pour chaque couleur personnalisée. Par exemple : ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; setColorScheme('#0061a4', { customColors: [ { name: 'error', // Écrase la couleur d'erreur existante value: '#69F0AE', }, { name: 'music', // Ajoute une nouvelle couleur value: '#FFC107', }, ], }); ``` Chaque couleur personnalisée génère les propriétés suivantes : - `--mdui-color-{name}` - `--mdui-color-on-{name}` - `--mdui-color-{name}-container` - `--mdui-color-on-{name}-container` Où `{name}` correspond au nom que vous avez défini dans le champ `name` de `customColors`. Le nom de la couleur personnalisée peut être un nom déjà présent dans le schéma de couleurs par défaut, tel que `primary`, `secondary`, `tertiary` ou `error`. Si vous spécifiez l'un de ces noms, les quatre propriétés CSS correspondantes seront générées à partir de la valeur que vous avez fournie. Dans l'exemple ci-dessus, le nom `error` est utilisé. Comme `error` existe déjà par défaut et que ses propriétés sont utilisées par les composants mdui pour indiquer un état d'erreur, le fait de lui attribuer une valeur verte fera passer l'affichage des erreurs au vert dans tous les composants mdui. Le nom peut également être totalement nouveau, comme `music` dans l'exemple précédent. Le schéma de couleurs généré inclura alors quatre propriétés CSS supplémentaires que vous pourrez utiliser dans vos propres styles : ```html
Musique
Conteneur Musique
``` Vous pouvez également utiliser la fonction [`removeColorScheme`](/fr/docs/2/functions/removeColorScheme) pour supprimer un schéma de couleurs généré par les méthodes ci-dessus. Vous pouvez passer un paramètre pour spécifier l'élément sur lequel supprimer le schéma de couleurs ; par défaut, il sera supprimé de l'élément ``. ## Extraire une couleur d'un fond d'écran {#from-wallpaper} mdui fournit la fonction [`getColorFromImage`](/fr/docs/2/functions/getColorFromImage) pour extraire la couleur dominante d'une instance `Image`. Elle retourne une Promise résolue avec la valeur hexadécimale. Utilisez cette valeur avec [`setColorScheme`](/fr/docs/2/functions/setColorScheme) : ```js import { getColorFromImage } from 'mdui/functions/getColorFromImage.js'; import { setColorScheme } from 'mdui/functions/setColorScheme.js'; const image = new Image(); image.src = 'image1.png'; getColorFromImage(image).then((color) => setColorScheme(color)); ``` # Typographie mdui fournit les classes CSS `mdui-prose` et `mdui-table` pour optimiser le style des articles et des tableaux. ## Typographie {#prose} Ajoutez la classe `mdui-prose` à l'élément parent de votre article pour optimiser l'affichage du contenu textuel, y compris les tableaux ``. Par exemple : ```html

Titre

Corps du texte

``` ## Style de tableau {#table} Ajoutez la classe `mdui-table` à l'élément `` pour optimiser son style. Par exemple : ```html
``` Pour permettre le défilement horizontal de l'élément `` dans son parent, ajoutez la classe `mdui-table` à l'élément parent. Par exemple : ```html
``` # Design Tokens Les Design Tokens sont une stratégie de gestion des systèmes de design. Ils transforment tous les éléments réutilisables (couleurs, polices, espacements, etc.) en variables indépendantes pour une gestion et une application unifiées. mdui utilise des propriétés CSS personnalisées globales pour implémenter les Design Tokens. Cela signifie qu'en modifiant ces propriétés CSS, vous pouvez modifier globalement le style de tous les composants mdui. Pour vos propres styles, il est également recommandé d'utiliser ces propriétés CSS pour assurer la cohérence avec les composants mdui, et pour que vos styles se mettent à jour automatiquement avec la couleur dynamique. ## Couleur {#color} mdui fournit un ensemble de propriétés CSS personnalisées pour le mode clair et le mode sombre. En mode clair, le nom de la propriété est `--mdui-color-{name}-light` ; en mode sombre, c'est `--mdui-color-{name}-dark`. mdui fournit également une propriété `--mdui-color-{name}` qui fait référence à la valeur du mode clair ou sombre selon le thème actuel. Ainsi, elle change automatiquement avec le thème. Si vous devez modifier la couleur, vous devez modifier à la fois `--mdui-color-{name}-light` et `--mdui-color-{name}-dark`. Pour lire la couleur, utilisez directement `--mdui-color-{name}`. Les valeurs sont des triplets RVB (rouge, vert, bleu) séparés par des virgules. Exemple : ```css /* Modifier la valeur de la couleur primaire */ :root { --mdui-color-primary-light: 103, 80, 164; --mdui-color-primary-dark: 208, 188, 255; } /* Définir la couleur de fond de .foo sur la couleur primaire */ .foo { background-color: rgb(var(--mdui-color-primary)); } /* Définir la couleur de fond de .bar sur la couleur primaire avec une opacité de 0.8 */ .bar { background-color: rgba(var(--mdui-color-primary), 0.8); } ``` Pour créer un schéma de couleurs complet, nous recommandons d'utiliser la fonction [`setColorScheme`](/fr/docs/2/functions/setColorScheme), qui génère un schéma de couleurs complet à partir d'une valeur de couleur donnée.
Nom de la couleur Propriété CSS personnalisée Valeur par défaut Exemple
Primary --mdui-color-primary-light 103, 80, 164
--mdui-color-primary-dark 208, 188, 255
--mdui-color-primary
Primary container --mdui-color-primary-container-light 234, 221, 255
--mdui-color-primary-container-dark 79, 55, 139
--mdui-color-primary-container
On primary --mdui-color-on-primary-light 255, 255, 255
--mdui-color-on-primary-dark 55, 30, 115
--mdui-color-on-primary
On primary container --mdui-color-on-primary-container-light 33, 0, 94
--mdui-color-on-primary-container-dark 234, 221, 255
--mdui-color-on-primary-container
Inverse primary --mdui-color-inverse-primary-light 208, 188, 255
--mdui-color-inverse-primary-dark 103, 80, 164
--mdui-color-inverse-primary
Secondary --mdui-color-secondary-light 98, 91, 113
--mdui-color-secondary-dark 204, 194, 220
--mdui-color-secondary
Secondary container --mdui-color-secondary-container-light 232, 222, 248
--mdui-color-secondary-container-dark 74, 68, 88
--mdui-color-secondary-container
On secondary --mdui-color-on-secondary-light 255, 255, 255
--mdui-color-on-secondary-dark 51, 45, 65
--mdui-color-on-secondary
On secondary container --mdui-color-on-secondary-container-light 30, 25, 43
--mdui-color-on-secondary-container-dark 232, 222, 248
--mdui-color-on-secondary-container
Tertiary --mdui-color-tertiary-light 125, 82, 96
--mdui-color-tertiary-dark 239, 184, 200
--mdui-color-tertiary
Tertiary container --mdui-color-tertiary-container-light 255, 216, 228
--mdui-color-tertiary-container-dark 99, 59, 72
--mdui-color-tertiary-container
On tertiary --mdui-color-on-tertiary-light 255, 255, 255
--mdui-color-on-tertiary-dark 73, 37, 50
--mdui-color-on-tertiary
On tertiary container --mdui-color-on-tertiary-container-light 55, 11, 30
--mdui-color-on-tertiary-container-dark 255, 216, 228
--mdui-color-on-tertiary-container
Surface --mdui-color-surface-light 254, 247, 255
--mdui-color-surface-dark 20, 18, 24
--mdui-color-surface
Surface dim --mdui-color-surface-dim-light 222, 216, 225
--mdui-color-surface-dim-dark 20, 18, 24
--mdui-color-surface-dim
Surface bright --mdui-color-surface-bright-light 254, 247, 255
--mdui-color-surface-bright-dark 59, 56, 62
--mdui-color-surface-bright
Surface container lowest --mdui-color-surface-container-lowest-light 255, 255, 255
--mdui-color-surface-container-lowest-dark 15, 13, 19
--mdui-color-surface-container-lowest
Surface container low --mdui-color-surface-container-low-light 247, 242, 250
--mdui-color-surface-container-low-dark 29, 27, 32
--mdui-color-surface-container-low
Surface container --mdui-color-surface-container-light 243, 237, 247
--mdui-color-surface-container-dark 33, 31, 38
--mdui-color-surface-container
Surface container high --mdui-color-surface-container-high-light 236, 230, 240
--mdui-color-surface-container-high-dark 43, 41, 48
--mdui-color-surface-container-high
Surface container highest --mdui-color-surface-container-highest-light 230, 224, 233
--mdui-color-surface-container-highest-dark 54, 52, 59
--mdui-color-surface-container-highest
Surface variant --mdui-color-surface-variant-light 231, 224, 236
--mdui-color-surface-variant-dark 73, 69, 79
--mdui-color-surface-variant
On surface --mdui-color-on-surface-light 28, 27, 31
--mdui-color-on-surface-dark 230, 225, 229
--mdui-color-on-surface
On surface variant --mdui-color-on-surface-variant-light 73, 69, 78
--mdui-color-on-surface-variant-dark 202, 196, 208
--mdui-color-on-surface-variant
Inverse surface --mdui-color-inverse-surface-light 49, 48, 51
--mdui-color-inverse-surface-dark 230, 225, 229
--mdui-color-inverse-surface
Inverse on surface --mdui-color-inverse-on-surface-light 244, 239, 244
--mdui-color-inverse-on-surface-dark 49, 48, 51
--mdui-color-inverse-on-surface
Background --mdui-color-background-light 254, 247, 255
--mdui-color-background-dark 20, 18, 24
--mdui-color-background
On background --mdui-color-on-background-light 28, 27, 31
--mdui-color-on-background-dark 230, 225, 229
--mdui-color-on-background
Error --mdui-color-error-light 179, 38, 30
--mdui-color-error-dark 242, 184, 181
--mdui-color-error
Error container --mdui-color-error-container-light 249, 222, 220
--mdui-color-error-container-dark 140, 29, 24
--mdui-color-error-container
On error --mdui-color-on-error-light 255, 255, 255
--mdui-color-on-error-dark 96, 20, 16
--mdui-color-on-error
On error container --mdui-color-on-error-container-light 65, 14, 11
--mdui-color-on-error-container-dark 249, 222, 220
--mdui-color-on-error-container
Outline --mdui-color-outline-light 121, 116, 126
--mdui-color-outline-dark 147, 143, 153
--mdui-color-outline
Outline variant --mdui-color-outline-variant-light 196, 199, 197
--mdui-color-outline-variant-dark 68, 71, 70
--mdui-color-outline-variant
Shadow --mdui-color-shadow-light 0, 0, 0
--mdui-color-shadow-dark 0, 0, 0
--mdui-color-shadow
Surface tint --mdui-color-surface-tint-color-light 103, 80, 164
--mdui-color-surface-tint-color-dark 208, 188, 255
--mdui-color-surface-tint-color
Scrim --mdui-color-scrim-light 0, 0, 0
--mdui-color-scrim-dark 0, 0, 0
--mdui-color-scrim
## Coins arrondis {#shape-corner} mdui propose 7 tailles de coins arrondis. Voici un exemple d'utilisation des propriétés CSS personnalisées pour ces coins arrondis : ```css /* Modifier la taille du coin arrondi extra-small */ :root { --mdui-shape-corner-extra-small: 0.3rem; } /* Définir le rayon de bordure de .foo sur extra-small */ .foo { border-radius: var(--mdui-shape-corner-extra-small); } ``` | Propriété CSS | Valeur par défaut | Exemple | | --------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------- | | `--mdui-shape-corner-none` | `0` |
| | `--mdui-shape-corner-extra-small` | `0.25rem` |
| | `--mdui-shape-corner-small` | `0.5rem` |
| | `--mdui-shape-corner-medium` | `0.75rem` |
| | `--mdui-shape-corner-large` | `1rem` |
| | `--mdui-shape-corner-extra-large` | `1.75rem` |
| | `--mdui-shape-corner-full` | `1000rem` |
| ## Typographie {#typescale} mdui propose 15 styles de texte différents, notamment Display large, Display medium, Display small, Headline large, Headline medium, Headline small, Title large, Title medium, Title small, Label large, Label medium, Label small, Body large, Body medium, Body small. Voici un exemple d'utilisation : ```css /* Modifier le style de texte de Body large */ :root { --mdui-typescale-body-large-line-height: 1.6rem; --mdui-typescale-body-large-size: 1.2rem; --mdui-typescale-body-large-tracking: 0.01rem; --mdui-typescale-body-large-weight: 400; } /* Appliquer le style de texte Body large à .foo */ .foo { line-height: var(--mdui-typescale-body-large-line-height); font-size: var(--mdui-typescale-body-large-size); letter-spacing: var(--mdui-typescale-body-large-tracking); font-weight: var(--mdui-typescale-body-large-weight); } ```
Propriété CSS personnalisée Valeur par défaut Exemple
--mdui-typescale-display-large-line-height 4rem
Display large
--mdui-typescale-display-large-size 3.5625rem
--mdui-typescale-display-large-tracking 0
--mdui-typescale-display-large-weight 400
--mdui-typescale-display-medium-line-height 3.25rem
Display medium
--mdui-typescale-display-medium-size 2.8125rem
--mdui-typescale-display-medium-tracking 0
--mdui-typescale-display-medium-weight 400
--mdui-typescale-display-small-line-height 2.75rem
Display small
--mdui-typescale-display-small-size 2.25rem
--mdui-typescale-display-small-tracking 0
--mdui-typescale-display-small-weight 400
--mdui-typescale-headline-large-line-height 2.5rem
Headline large
--mdui-typescale-headline-large-size 2rem
--mdui-typescale-headline-large-tracking 0
--mdui-typescale-headline-large-weight 400
--mdui-typescale-headline-medium-line-height 2.25rem
Headline medium
--mdui-typescale-headline-medium-size 1.75rem
--mdui-typescale-headline-medium-tracking 0
--mdui-typescale-headline-medium-weight 400
--mdui-typescale-headline-small-line-height 2rem
Headline small
--mdui-typescale-headline-small-size 1.5rem
--mdui-typescale-headline-small-tracking 0
--mdui-typescale-headline-small-weight 400
--mdui-typescale-title-large-line-height 1.75rem
Title large
--mdui-typescale-title-large-size 1.375rem
--mdui-typescale-title-large-tracking 0
--mdui-typescale-title-large-weight 400
--mdui-typescale-title-medium-line-height 1.5rem
Title medium
--mdui-typescale-title-medium-size 1rem
--mdui-typescale-title-medium-tracking 0.009375rem
--mdui-typescale-title-medium-weight 500
--mdui-typescale-title-small-line-height 1.25rem
Title small
--mdui-typescale-title-small-size 0.875rem
--mdui-typescale-title-small-tracking 0.00625rem
--mdui-typescale-title-small-weight 500
--mdui-typescale-label-large-line-height 1.25rem
Label large
--mdui-typescale-label-large-size 0.875rem
--mdui-typescale-label-large-tracking 0.00625rem
--mdui-typescale-label-large-weight 500
--mdui-typescale-label-medium-line-height 1rem
Label medium
--mdui-typescale-label-medium-size 0.75rem
--mdui-typescale-label-medium-tracking 0.03125rem
--mdui-typescale-label-medium-weight 500
--mdui-typescale-label-small-line-height 0.375rem
Label small
--mdui-typescale-label-small-size 0.6875rem
--mdui-typescale-label-small-tracking 0.03125rem
--mdui-typescale-label-small-weight 500
--mdui-typescale-body-large-line-height 1.5rem
Body large
--mdui-typescale-body-large-size 1rem
--mdui-typescale-body-large-tracking 0.009375rem
--mdui-typescale-body-large-weight 400
--mdui-typescale-body-medium-line-height 1.25rem
Body medium
--mdui-typescale-body-medium-size 0.875rem
--mdui-typescale-body-medium-tracking 0.015625rem
--mdui-typescale-body-medium-weight 400
--mdui-typescale-body-small-line-height 1rem
Body small
--mdui-typescale-body-small-size 0.75rem
--mdui-typescale-body-small-tracking 0.025rem
--mdui-typescale-body-small-weight 400
## Opacité de la couche d'état {#state-layer} Certains composants mdui affichent un calque semi-transparent lors des interactions (survol, focus, pression, glissement). Par exemple, le composant [``](/fr/docs/2/components/button) affiche un calque semi-transparent lorsque la souris le survole, qu'il reçoit le focus, qu'il est pressé ou glissé. Vous pouvez ajuster l'opacité de ces calques via les propriétés CSS personnalisées. Voici un exemple d'utilisation : ```css /* Modifier l'opacité de la couche d'état */ :root { --mdui-state-layer-hover: 0.08; --mdui-state-layer-focus: 0.12; --mdui-state-layer-pressed: 0.12; --mdui-state-layer-dragged: 0.16; } ``` | Propriété CSS | Valeur par défaut | Exemple | | ---------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------ | | `--mdui-state-layer-hover` | `0.08` |
| | `--mdui-state-layer-focus` | `0.12` |
| | `--mdui-state-layer-pressed` | `0.12` |
| | `--mdui-state-layer-dragged` | `0.16` |
| ## Élévation (ombre) {#elevation} Certains composants mdui ont des ombres pour simuler une sensation d'élévation du composant sur la page. Vous pouvez ajuster les effets d'ombre via les propriétés CSS personnalisées. Voici un exemple d'utilisation : ```css /* Modifier l'ombre de niveau 1 */ :root { --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%); } /* Appliquer l'ombre de niveau 1 à .foo */ .foo { box-shadow: var(--mdui-elevation-level1); } ``` | Propriété CSS | Valeur par défaut | Exemple | | ------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | `--mdui-elevation-level0` | `none` |
| | `--mdui-elevation-level1` | `0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level2` | `0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level3` | `0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level4` | `0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level5` | `0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| ## Animation {#motion} Les courbes d'accélération et les durées des animations des composants mdui peuvent être configurées via des propriétés CSS personnalisées. Voici un exemple d'utilisation : ```css /* Modifier la courbe d'accélération standard et la durée short1 */ :root { --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --mdui-motion-duration-short1: 40ms; } /* Appliquer la transition à .foo en utilisant la courbe standard et la durée short1 */ .foo { transition: all var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard); } ```
Type Propriété CSS personnalisée Valeur par défaut
Courbes d'accélération --mdui-motion-easing-linear cubic-bezier(0, 0, 1, 1)
--mdui-motion-easing-standard cubic-bezier(0.2, 0, 0, 1)
--mdui-motion-easing-standard-accelerate cubic-bezier(0.3, 0, 1, 1)
--mdui-motion-easing-standard-decelerate cubic-bezier(0, 0, 0, 1)
--mdui-motion-easing-emphasized var(--mdui-motion-easing-standard)
--mdui-motion-easing-emphasized-accelerate cubic-bezier(0.3, 0, 0.8, 0.15)
--mdui-motion-easing-emphasized-decelerate cubic-bezier(0.05, 0.7, 0.1, 1)
Durées --mdui-motion-duration-short1 50ms
--mdui-motion-duration-short2 100ms
--mdui-motion-duration-short3 150ms
--mdui-motion-duration-short4 200ms
--mdui-motion-duration-medium1 250ms
--mdui-motion-duration-medium2 300ms
--mdui-motion-duration-medium3 350ms
--mdui-motion-duration-medium4 400ms
--mdui-motion-duration-long1 450ms
--mdui-motion-duration-long2 500ms
--mdui-motion-duration-long3 550ms
--mdui-motion-duration-long4 600ms
--mdui-motion-duration-extra-long1 700ms
--mdui-motion-duration-extra-long2 800ms
--mdui-motion-duration-extra-long3 900ms
--mdui-motion-duration-extra-long4 1000ms
## Points de rupture réactifs {#breakpoint} mdui fournit une série de points de rupture réactifs, qui peuvent être configurés via des propriétés CSS personnalisées. Voici un exemple d'utilisation : ```css /* Modifier la valeur du point de rupture sm */ :root { --mdui-breakpoint-sm: 560px; } ``` Il est important de noter que ces propriétés CSS personnalisées ne peuvent pas être utilisées dans les requêtes média CSS. Voici un exemple erroné : ```css /* Utilisation incorrecte. Les propriétés CSS personnalisées ne peuvent pas être utilisées dans les requêtes média. */ @media (min-width: var(--mdui-breakpoint-sm)) { } ``` Si vous avez besoin de vérifier les points de rupture en JavaScript, vous pouvez utiliser la fonction [`breakpoint`](/fr/docs/2/functions/breakpoint). | Propriété CSS personnalisée | Valeur par défaut | | --------------------------- | ----------------- | | `--mdui-breakpoint-xs` | `0px` | | `--mdui-breakpoint-sm` | `600px` | | `--mdui-breakpoint-md` | `840px` | | `--mdui-breakpoint-lg` | `1080px` | | `--mdui-breakpoint-xl` | `1440px` | | `--mdui-breakpoint-xxl` | `1920px` | # Intégration avec React Pour utiliser mdui dans React, suivez simplement les instructions de la page [Installation](/fr/docs/2/getting-started/installation#npm). ## Remarques {#notes} L'utilisation de mdui dans React présente certaines limitations. Ces limitations sont générales à l'utilisation des Web Components dans React et ne sont pas spécifiques à mdui. ### Liaison d'événements {#event-binding} React ne prenant pas en charge les événements personnalisés, vous devez utiliser l'attribut `ref` pour obtenir une référence au composant. Exemple d'utilisation d'événements de composants mdui dans React : ```js import { useEffect, useRef } from 'react'; import 'mdui/mdui.css'; import 'mdui/components/switch.js'; function App() { const switchRef = useRef(null); useEffect(() => { const handleToggle = () => { console.log("Le Switch a changé d'état"); }; switchRef.current.addEventListener('change', handleToggle); return () => { switchRef.current.removeEventListener('change', handleToggle); }; }, []); return ; } export default App; ``` ### Déclarations de types TypeScript JSX {#jsx-typescript} Si vous utilisez mdui dans un fichier TypeScript (.tsx), vous devez ajouter les déclarations de types TypeScript. Vous devez importer manuellement le fichier de déclaration de types de mdui dans votre fichier .d.ts : ```ts /// ``` # Intégration avec Vue Pour utiliser mdui dans Vue, suivez d'abord les instructions de la page [Installation](/fr/docs/2/getting-started/installation#npm), puis effectuez les configurations requises. ## Configuration {#configuration} Vous devez configurer Vue pour qu'il ne traite pas les composants mdui comme des composants Vue. Dans le fichier `vite.config`, définissez l'option `compilerOptions.isCustomElement` : ```js // vite.config.js import vue from '@vitejs/plugin-vue'; export default { plugins: [ vue({ template: { compilerOptions: { // Tous les noms de balises commençant par mdui- sont des composants mdui isCustomElement: (tag) => tag.startsWith('mdui-'), }, }, }), ], }; ``` Pour plus de détails sur cette configuration, consultez la [documentation officielle de Vue](https://fr.vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue). ## Remarques {#notes} ### Liaison de données bidirectionnelle {#data-binding} Vous ne pouvez pas utiliser `v-model` sur les composants mdui. Vous devez gérer vous-même la liaison et la mise à jour des données. Par exemple : ```html ``` ### Configuration eslint {#eslint} Si vous utilisez [`eslint-plugin-vue`](https://www.npmjs.com/package/eslint-plugin-vue), ajoutez la règle suivante dans `.eslintrc.js` : ```js rules: { 'vue/no-deprecated-slot-attribute': 'off' } ``` # Intégration avec Angular Pour utiliser mdui dans Angular, suivez d'abord les instructions de la page [Installation](/fr/docs/2/getting-started/installation#npm), puis effectuez les configurations requises. ## Configuration {#configuration} Vous devez d'abord activer la prise en charge des Web Components dans Angular. Exemple : ```js import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule {} ``` Une fois la configuration terminée, vous pouvez importer et utiliser les composants mdui dans le code du composant Angular : ```js import { Dialog } from 'mdui/components/dialog.js'; @Component({ selector: 'app-dialog-example', template: `
Contenu de la boîte de dialogue
` }) export class DialogExampleComponent implements OnInit { // Utiliser @ViewChild pour obtenir une référence à l'élément #dialog @ViewChild('dialog') dialog?: ElementRef; ... constructor(...) { } ngOnInit() { } ... openDialog() { // Utiliser nativeElement pour accéder au composant mdui this.dialog?.nativeElement.open = true; } } ``` # Intégration avec d'autres frameworks mdui est développé avec des Web Components, qui sont pris en charge nativement par les navigateurs. Il peut donc être utilisé dans tous les frameworks Web. Voici comment l'utiliser dans certains frameworks courants. ## Aurelia {#Aurelia} Après avoir suivi les instructions de la page [Installation](/fr/docs/2/getting-started/installation#npm), vous devez installer et configurer un package supplémentaire (uniquement pour Aurelia 2) : ```bash npm install aurelia-mdui --save ``` Ensuite, enregistrez-le dans votre application : ```typescript import { MduiWebTask } from 'aurelia-mdui'; Aurelia.register(MduiWebTask).app(MyApp).start(); ``` **Remarque** Veuillez signaler les erreurs à [https://github.com/mreiche/aurelia-mdui](https://github.com/mreiche/aurelia-mdui) ## WebCell {#WebCell} Dans [WebCell](https://web-cell.dev/), après avoir suivi les instructions de la page [Installation](/fr/docs/2/getting-started/installation#npm), la prise en charge des Web Components, de TypeScript et de JSX est une fonctionnalité de premier ordre, prête à l'emploi. Vous pouvez également utiliser le [dépôt modèle GitHub officiel](https://github.com/EasyWebApp/WebCell-mobile) pour [créer un nouveau projet en un clic](https://github.com/new?template_name=WebCell-mobile&template_owner=EasyWebApp). # Composant Avatar Le composant Avatar permet de représenter une personne, un objet ou une entité. Il peut prendre plusieurs formes, comme des images, des icônes ou des caractères. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/avatar.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Avatar } from 'mdui/components/avatar.js'; ``` Exemple d'utilisation : ```html ``` ## Exemples {#examples} ### Avatar avec image {#example-src} Vous pouvez spécifier une URL d'image avec l'attribut `src`, ou placer un élément `` dans le slot par défaut. ```html Exemple d'avatar image ``` Utilisez l'attribut `fit` pour définir la façon dont l'image s'ajuste au conteneur, de la même manière que la propriété CSS [`object-fit`](https://developer.mozilla.org/fr/docs/Web/CSS/object-fit) native. ### Avatar avec icône {#example-icon} Utilisez l'attribut `icon` pour spécifier une icône Material Icons comme avatar, ou fournissez un élément d'icône dans le slot par défaut. ```html ``` ### Avatar avec un caractère {#example-char} Tout texte placé dans le slot par défaut peut servir d'avatar. ```html A ``` ## mdui-avatar API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
src src true string

URL de l'image de l'avatar
fit fit true 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

Comment l'image s'adapte au conteneur, identique à la propriété object-fit native. Les valeurs possibles incluent :

  • contain : Préserve les proportions de l'image, le contenu est mis à l'échelle de manière proportionnelle
  • cover : Préserve les proportions de l'image, mais une partie du contenu peut être rognée
  • fill : Valeur par défaut, ne préserve pas les proportions, le contenu est étiré pour remplir tout le conteneur
  • none : Conserve la taille d'origine de l'image, le contenu n'est pas mis à l'échelle ou étiré
  • scale-down : Préserve les proportions de l'image, la taille du contenu est la plus petite entre none et contain
icon icon true string

Nom de l'icône Material Icons pour l'avatar
label label true string

Description textuelle alternative pour l'avatar
### Slots
Nom Description
Défaut

Contenu personnalisé de l'avatar, peut être des lettres, des caractères chinois, un élément <img>, une icône, etc.
### CSS Parts
Nom Description
image

Élément <img> interne utilisé lorsque l'avatar affiche une image
icon

Élément <mdui-icon> interne utilisé lorsque l'avatar affiche une icône
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Badge Le composant Badge permet d'afficher des informations dynamiques, telles que des compteurs ou des indicateurs d'état. Il peut contenir du texte ou des nombres. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/badge.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Badge } from 'mdui/components/badge.js'; ``` Exemple d'utilisation : ```html 12 ``` ## Exemples {#examples} ### Variante {#example-variant} Utilisez l'attribut `variant` pour choisir la variante du badge. Avec la valeur `large`, un grand badge est affiché. Le texte est à renseigner dans le slot par défaut. ```html 99+ ``` ## mdui-badge API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
variant variant true 'small' | 'large' 'large'

Forme du badge. Les valeurs possibles incluent :

  • small : Petit badge, n'affiche pas de texte
  • large : Grand badge, affiche du texte
### Slots
Nom Description
Défaut

Texte affiché dans le badge
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Bottom App Bar La Bottom App Bar est principalement conçue pour afficher la navigation et les actions importantes en bas de l'écran sur mobile. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/bottom-app-bar.js'; ``` Importez le type TypeScript correspondant : ```ts 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.) ```html
``` **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` : 1. Lorsque l'attribut `scroll-target` est spécifié. Dans ce cas, le `padding-bottom` est ajouté à l'élément ciblé par `scroll-target`. 2. Lorsqu'il se trouve à l'intérieur du composant [``](/fr/docs/2/components/layout). Dans ce cas, aucun `padding-bottom` n'est ajouté. ## Exemples {#examples} ### Dans un conteneur spécifique {#example-scroll-target} 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). ```html
Contenu
``` ### Masquer lors du défilement {#example-scroll-behavior} 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. ```html
Contenu
``` ### Floating Action Button détaché {#example-fab-detach} Si la Bottom App Bar contient un [Floating Action Button](/fr/docs/2/components/fab), 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. ```html
``` ## mdui-bottom-app-bar API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
hide hide true boolean false

Si le composant est masqué
fab-detach fabDetach true 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 true 'hide' | 'shrink' | 'elevate'

Comportement de défilement. Les valeurs possibles sont :

  • hide : Masque lors du défilement
scroll-target scrollTarget false 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 true number

Seuil de défilement avant activation du comportement, en px.
order order true number

Ordre de ce composant dans le Layout <mdui-layout>, trié par ordre croissant. La valeur par défaut est 0.
### Événements
Nom Description
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 Description
Défaut

Éléments à l'intérieur de la Bottom App Bar
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Bouton Les boutons servent principalement à déclencher des actions, comme envoyer un e-mail, partager un document ou aimer un commentaire. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/button.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Button } from 'mdui/components/button.js'; ``` Exemple d'utilisation : ```html Bouton ``` ## Exemples {#examples} ### Variante {#example-variant} Utilisez l'attribut `variant` pour définir la variante du bouton. ```html Surélevé Rempli Tonal Contour Texte ``` ### Pleine largeur {#example-full-width} Ajoutez l'attribut `full-width` pour que le bouton occupe toute la largeur de son conteneur parent. ```html Bouton ``` ### Icône {#example-icon} Utilisez les attributs `icon` et `end-icon` pour ajouter une icône Material Icons à gauche et à droite du bouton. Vous pouvez également utiliser les slots `icon` et `end-icon`. ```html Icône Slot ``` ### Lien {#example-link} Ajoutez l'attribut `href` pour transformer le bouton en lien. Les attributs liés aux liens (`download`, `target`, `rel`) sont alors également disponibles. ```html Lien ``` ### États désactivé et chargement {#example-disabled} Ajoutez l'attribut `disabled` pour désactiver le bouton, et l'attribut `loading` pour lui appliquer un état de chargement. ```html Désactivé Chargement Chargement & Désactivé ``` ## mdui-button API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
variant variant true 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' 'filled'

Forme du bouton. Les valeurs possibles incluent :

  • elevated : Bouton avec ombre, adapté aux scénarios où le bouton doit être visuellement distinct de l'arrière-plan
  • filled : Effet visuel fort, adapté aux actions finales importantes dans un processus, telles que "Enregistrer", "Confirmer", etc.
  • tonal : Effet visuel entre filled et outlined, adapté aux actions de priorité moyenne à élevée, comme "Suivant" dans un flux
  • outlined : Bouton avec bordure, adapté aux actions de priorité moyenne et secondaire, comme "Retour"
  • text : Bouton texte, adapté aux actions de la plus basse priorité
full-width fullWidth true boolean false

Si le bouton doit remplir toute la largeur de l'élément parent
icon icon true string

Nom de l'icône Material Icons à gauche. Peut également être défini via slot="icon".
end-icon endIcon true string

Nom de l'icône Material Icons à droite. Peut également être défini via slot="end-icon".
href href true string

URL cible du lien.

Si cette propriété est définie, le composant sera rendu comme un élément <a> et pourra utiliser les attributs liés aux liens.
download download true string

Nom du fichier à télécharger.

Remarque : Cette propriété ne s'applique que si l'attribut href est défini.
target target true '_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 true '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 true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
disabled disabled true boolean false

Si le composant est désactivé
loading loading true boolean false

Si le composant est en état de chargement
name name true string ''

Nom du bouton, qui sera envoyé avec les données du formulaire.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini.
value value true string ''

Valeur initiale du bouton, qui sera envoyée avec les données du formulaire.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini.
type type true 'submit' | 'reset' | 'button' 'button'

Type du bouton. Par défaut, il s'agit de button. Les valeurs possibles incluent :

  • submit : Au clic sur le bouton, les données du formulaire sont envoyées au serveur
  • reset : Au clic sur le bouton, tous les champs du formulaire sont réinitialisés à leurs valeurs initiales
  • button : Ce type de bouton n'a pas de comportement par défaut

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié.
form form true string

Élément <form> associé. La valeur de cet attribut doit être l'id d'un élément <form> dans la même page.

Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément <form>. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, y compris hors de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié.
formaction formAction true string

Spécifie l'URL de soumission du formulaire.

Si cet attribut est spécifié, il remplace l'attribut action de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié et que type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Spécifie le type de contenu à utiliser pour soumettre le formulaire au serveur. Les valeurs possibles incluent :

  • application/x-www-form-urlencoded : Valeur par défaut si l'attribut n'est pas spécifié
  • multipart/form-data : À utiliser lorsque le formulaire contient un élément <input type="file">
  • text/plain : Nouveau dans HTML5, utilisé pour le débogage

Si cet attribut est spécifié, il remplace l'attribut enctype de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié et que type="submit".
formmethod formMethod true 'post' | 'get'

Spécifie la méthode HTTP à utiliser pour soumettre le formulaire. Les valeurs possibles incluent :

  • post : Les données du formulaire sont incluses dans le corps de la requête et envoyées au serveur
  • get : Les données du formulaire sont ajoutées à l'URI du formulaire avec ? comme séparateur, et l'URI résultante est envoyée au serveur. À utiliser lorsque le formulaire n'a pas d'effets secondaires et ne contient que des caractères ASCII

Si cet attribut est défini, il remplace l'attribut method de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
formnovalidate formNoValidate true boolean false

Quand il est activé, la validation du formulaire n'est pas effectuée lors de la soumission.

Si cet attribut est défini, il remplace l'attribut novalidate de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Où afficher la réponse après l'envoi du formulaire. Les valeurs possibles incluent :

  • _self : Option par défaut, ouvre dans le contexte courant
  • _blank : Ouvre dans une nouvelle fenêtre
  • _parent : Ouvre dans le contexte parent
  • _top : Ouvre dans toute la fenêtre

Si cet attribut est défini, il remplace l'attribut target de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
undefined validity false ValidityState

État de validation du formulaire, voir ValidityState pour plus de détails
undefined validationMessage false string

Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
checkValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.
reportValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.

Si la validation échoue, un message d'erreur s'affiche également sur le composant.
setCustomValidity(message: string): void

Définit un message d'erreur personnalisé. Tant qu'il n'est pas vide, le champ est considéré comme invalide.
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
invalid

Se déclenche lorsque la validation du champ du formulaire échoue
### Slots
Nom Description
Défaut

Texte du bouton
icon

Icône à gauche du bouton
end-icon

Icône à droite du bouton
### CSS Parts
Nom Description
button

Élément <button> ou <a> interne
label

Texte du bouton
icon

Icône à gauche du bouton
end-icon

Icône à droite du bouton
loading

Élément <mdui-circular-progress> en état de chargement
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Bouton icône Le composant bouton icône est principalement conçu pour les actions secondaires. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/button-icon.js'; ``` Importez le type TypeScript correspondant : ```ts import type { ButtonIcon } from 'mdui/components/button-icon.js'; ``` Exemple d'utilisation : ```html ``` ## Exemples {#examples} ### Icône {#example-icon} Utilisez l'attribut `icon` pour spécifier le nom d'une icône Material Icons. Vous pouvez aussi fournir une icône dans le slot par défaut. ```html ``` ### Variante {#example-variant} Utilisez l'attribut `variant` pour définir la variante du bouton icône. ```html ``` ### Sélectionnable {#example-selectable} Ajoutez l'attribut `selectable` pour rendre le bouton icône sélectionnable. ```html ``` Utilisez l'attribut `selected-icon` pour spécifier le nom de l'icône Material Icons à afficher lorsqu'il est sélectionné. Vous pouvez également utiliser le slot `selected-icon`. ```html ``` Lorsque le bouton icône est sélectionné, l'attribut `selected` passe à `true`. Vous pouvez également le présélectionner en ajoutant l'attribut `selected`. ```html ``` ### Lien {#example-link} Ajoutez l'attribut `href` pour utiliser le bouton icône comme un lien. Les attributs liés aux liens (`download`, `target`, `rel`) sont alors également disponibles. ```html ``` ### États désactivé et chargement {#example-disabled} Ajoutez l'attribut `disabled` pour désactiver le bouton icône ; ajoutez l'attribut `loading` pour lui appliquer un état de chargement. ```html ``` ## mdui-button-icon API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
variant variant true 'standard' | 'filled' | 'tonal' | 'outlined' 'standard'

Forme du bouton icône. Les valeurs possibles incluent :

  • standard : Adapté aux actions de la plus basse priorité
  • filled : Effet visuel fort, adapté aux actions de haute priorité
  • tonal : Effet visuel entre filled et outlined, adapté aux actions de priorité moyenne à élevée
  • outlined : Adapté aux actions de priorité moyenne
icon icon true string

Nom de l'icône Material Icons. Peut également être défini via le slot par défaut.
selected-icon selectedIcon true string

Nom de l'icône Material Icons pour l'état sélectionné. Peut également être défini via slot="selected-icon".
selectable selectable true boolean false

Si le composant peut être sélectionné
selected selected true boolean false

Si le composant est actuellement sélectionné
href href true string

URL cible du lien.

Si cette propriété est définie, le composant sera rendu comme un élément <a> et pourra utiliser les attributs liés aux liens.
download download true string

Nom du fichier à télécharger.

Remarque : Cette propriété ne s'applique que si l'attribut href est défini.
target target true '_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 true '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 true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
disabled disabled true boolean false

Si le composant est désactivé
loading loading true boolean false

Si le composant est en état de chargement
name name true string ''

Nom du bouton, qui sera envoyé avec les données du formulaire.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini.
value value true string ''

Valeur initiale du bouton, qui sera envoyée avec les données du formulaire.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini.
type type true 'submit' | 'reset' | 'button' 'button'

Type du bouton. Par défaut, il s'agit de button. Les valeurs possibles incluent :

  • submit : Au clic sur le bouton, les données du formulaire sont envoyées au serveur
  • reset : Au clic sur le bouton, tous les champs du formulaire sont réinitialisés à leurs valeurs initiales
  • button : Ce type de bouton n'a pas de comportement par défaut

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié.
form form true string

Élément <form> associé. La valeur de cet attribut doit être l'id d'un élément <form> dans la même page.

Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément <form>. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, y compris hors de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié.
formaction formAction true string

Spécifie l'URL de soumission du formulaire.

Si cet attribut est spécifié, il remplace l'attribut action de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié et que type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Spécifie le type de contenu à utiliser pour soumettre le formulaire au serveur. Les valeurs possibles incluent :

  • application/x-www-form-urlencoded : Valeur par défaut si l'attribut n'est pas spécifié
  • multipart/form-data : À utiliser lorsque le formulaire contient un élément <input type="file">
  • text/plain : Nouveau dans HTML5, utilisé pour le débogage

Si cet attribut est spécifié, il remplace l'attribut enctype de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié et que type="submit".
formmethod formMethod true 'post' | 'get'

Spécifie la méthode HTTP à utiliser pour soumettre le formulaire. Les valeurs possibles incluent :

  • post : Les données du formulaire sont incluses dans le corps de la requête et envoyées au serveur
  • get : Les données du formulaire sont ajoutées à l'URI du formulaire avec ? comme séparateur, et l'URI résultante est envoyée au serveur. À utiliser lorsque le formulaire n'a pas d'effets secondaires et ne contient que des caractères ASCII

Si cet attribut est défini, il remplace l'attribut method de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
formnovalidate formNoValidate true boolean false

Quand il est activé, la validation du formulaire n'est pas effectuée lors de la soumission.

Si cet attribut est défini, il remplace l'attribut novalidate de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Où afficher la réponse après l'envoi du formulaire. Les valeurs possibles incluent :

  • _self : Option par défaut, ouvre dans le contexte courant
  • _blank : Ouvre dans une nouvelle fenêtre
  • _parent : Ouvre dans le contexte parent
  • _top : Ouvre dans toute la fenêtre

Si cet attribut est défini, il remplace l'attribut target de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
undefined validity false ValidityState

État de validation du formulaire, voir ValidityState pour plus de détails
undefined validationMessage false string

Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
checkValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.
reportValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.

Si la validation échoue, un message d'erreur s'affiche également sur le composant.
setCustomValidity(message: string): void

Définit un message d'erreur personnalisé. Tant qu'il n'est pas vide, le champ est considéré comme invalide.
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
change

Se déclenche lorsque l'état de sélection change
invalid

Se déclenche lorsque la validation du champ du formulaire échoue
### Slots
Nom Description
Défaut

Composant Icône
selected-icon

Élément d'icône affiché à l'état sélectionné
### CSS Parts
Nom Description
button

Élément <button> ou <a> interne
icon

Icône à l'état non sélectionné
selected-icon

Icône à l'état sélectionné
loading

Élément <mdui-circular-progress> en état de chargement
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Carte Les Cartes sont des conteneurs polyvalents qui regroupent du contenu et des actions liés à un même sujet. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/card.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Card } from 'mdui/components/card.js'; ``` Exemple d'utilisation : ```html Carte ``` ## Exemples {#examples} ### Variante {#example-variant} Utilisez l'attribut `variant` pour définir la variante de la Carte. ```html ``` ### Cliquable {#example-clickable} Ajoutez l'attribut `clickable` pour rendre la Carte cliquable, ce qui ajoute un effet de survol et une ondulation au clic. ```html ``` ### Lien {#example-link} Ajoutez l'attribut `href` pour utiliser la Carte comme un lien. Les attributs liés aux liens (`download`, `target`, `rel`) sont alors également disponibles. ```html ``` ### État désactivé {#example-disabled} Ajoutez l'attribut `disabled` pour désactiver la Carte. ```html ``` ## mdui-card API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
variant variant true 'elevated' | 'filled' | 'outlined' 'elevated'

Forme de la carte. Les valeurs possibles incluent :

  • elevated : Carte avec ombre, séparation visuelle élevée de l'arrière-plan
  • filled : Carte avec couleur de fond, séparation visuelle faible de l'arrière-plan
  • outlined : Carte avec bordure, séparation visuelle la plus élevée de l'arrière-plan
clickable clickable true boolean false

Si la carte est cliquable. Lorsqu'elle est true, la carte aura un effet de survol de la souris et un effet d'ondulation au clic.
disabled disabled true boolean false

Si le composant est désactivé
href href true 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 true string

Nom du fichier à télécharger.

Remarque : Cette propriété ne s'applique que si l'attribut href est défini.
target target true '_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 true '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 true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
### Slots
Nom Description
Défaut

Contenu de la carte
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Case à cocher Les cases à cocher permettent aux utilisateurs de sélectionner une ou plusieurs options parmi un ensemble, ou d'activer/désactiver une option unique. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/checkbox.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Checkbox } from 'mdui/components/checkbox.js'; ``` Exemple d'utilisation : ```html Case à cocher ``` ## Exemples {#examples} ### État coché {#example-checked} Lorsque la case à cocher est cochée, l'attribut `checked` vaut `true`. Ajoutez `checked` pour qu'elle soit cochée par défaut. ```html Case à cocher ``` ### État désactivé {#example-disabled} Ajoutez l'attribut `disabled` pour désactiver la case à cocher. ```html Case à cocher Case à cocher ``` ### État indéterminé {#example-indeterminate} Ajoutez l'attribut `indeterminate` pour faire passer la case à cocher à l'état indéterminé. ```html Case à cocher ``` ### Icône {#example-icon} Utilisez les attributs `unchecked-icon`, `checked-icon` et `indeterminate-icon` pour définir respectivement les icônes Material Icons des états non coché, coché et indéterminé. Vous pouvez également utiliser les slots correspondants. ```html Case à cocher Case à cocher
Case à cocher Case à cocher ``` ## mdui-checkbox API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
disabled disabled true boolean false

Si le composant est désactivé
checked checked true boolean false

Si le composant est coché
undefined defaultChecked false boolean false

État coché par défaut. Lors de la réinitialisation du formulaire, il reviendra à cet état. Cette propriété ne peut être définie que par une propriété JavaScript.
indeterminate indeterminate true boolean false

Si le composant est dans un état indéterminé
required required true boolean false

Si la case à cocher doit être cochée lors de la soumission du formulaire
form form true string

Élément <form> associé. La valeur de cet attribut doit être l'id d'un élément <form> dans la même page.

Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément <form>. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, pas seulement en tant qu'enfant de l'élément <form>.
name name true string ''

Nom de la case à cocher, qui sera envoyé avec les données du formulaire
value value true string 'on'

Valeur de la case à cocher, qui sera envoyée avec les données du formulaire
unchecked-icon uncheckedIcon true string

Nom de l'icône Material Icons pour l'état non coché. Peut également être défini via slot="unchecked-icon".
checked-icon checkedIcon true string

Nom de l'icône Material Icons pour l'état coché. Peut également être défini via slot="checked-icon".
indeterminate-icon indeterminateIcon true string

Nom de l'icône Material Icons pour l'état indéterminé. Peut également être défini via slot="indeterminate-icon".
undefined validity false ValidityState

État de validation du formulaire, voir ValidityState pour plus de détails
undefined validationMessage false string

Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
autofocus autofocus true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
### Méthodes
Nom Description
checkValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.
reportValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.

Si la validation échoue, un message d'erreur s'affiche également sur le composant.
setCustomValidity(message: string): void

Définit un texte d'erreur personnalisé. Tant que ce texte n'est pas vide, cela signifie que le champ n'est pas valide.
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
change

Se déclenche lorsque l'état de sélection change
input

Se déclenche lorsque l'état de sélection change
invalid

Se déclenche lorsque la validation du champ du formulaire échoue
### Slots
Nom Description
Défaut

Texte de la case à cocher
unchecked-icon

Icône à l'état non coché
checked-icon

Icône à l'état coché
indeterminate-icon

Icône à l'état indéterminé
### CSS Parts
Nom Description
control

Conteneur de l'Icône de gauche
unchecked-icon

Icône à l'état non coché
checked-icon

Icône à l'état coché
indeterminate-icon

Icône à l'état indéterminé
label

Texte de la case à cocher
# Composant Chip Le composant Chip permet de représenter des informations, de sélectionner des options, de filtrer du contenu ou de déclencher des actions associées. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/chip.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Chip } from 'mdui/components/chip.js'; ``` Exemple d'utilisation : ```html Chip ``` ## Exemples {#examples} ### Variante {#example-variant} Utilisez l'attribut `variant` pour définir la variante du chip. Il existe 4 variantes, à choisir selon l'usage : - `assist` : Pour les actions auxiliaires liées au contexte actuel. Exemple : partager, ajouter aux favoris. - `filter` : Pour filtrer le contenu. Exemple : filtrer les résultats de recherche. - `input` : Pour représenter des fragments d'informations saisis par l'utilisateur. Exemple : contacts dans le champ "À" de Gmail. - `suggestion` : Pour fournir des suggestions dynamiques afin de simplifier les actions de l'utilisateur. Exemple : suggestions de messages dans une application de chat. ```html Assist Filter Input Suggestion ``` ### Surélevé {#example-elevated} Ajoutez l'attribut `elevated` pour appliquer une ombre au chip. ```html Chip ``` ### Icône {#example-icon} Utilisez les attributs `icon` et `end-icon` pour ajouter une icône Material Icons à gauche et à droite du chip. Vous pouvez également utiliser les slots `icon` et `end-icon`. ```html Icon Icon fin Slot ``` ### Lien {#example-link} Ajoutez l'attribut `href` pour transformer le chip en lien. Les attributs liés aux liens (`download`, `target`, `rel`) sont alors également disponibles. ```html Lien ``` ### États désactivé et chargement {#example-disabled} Ajoutez l'attribut `disabled` pour désactiver le chip, et l'attribut `loading` pour lui appliquer un état de chargement. ```html Désactivé Chargement Chargement & Désactivé ``` ### Sélectionnable {#example-selectable} Ajoutez l'attribut `selectable` pour rendre le chip sélectionnable. ```html Chip ``` Utilisez l'attribut `selected-icon` pour spécifier le nom de l'icône Material Icons à afficher lorsqu'il est sélectionné. Vous pouvez également utiliser le slot `selected-icon`. ```html Chip Chip ``` Lorsque le chip est sélectionné, l'attribut `selected` passe à `true`. Vous pouvez également le présélectionner en ajoutant l'attribut `selected`. ```html Chip ``` ### Supprimable {#example-deletable} Ajoutez l'attribut `deletable`. Une icône de suppression apparaît alors à droite du chip. Cliquer sur cette icône déclenche l'événement `delete`. Vous pouvez personnaliser l'icône de suppression avec l'attribut `delete-icon` ou le slot `delete-icon`. ```html Chip Chip Chip ``` ## mdui-chip API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
variant variant true 'assist' | 'filter' | 'input' | 'suggestion' 'assist'

Forme du Chip. Valeurs possibles :

  • assist : Sert à afficher des actions d'assistance liées au contexte actuel, par exemple partager ou ajouter aux favoris.
  • filter : Sert à filtrer le contenu, par exemple les résultats de recherche.
  • input : Sert à représenter un fragment d'information saisi par l'utilisateur, par exemple un contact dans le champ "Destinataires" de Gmail.
  • suggestion : Sert à proposer des suggestions générées dynamiquement pour simplifier les actions de l'utilisateur, par exemple des suggestions de messages dans une application de chat
elevated elevated true boolean false

Si l'ombre doit être affichée
selectable selectable true boolean false

Si la Chip peut être sélectionnée
selected selected true boolean false

Si la Chip est sélectionnée
deletable deletable true boolean false

Si la Chip peut être supprimée. Si true, une icône de suppression s'affiche à droite de la Chip.
icon icon true string

Nom de l'icône Material Icons à gauche. Peut également être défini via slot="icon".
selected-icon selectedIcon true string

Nom de l'icône Material Icons à gauche à l'état sélectionné. Peut également être défini via slot="selected-icon".
end-icon endIcon true string

Nom de l'icône Material Icons à droite. Peut également être défini via slot="end-icon".
delete-icon deleteIcon true string

Lorsqu'elle est supprimable, nom de l'icône Material Icons pour l'icône de suppression à droite. Peut également être défini via slot="delete-icon".
href href true string

URL cible du lien.

Si cette propriété est définie, le composant sera rendu comme un élément <a> et pourra utiliser les attributs liés aux liens.
download download true string

Nom du fichier à télécharger.

Remarque : Cette propriété ne s'applique que si l'attribut href est défini.
target target true '_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 true '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 true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
disabled disabled true boolean false

Si le composant est désactivé
loading loading true boolean false

Si le composant est en état de chargement
name name true string ''

Nom du bouton, qui sera envoyé avec les données du formulaire.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini.
value value true string ''

Valeur initiale du bouton, qui sera envoyée avec les données du formulaire.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini.
type type true 'submit' | 'reset' | 'button' 'button'

Type du bouton. Par défaut, il s'agit de button. Les valeurs possibles incluent :

  • submit : Au clic sur le bouton, les données du formulaire sont envoyées au serveur
  • reset : Au clic sur le bouton, tous les champs du formulaire sont réinitialisés à leurs valeurs initiales
  • button : Ce type de bouton n'a pas de comportement par défaut

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié.
form form true string

Élément <form> associé. La valeur de cet attribut doit être l'id d'un élément <form> dans la même page.

Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément <form>. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, y compris hors de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié.
formaction formAction true string

Spécifie l'URL de soumission du formulaire.

Si cet attribut est spécifié, il remplace l'attribut action de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié et que type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Spécifie le type de contenu à utiliser pour soumettre le formulaire au serveur. Les valeurs possibles incluent :

  • application/x-www-form-urlencoded : Valeur par défaut si l'attribut n'est pas spécifié
  • multipart/form-data : À utiliser lorsque le formulaire contient un élément <input type="file">
  • text/plain : Nouveau dans HTML5, utilisé pour le débogage

Si cet attribut est spécifié, il remplace l'attribut enctype de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié et que type="submit".
formmethod formMethod true 'post' | 'get'

Spécifie la méthode HTTP à utiliser pour soumettre le formulaire. Les valeurs possibles incluent :

  • post : Les données du formulaire sont incluses dans le corps de la requête et envoyées au serveur
  • get : Les données du formulaire sont ajoutées à l'URI du formulaire avec ? comme séparateur, et l'URI résultante est envoyée au serveur. À utiliser lorsque le formulaire n'a pas d'effets secondaires et ne contient que des caractères ASCII

Si cet attribut est défini, il remplace l'attribut method de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
formnovalidate formNoValidate true boolean false

Quand il est activé, la validation du formulaire n'est pas effectuée lors de la soumission.

Si cet attribut est défini, il remplace l'attribut novalidate de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Où afficher la réponse après l'envoi du formulaire. Les valeurs possibles incluent :

  • _self : Option par défaut, ouvre dans le contexte courant
  • _blank : Ouvre dans une nouvelle fenêtre
  • _parent : Ouvre dans le contexte parent
  • _top : Ouvre dans toute la fenêtre

Si cet attribut est défini, il remplace l'attribut target de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
undefined validity false ValidityState

État de validation du formulaire, voir ValidityState pour plus de détails
undefined validationMessage false string

Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
checkValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.
reportValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.

Si la validation échoue, un message d'erreur s'affiche également sur le composant.
setCustomValidity(message: string): void

Définit un message d'erreur personnalisé. Tant qu'il n'est pas vide, le champ est considéré comme invalide.
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
invalid

Se déclenche lorsque la validation du champ du formulaire échoue
change

Se déclenche lorsque l'état de sélection change
delete

Se déclenche lors du clic sur l'icône de suppression
### Slots
Nom Description
Défaut

Texte de la Chip
icon

Élément de gauche
end-icon

Élément de droite
selected-icon

Élément de gauche à l'état sélectionné
delete-icon

Élément de suppression à droite lorsqu'elle est supprimable
### CSS Parts
Nom Description
button

Élément <button> ou <a> interne
label

Texte de la Chip
icon

Icône de gauche
end-icon

Icône de droite
selected-icon

Icône de gauche à l'état sélectionné
delete-icon

Icône de suppression à droite lorsqu'elle est supprimable
loading

Élément <mdui-circular-progress> en état de chargement
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Indicateur de progression circulaire L'indicateur de progression circulaire sert à indiquer la progression d'une tâche, comme le chargement de données ou l'envoi d'un formulaire. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/circular-progress.js'; ``` Importez le type TypeScript correspondant : ```ts import type { CircularProgress } from 'mdui/components/circular-progress.js'; ``` Exemple d'utilisation : ```html ``` ## Exemples {#examples} ### Progression déterminée {#example-value} L'indicateur de progression circulaire est par défaut en mode indéterminé. Vous pouvez définir la progression actuelle avec l'attribut `value` (la valeur maximale par défaut est `1`). ```html ``` Vous pouvez définir la valeur maximale avec l'attribut `max`. ```html ``` ## mdui-circular-progress API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
max max true number 1

Valeur maximale du Circular Progress. La valeur par défaut est 1.
value value false number

Valeur actuelle du Circular Progress. Si cette valeur n'est pas spécifiée, l'état est indéterminé.
# Composant Collapse Le composant Collapse permet de regrouper et de masquer des zones de contenu complexes afin de garder une interface claire. Notez que le composant Collapse ne fournit aucun style par défaut ; vous devez ajouter vos propres styles ou l'utiliser avec d'autres composants. ## Utilisation {#usage} Importez les composants : ```js import 'mdui/components/collapse.js'; import 'mdui/components/collapse-item.js'; ``` Importez les types TypeScript correspondants : ```ts import type { Collapse } from 'mdui/components/collapse.js'; import type { CollapseItem } from 'mdui/components/collapse-item.js'; ``` Exemple d'utilisation : ```html premier contenu second contenu ``` ## Exemples {#examples} ### En-tête et contenu du panneau {#example-header} L'attribut `header` du composant `` définit le texte de l'en-tête. Vous pouvez également utiliser le slot `header` pour personnaliser l'élément d'en-tête. Le slot par défaut est utilisé pour le contenu du panneau. ```html Élément 1
Élément 1 - sous-élément
Élément 2
Élément 2 - sous-élément
``` ### Mode accordéon {#example-accordion} Ajoutez l'attribut `accordion` au composant `` pour activer le mode accordéon, dans lequel un seul panneau peut être ouvert à la fois. ```html Élément 1
Élément 1 - sous-élément
Élément 2
Élément 2 - sous-élément
``` ### Définir le panneau actif {#example-value} L'attribut `value` du composant `` vous permet d'obtenir le panneau actuellement ouvert ou de définir celui(s) à ouvrir. En mode accordéon, `value` est une chaîne de caractères. Vous pouvez la manipuler via les attributs HTML ou JavaScript. Hors mode accordéon, `value` est un tableau, manipulable uniquement via les propriétés JavaScript. ```html Mode accordéon Élément 1
Élément 1 - sous-élément
Élément 2
Élément 2 - sous-élément
Mode non-accordéon Élément 1
Élément 1 - sous-élément
Élément 2
Élément 2 - sous-élément
``` ### État désactivé {#example-disabled} Ajoutez l'attribut `disabled` au composant `` pour désactiver tout le groupe. Ajoutez-le à un `` pour désactiver un panneau spécifique. ```html Tout désactiver Élément 1
Élément 1 - sous-élément
Élément 2
Élément 2 - sous-élément
Désactiver le premier panneau Élément 1
Élément 1 - sous-élément
Élément 2
Élément 2 - sous-élément
``` ### Élément déclencheur {#example-trigger} Par défaut, cliquer sur toute la zone d'en-tête du panneau déclenche le pliage/dépliage. Utilisez l'attribut `trigger` du composant `` pour spécifier un élément déclencheur (sélecteur CSS ou élément DOM). ```html Élément 1
Élément 1 - sous-élément
``` ## mdui-collapse-item API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
value value true string

Valeur de ce Collapse Item
header header true string

Texte de l'en-tête de ce Collapse Item
disabled disabled true boolean false

Si ce Collapse Item est désactivé
trigger trigger false string | HTMLElement | JQ<HTMLElement>

Élément dont le clic déclenche le pliage. La valeur peut être un sélecteur CSS, un élément DOM ou un objet JQ. Par défaut, le clic sur toute la zone d'en-tête déclenche le pliage.
### Événements
Nom Description
open

Se déclenche lorsque l'ouverture commence
opened

Se déclenche lorsque l'animation d'ouverture est terminée
close

Se déclenche lorsque la fermeture commence
closed

Se déclenche lorsque l'animation de fermeture est terminée
### Slots
Nom Description
Défaut

Contenu principal du Collapse Item
header

Contenu de l'en-tête du Collapse Item
### CSS Parts
Nom Description
header

Contenu de l'en-tête du Collapse
body

Contenu principal du Collapse
## mdui-collapse API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
accordion accordion true boolean false

Si le mode accordéon est activé
value value false string | string[]

Valeur de l'élément <mdui-collapse-item> actuellement déplié.

Remarque : L'attribut HTML de cette propriété est toujours une chaîne de caractères, et ne peut être défini comme valeur initiale que lorsque accordion est true. La valeur de la propriété JavaScript est une chaîne lorsque accordion est true, et un tableau de chaînes lorsque accordion est false. Par conséquent, lorsque accordion est false, vous ne pouvez modifier cette valeur qu'en modifiant la valeur de la propriété JavaScript.
disabled disabled true boolean false

Si ce Collapse est désactivé
### Événements
Nom Description
change

Se déclenche lorsque le panneau actuellement ouvert change
### Slots
Nom Description
Défaut

Composants <mdui-collapse-item>
# Composant Boîte de dialogue Le composant boîte de dialogue permet d'afficher des informations importantes au moment opportun, sans interrompre inutilement le parcours de l'utilisateur. En plus d'utiliser ce composant directement, mdui propose quatre fonctions utilitaires : [`mdui.dialog`](/fr/docs/2/functions/dialog), [`mdui.alert`](/fr/docs/2/functions/alert), [`mdui.confirm`](/fr/docs/2/functions/confirm), [`mdui.prompt`](/fr/docs/2/functions/prompt). Ces fonctions simplifient l'utilisation du composant boîte de dialogue. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/dialog.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Dialog } from 'mdui/components/dialog.js'; ``` Exemple d'utilisation : ```html Boîte de dialogue Fermer Ouvrir la boîte de dialogue ``` ## Exemples {#examples} ### Fermeture au clic sur l'arrière-plan {#example-close-on-overlay-click} Ajoutez l'attribut `close-on-overlay-click`. Cliquer sur l'arrière-plan (overlay) ferme alors la boîte de dialogue. ```html Boîte de dialogue Ouvrir la boîte de dialogue ``` ### Fermeture avec la touche Échap {#example-close-on-esc} Ajoutez l'attribut `close-on-esc`. Appuyer sur la touche Échap ferme alors la boîte de dialogue. ```html Boîte de dialogue Ouvrir la boîte de dialogue ``` ### Plein écran {#example-fullscreen} Ajoutez l'attribut `fullscreen` pour afficher la boîte de dialogue en plein écran. ```html Boîte de dialogue Fermer Ouvrir la boîte de dialogue ``` ### Icône {#example-icon} Utilisez l'attribut `icon` pour ajouter une icône Material Icons en haut de la boîte de dialogue. ```html Dialog Ouvrir la boîte de dialogue ``` Vous pouvez également utiliser le slot `icon` pour ajouter un élément d'icône en haut. ```html Dialog Ouvrir la boîte de dialogue ``` ### Titre et description {#example-headline} Utilisez les attributs `headline` et `description` pour définir le titre et la description de la boîte de dialogue. ```html Ouvrir la boîte de dialogue ``` Vous pouvez également utiliser les slots `headline` et `description`. ```html Supprimer les images sélectionnées ? Les images seront définitivement supprimées de votre compte et de tous vos appareils synchronisés. Ouvrir la boîte de dialogue ``` ### Boutons d'action en bas {#example-action} Utilisez le slot `action` pour ajouter des boutons d'action en bas. ```html Annuler Supprimer Ouvrir la boîte de dialogue ``` Ajoutez l'attribut `stacked-actions` pour afficher les boutons d'action verticalement. ```html Activer la localisation Non merci Ouvrir la boîte de dialogue ``` ### Contenu en haut {#example-header} Utilisez le slot `header` pour ajouter du contenu en haut de la boîte de dialogue. ```html Titre Enregistrer
Ouvrir la boîte de dialogue ``` ## mdui-dialog API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
icon icon true string

Nom de l'icône Material Icons en haut. Peut également être défini via slot="icon".
headline headline true string

Titre. Peut également être défini via slot="headline".
description description true string

Texte sous le titre. Peut également être défini via slot="description".
open open true boolean false

Si la boîte de dialogue est ouverte
fullscreen fullscreen true boolean false

Si la boîte de dialogue est affichée en plein écran
close-on-esc closeOnEsc true boolean false

Si la boîte de dialogue peut être fermée en appuyant sur la touche Échap
close-on-overlay-click closeOnOverlayClick true boolean false

Si la boîte de dialogue peut être fermée en cliquant sur le calque de superposition
stacked-actions stackedActions true boolean false

Si les boutons d'action en bas doivent être empilés verticalement
### Événements
Nom Description
open

Se déclenche lorsque la boîte de dialogue commence à s'ouvrir. Vous pouvez empêcher l'ouverture de la boîte de dialogue en appelant event.preventDefault().
opened

Se déclenche lorsque l'animation d'ouverture de la boîte de dialogue est terminée.
close

Se déclenche lorsque la boîte de dialogue commence à se fermer. Vous pouvez empêcher la fermeture de la boîte de dialogue en appelant event.preventDefault().
closed

Se déclenche lorsque l'animation de fermeture de la boîte de dialogue est terminée.
overlay-click

Se déclenche lors du clic sur le calque de superposition
### Slots
Nom Description
header

Élément supérieur, contient par défaut le slot icon et le slot headline.
icon

Icône supérieure
headline

Titre supérieur
description

Texte sous le titre
Défaut

Contenu principal de la boîte de dialogue
action

Éléments dans la barre d'action inférieure
### CSS Parts
Nom Description
overlay

Calque de superposition
panel

Conteneur de la boîte de dialogue
header

Partie en-tête de la boîte de dialogue, contient l'icône et le titre
icon

Icône supérieure, située dans l'en-tête
headline

Titre supérieur, situé dans l'en-tête
body

Partie corps de la boîte de dialogue
description

Partie texte secondaire, située dans le corps
action

Boutons d'action inférieurs
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Séparateur Les séparateurs sont de fines lignes utilisées pour regrouper le contenu dans les listes et les conteneurs. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/divider.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Divider } from 'mdui/components/divider.js'; ``` Exemple d'utilisation : ```html ``` ## Exemples {#examples} ### Séparateur vertical {#example-vertical} Ajoutez l'attribut `vertical` pour afficher le séparateur verticalement. ```html
``` ### Retrait à gauche {#example-inset} Ajoutez l'attribut `inset` pour créer une indentation à gauche. Souvent utilisé dans les listes pour aligner le séparateur avec le texte. ```html Élément 1 Élément 2 ``` ### Retrait des deux côtés {#example-middle} Ajoutez l'attribut `middle` pour créer une indentation des deux côtés. ```html Élément 1 Élément 2 ``` ## mdui-divider API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
vertical vertical true boolean false

Si le Séparateur est vertical
inset inset true boolean false

Si un retrait à gauche doit être appliqué
middle middle true boolean false

Si un retrait à gauche et à droite doit être appliqué
# Composant Menu déroulant Le menu déroulant affiche un contenu contextuel, généralement associé à un menu. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/dropdown.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Dropdown } from 'mdui/components/dropdown.js'; ``` Exemple d'utilisation : ```html Ouvrir Élément 1 Élément 2 ``` ## Exemples {#examples} ### État désactivé {#example-disabled} Ajoutez l'attribut `disabled` pour désactiver le menu déroulant. ```html Ouvrir Élément 1 Élément 2 ``` ### Position d'ouverture {#example-placement} Utilisez l'attribut `placement` pour définir la position du menu déroulant. ```html Ouvrir Élément 1 Élément 2 ``` ### Mode de déclenchement {#example-trigger} Utilisez l'attribut `trigger` pour choisir le mode d'ouverture du menu déroulant. ```html Ouvrir Élément 1 Élément 2 ``` ### Ouverture à la position du pointeur {#example-open-on-pointer} Ajoutez l'attribut `open-on-pointer` pour ouvrir le menu à la position du pointeur. On l'associe souvent à `trigger="contextmenu"` pour créer un menu contextuel. ```html Faites un clic droit dans cette zone pour ouvrir le menu Élément 1 Élément 2 ``` ### Maintenir le menu ouvert après clic {#example-stay-open-on-click} Dans un menu déroulant, cliquer sur un élément du menu le ferme par défaut. Ajoutez l'attribut `stay-open-on-click` pour empêcher cette fermeture et laisser le menu déroulant ouvert après le clic. ```html Ouvrir Élément 1 Élément 2 ``` ### Délai d'ouverture/fermeture {#example-delay} Lorsque `trigger="hover"` est défini, vous pouvez utiliser les attributs `open-delay` et `close-delay` pour définir les délais d'ouverture et de fermeture. ```html Ouvrir Élément 1 Élément 2 ``` ## mdui-dropdown API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
open open true boolean false

Si le Dropdown est ouvert
disabled disabled true boolean false

Si le Dropdown est désactivé
trigger trigger true 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string 'click'

Mode d'ouverture du Dropdown. Il accepte plusieurs valeurs, séparées par des espaces. Les valeurs possibles incluent :

  • click : Se déclenche au clic
  • hover : Se déclenche au survol de la souris
  • focus : Se déclenche au focus
  • contextmenu : Se déclenche au clic droit ou par un appui long
  • manual : Ne peut être ouvert ou fermé que par programmation, aucun autre mode de déclenchement ne peut être spécifié
placement placement true 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Position du contenu du Dropdown. Les valeurs possibles incluent :

  • auto : Position déterminée automatiquement
  • top-start : En haut, aligné à gauche
  • top : En haut, centré
  • top-end : En haut, aligné à droite
  • bottom-start : En bas, aligné à gauche
  • bottom : En bas, centré
  • bottom-end : En bas, aligné à droite
  • left-start : À gauche, aligné en haut
  • left : À gauche, centré
  • left-end : À gauche, aligné en bas
  • right-start : À droite, aligné en haut
  • right : À droite, centré
  • right-end : À droite, aligné en bas
stay-open-on-click stayOpenOnClick true boolean false

Après un clic sur <mdui-menu-item>, le Dropdown reste-t-il ouvert ?
open-delay openDelay true number 150

Délai d'ouverture du Dropdown lors du déclenchement par survol de la souris, en millisecondes.
close-delay closeDelay true number 150

Délai de fermeture du Dropdown lors du déclenchement par survol de la souris, en millisecondes.
open-on-pointer openOnPointer true boolean false

Indique si le Dropdown doit s'ouvrir à l'endroit du pointeur, ce qui est souvent utile pour afficher un menu contextuel.
### Événements
Nom Description
open

Se déclenche lorsque le Dropdown commence à s'ouvrir. Vous pouvez empêcher l'ouverture du Dropdown en appelant event.preventDefault().
opened

Se déclenche lorsque l'animation d'ouverture du Dropdown est terminée.
close

Se déclenche lorsque le Dropdown commence à se fermer. Vous pouvez empêcher la fermeture du Dropdown en appelant event.preventDefault().
closed

Se déclenche lorsque l'animation de fermeture du Dropdown est terminée.
### Slots
Nom Description
Défaut

Contenu du Dropdown
trigger

Élément déclencheur du Dropdown, par exemple un élément <mdui-button>.
### CSS Parts
Nom Description
trigger

Conteneur de l'élément déclencheur du Dropdown, c'est-à-dire le conteneur du slot trigger.
panel

Conteneur du contenu du Dropdown
### Propriétés CSS personnalisées
Nom Description
--z-index

Valeur CSS z-index du composant.
# Composant Floating Action Button Les Floating Action Buttons (FAB) mettent en avant l'action principale d'une page en la rendant immédiatement accessible. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/fab.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Fab } from 'mdui/components/fab.js'; ``` Exemple d'utilisation : ```html ``` ## Exemples {#examples} ### Icône {#example-icon} Utilisez l'attribut `icon` pour spécifier le nom d'une icône Material Icons. Vous pouvez également utiliser le slot `icon`. ```html ``` ### État étendu {#example-extended} Ajoutez l'attribut `extended` pour que le FAB s'affiche en mode étendu, affichant le texte du slot par défaut. ```html Composer ``` ### Variante {#example-variant} Utilisez l'attribut `variant` pour définir la variante du FAB. ```html ``` ### Taille {#example-size} Utilisez l'attribut `size` pour définir la taille du FAB. ```html ``` ### Lien {#example-link} Ajoutez l'attribut `href` pour utiliser le FAB comme un lien. Les attributs liés aux liens (`download`, `target`, `rel`) sont alors également disponibles. ```html ``` ### États désactivé et chargement {#example-disabled} Ajoutez l'attribut `disabled` pour désactiver le FAB ; ajoutez l'attribut `loading` pour lui appliquer un état de chargement. ```html ``` ## mdui-fab API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
variant variant true 'primary' | 'surface' | 'secondary' | 'tertiary' 'primary'

Forme du Floating Action Button. Les différentes formes de ce composant ne diffèrent que par la couleur. Les valeurs possibles incluent :

  • primary : Utilise la couleur de fond du conteneur Primaire
  • surface : Utilise la couleur de fond élevée du conteneur Surface
  • secondary : Utilise la couleur de fond du conteneur Secondaire
  • tertiary : Utilise la couleur de fond du conteneur Tertiaire
size size true 'normal' | 'small' | 'large' 'normal'

Taille du Floating Action Button. Les valeurs possibles incluent :

  • normal : Taille normale du Floating Action Button
  • small : Petit Floating Action Button
  • large : Grand Floating Action Button
icon icon true string

Nom de l'icône Material Icons. Peut également être défini via slot="icon".
extended extended true boolean false

Si le Floating Action Button est en état étendu (avec texte)
href href true string

URL cible du lien.

Si cette propriété est définie, le composant sera rendu comme un élément <a> et pourra utiliser les attributs liés aux liens.
download download true string

Nom du fichier à télécharger.

Remarque : Cette propriété ne s'applique que si l'attribut href est défini.
target target true '_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 true '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 true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
disabled disabled true boolean false

Si le composant est désactivé
loading loading true boolean false

Si le composant est en état de chargement
name name true string ''

Nom du bouton, qui sera envoyé avec les données du formulaire.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini.
value value true string ''

Valeur initiale du bouton, qui sera envoyée avec les données du formulaire.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini.
type type true 'submit' | 'reset' | 'button' 'button'

Type du bouton. Par défaut, il s'agit de button. Les valeurs possibles incluent :

  • submit : Au clic sur le bouton, les données du formulaire sont envoyées au serveur
  • reset : Au clic sur le bouton, tous les champs du formulaire sont réinitialisés à leurs valeurs initiales
  • button : Ce type de bouton n'a pas de comportement par défaut

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié.
form form true string

Élément <form> associé. La valeur de cet attribut doit être l'id d'un élément <form> dans la même page.

Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément <form>. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, y compris hors de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié.
formaction formAction true string

Spécifie l'URL de soumission du formulaire.

Si cet attribut est spécifié, il remplace l'attribut action de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié et que type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Spécifie le type de contenu à utiliser pour soumettre le formulaire au serveur. Les valeurs possibles incluent :

  • application/x-www-form-urlencoded : Valeur par défaut si l'attribut n'est pas spécifié
  • multipart/form-data : À utiliser lorsque le formulaire contient un élément <input type="file">
  • text/plain : Nouveau dans HTML5, utilisé pour le débogage

Si cet attribut est spécifié, il remplace l'attribut enctype de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié et que type="submit".
formmethod formMethod true 'post' | 'get'

Spécifie la méthode HTTP à utiliser pour soumettre le formulaire. Les valeurs possibles incluent :

  • post : Les données du formulaire sont incluses dans le corps de la requête et envoyées au serveur
  • get : Les données du formulaire sont ajoutées à l'URI du formulaire avec ? comme séparateur, et l'URI résultante est envoyée au serveur. À utiliser lorsque le formulaire n'a pas d'effets secondaires et ne contient que des caractères ASCII

Si cet attribut est défini, il remplace l'attribut method de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
formnovalidate formNoValidate true boolean false

Quand il est activé, la validation du formulaire n'est pas effectuée lors de la soumission.

Si cet attribut est défini, il remplace l'attribut novalidate de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Où afficher la réponse après l'envoi du formulaire. Les valeurs possibles incluent :

  • _self : Option par défaut, ouvre dans le contexte courant
  • _blank : Ouvre dans une nouvelle fenêtre
  • _parent : Ouvre dans le contexte parent
  • _top : Ouvre dans toute la fenêtre

Si cet attribut est défini, il remplace l'attribut target de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
undefined validity false ValidityState

État de validation du formulaire, voir ValidityState pour plus de détails
undefined validationMessage false string

Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
checkValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.
reportValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.

Si la validation échoue, un message d'erreur s'affiche également sur le composant.
setCustomValidity(message: string): void

Définit un message d'erreur personnalisé. Tant qu'il n'est pas vide, le champ est considéré comme invalide.
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
invalid

Se déclenche lorsque la validation du champ du formulaire échoue
### Slots
Nom Description
Défaut

Texte
icon

Icône
### CSS Parts
Nom Description
button

Élément <button> ou <a> interne
label

Texte à droite
icon

Icône à gauche
loading

Élément <mdui-circular-progress> en état de chargement
### Propriétés CSS personnalisées
Nom Description
--shape-corner-small

Taille des coins arrondis du composant lorsque size="small". Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.
--shape-corner-normal

Taille des coins arrondis du composant lorsque size="normal". Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.
--shape-corner-large

Taille des coins arrondis du composant lorsque size="large". Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.
# Composant Icône Les icônes servent à représenter des actions courantes. Ce composant prend en charge les icônes Material Icons ainsi que les icônes SVG. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/icon.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Icon } from 'mdui/components/icon.js'; ``` Exemple d'utilisation : ```html ``` ### Utiliser les icônes Material Icons {#usage-material-icons} Pour utiliser les icônes Material Icons avec ce composant, vous devez importer le fichier CSS de Material Icons. Il existe 5 variantes : Filled, Outlined, Rounded, Sharp, Two Tone. Importez le fichier CSS correspondant à la variante que vous souhaitez utiliser : ```html ``` Lors de l'utilisation du composant, passez le nom de l'icône dans l'attribut `name` en ajoutant un suffixe correspondant à sa variante (pas de suffixe pour la variante Filled). Voici les 5 variantes de l'icône `delete` : ```html ``` Vous pouvez utiliser l'outil de [recherche d'icônes Material Icons](/fr/docs/2/components/icon#search) en bas de page. Cliquez sur l'icône souhaitée pour copier automatiquement son code dans le presse-papiers. De plus, mdui fournit un paquet indépendant [`@mdui/icons`](/fr/docs/2/libraries/icons). Chaque icône de ce paquet est un fichier séparé, ce qui permet une importation à la demande sans avoir à importer toute la bibliothèque. ### Utiliser des icônes SVG {#usage-svg} Ce composant prend également en charge les icônes SVG. Vous pouvez passer le lien de l'icône SVG via l'attribut `src`. Par exemple : ```html ``` Vous pouvez également passer le contenu SVG directement dans le slot par défaut. Par exemple : ```html ``` ## Exemples {#examples} ### Définir la couleur {#example-color} Modifiez la propriété CSS `color` de l'élément `` ou de son parent pour changer la couleur de l'icône. ```html ``` ### Définir la taille {#example-size} Modifiez la propriété CSS `font-size` de l'élément `` ou de son parent pour changer la taille de l'icône. ```html ``` ## mdui-icon API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
name name true string

Nom de l'icône Material Icons
src src true string

Chemin de l'icône SVG
### Slots
Nom Description
Défaut

Contenu de l'icône svg
# Composant Layout Le composant Layout fournit un système de disposition flexible pour créer des structures de page complexes. ## Utilisation {#usage} Importez les composants : ```js import 'mdui/components/layout.js'; import 'mdui/components/layout-item.js'; import 'mdui/components/layout-main.js'; ``` Importez les types TypeScript correspondants : ```ts import type { Layout } from 'mdui/components/layout.js'; import type { LayoutItem } from 'mdui/components/layout-item.js'; import type { LayoutMain } from 'mdui/components/layout-main.js'; ``` **Présentation :** Le système de Layout se construit de l'extérieur vers l'intérieur. Chaque composant de Layout, c'est-à-dire un ``, occupe un espace dans l'une des quatre directions (haut, bas, gauche, droite). Les composants suivants occupent l'espace restant. Les composants suivants héritent directement de `` et peuvent donc également être utilisés comme composants de Layout : - [``](/fr/docs/2/components/navigation-bar) - [``](/fr/docs/2/components/navigation-drawer) - [``](/fr/docs/2/components/navigation-rail) - [``](/fr/docs/2/components/bottom-app-bar) - [``](/fr/docs/2/components/top-app-bar) La dernière partie du système de Layout est le composant ``, qui occupe l'espace restant. Vous pouvez y placer le contenu de votre page. ## Exemples {#examples} ### Ordre des composants de Layout {#layout-default-order} Par défaut, les composants de Layout occupent l'espace dans l'ordre où ils apparaissent dans le code. Ce principe apparaît dans les deux exemples suivants, où l'ordre de [``](/fr/docs/2/components/top-app-bar) et [``](/fr/docs/2/components/navigation-drawer) est inversé.

Veuillez consulter cet exemple sur un écran large.

```html Top App Bar Navigation Drawer Principal ``` ```html Navigation Drawer Top App Bar Principal ``` On voit que lorsque [``](/fr/docs/2/components/top-app-bar) est placé avant [``](/fr/docs/2/components/navigation-drawer), il occupe d'abord toute la largeur de l'écran, tandis que [``](/fr/docs/2/components/navigation-drawer) n'occupe que la hauteur restante. En inversant l'ordre, on obtient l'effet inverse. ### Position des composants de Layout {#example-placement} Pour un composant ``, vous pouvez utiliser l'attribut `placement` pour spécifier sa position (haut, bas, gauche, droite). Pour les composants [``](/fr/docs/2/components/navigation-drawer) et [``](/fr/docs/2/components/navigation-rail), vous pouvez également utiliser `placement` pour spécifier la position (gauche ou droite). Dans l'exemple suivant, nous plaçons deux composants `` sur les côtés de l'application. ```html Top App Bar Layout Item Layout Item Principal ``` ### Personnaliser l'ordre des composants de Layout {#example-order} Dans la plupart des cas, il suffit de placer les composants dans l'ordre souhaité. Vous pouvez également utiliser l'attribut `order` pour spécifier un ordre explicite. Le système trie les composants par `order` croissant, et en cas d'égalité, par ordre d'apparition dans le code. L'`order` par défaut est `0`. ```html Layout Item Top App Bar
order="-1" Principal ``` ## mdui-layout-item API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
placement placement true 'top' | 'bottom' | 'left' | 'right' 'top'

Position du composant. Les valeurs possibles incluent :

  • top : En haut
  • bottom : En bas
  • left : À gauche
  • right : À droite
order order true number

Ordre de ce composant dans le Layout <mdui-layout>, trié par ordre croissant. La valeur par défaut est 0.
### Slots
Nom Description
Défaut

Peut contenir n'importe quel contenu
## mdui-layout-main API ### Slots
Nom Description
Défaut

Peut contenir n'importe quel contenu
## mdui-layout API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
full-height fullHeight true boolean false

Définit la hauteur du Layout actuel à 100%.
### Slots
Nom Description
Défaut

Peut contenir des éléments <mdui-top-app-bar>, <mdui-bottom-app-bar>, <mdui-navigation-bar>, <mdui-navigation-drawer>, <mdui-navigation-rail>, <mdui-layout-item>, <mdui-layout-main>.
# Composant Indicateur de progression linéaire L'indicateur de progression linéaire est un indicateur horizontal utilisé pour montrer la progression d'une tâche, comme le chargement de données ou l'envoi d'un formulaire. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/linear-progress.js'; ``` Importez le type TypeScript correspondant : ```ts import type { LinearProgress } from 'mdui/components/linear-progress.js'; ``` Exemple d'utilisation : ```html ``` ## Exemples {#examples} ### Progression déterminée {#example-value} L'indicateur de progression linéaire est par défaut en mode indéterminé. Vous pouvez définir la progression actuelle avec l'attribut `value` (la valeur maximale par défaut est `1`). ```html ``` Vous pouvez définir la valeur maximale avec l'attribut `max`. ```html ``` ## mdui-linear-progress API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
max max true number 1

Valeur maximale du Linear Progress. La valeur par défaut est 1.
value value false number

Valeur actuelle du Linear Progress. Si cette valeur n'est pas spécifiée, l'état est indéterminé.
### CSS Parts
Nom Description
indicator

Partie indicatrice
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Liste Les listes sont des suites verticales d'éléments qui présentent du texte ou des images, facilitant la navigation et l'accès aux informations. ## Utilisation {#usage} Importez les composants : ```js import 'mdui/components/list.js'; import 'mdui/components/list-item.js'; import 'mdui/components/list-subheader.js'; ``` Importez les types TypeScript correspondants : ```ts import type { List } from 'mdui/components/list.js'; import type { ListItem } from 'mdui/components/list-item.js'; import type { ListSubheader } from 'mdui/components/list-subheader.js'; ``` Exemple d'utilisation : ```html Sous-en-tête Élément 1 Élément 2 ``` ## Exemples {#examples} ### Contenu textuel {#example-text} Utilisez l'attribut `headline` du composant `` pour définir le texte principal, et `description` pour le texte secondaire. ```html ``` Vous pouvez également utiliser le slot par défaut pour le texte principal et le slot `description` pour le texte secondaire. ```html Titre Titre Texte secondaire ``` Par défaut, le texte principal et le texte secondaire s'affichent intégralement, quelle que soit leur longueur. Utilisez les attributs `headline-line` et `description-line` pour limiter le nombre de lignes (maximum 3). ```html Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire ``` ### Contenu sur les côtés {#example-side} Utilisez les attributs `icon` et `end-icon` du composant `` pour ajouter des icônes Material Icons à gauche et à droite de l'élément de liste. ```html Titre ``` Vous pouvez également utiliser les slots `icon` et `end-icon` pour ajouter des éléments personnalisés. ```html Titre ``` ### Lien {#example-link} Ajoutez l'attribut `href` pour transformer l'élément de liste en lien. Les attributs liés aux liens (`download`, `target`, `rel`) sont alors également disponibles. ```html Titre ``` ### État désactivé {#example-disabled} Ajoutez l'attribut `disabled` à `` pour désactiver l'élément. Les composants internes (case à cocher, bouton radio, Switch) seront également désactivés. ```html Titre Titre ``` ### État actif {#example-active} Ajoutez l'attribut `active` à `` pour activer l'élément. ```html Titre Titre ``` ### État non cliquable {#example-nonclickable} Ajoutez l'attribut `nonclickable` à `` pour supprimer l'effet de survol et l'ondulation au clic. ```html Titre Titre ``` ### Forme arrondie {#example-rounded} Ajoutez l'attribut `rounded` à `` pour arrondir ses coins. ```html Titre Titre ``` ### Alignement vertical {#example-alignment} Utilisez l'attribut `alignment` de `` pour définir l'alignement des éléments latéraux par rapport à l'élément principal. Valeurs possibles : - `start` : Alignement en haut - `center` : Alignement centré - `end` : Alignement en bas ```html Titre Titre Titre ``` ### Contenu personnalisé {#example-custom} Utilisez le slot `custom` de `` pour personnaliser complètement le contenu de l'élément. ```html
test
 ``` ## mdui-list-item API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
headline headline true string

Texte principal. Peut également être défini via le slot par défaut.
headline-line headlineLine true 1 | 2 | 3

Nombre de lignes pour le texte principal. Au-delà de la limite, le texte sera tronqué. Par défaut, aucune limite de lignes. Les valeurs possibles incluent :

  • 1 : Affiche une seule ligne, tronqué au-delà
  • 2 : Affiche deux lignes, tronqué au-delà
  • 3 : Affiche trois lignes, tronqué au-delà
description description true string

Texte secondaire. Peut également être défini via slot="description".
description-line descriptionLine true 1 | 2 | 3

Nombre de lignes pour le texte secondaire. Au-delà de la limite, le texte sera tronqué. Par défaut, aucune limite de lignes. Les valeurs possibles incluent :

  • 1 : Affiche une seule ligne, tronqué au-delà
  • 2 : Affiche deux lignes, tronqué au-delà
  • 3 : Affiche trois lignes, tronqué au-delà
icon icon true string

Nom de l'icône Material Icons à gauche. Peut également être défini via slot="icon".
end-icon endIcon true string

Nom de l'icône Material Icons à droite. Peut également être défini via slot="end-icon".
disabled disabled true boolean false

Si cet élément de liste est désactivé. Lorsqu'il est désactivé, l'élément de liste devient gris et les composants <mdui-checkbox>, <mdui-radio>, <mdui-switch> qu'il contient sont également désactivés.
active active true boolean false

Si cet élément de liste est activé
nonclickable nonclickable true boolean false

Si l'élément de liste doit être non cliquable. Lorsqu'il est défini, les composants <mdui-checkbox>, <mdui-radio>, <mdui-switch> dans l'élément de liste restent interactifs.
rounded rounded true boolean false

Si l'élément de liste doit avoir une forme arrondie
alignment alignment true 'start' | 'center' | 'end' 'center'

Alignement vertical de l'élément de liste. Les valeurs possibles incluent :

  • start : Aligné en haut
  • center : Centré
  • end : Aligné en bas
href href true 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 true string

Nom du fichier à télécharger.

Remarque : Cette propriété ne s'applique que si l'attribut href est défini.
target target true '_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 true '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 true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
### Slots
Nom Description
Défaut

Texte principal
description

Texte secondaire
icon

Élément à gauche de l'élément de liste
end-icon

Élément à droite de l'élément de liste
custom

Contenu personnalisé
### CSS Parts
Nom Description
container

Conteneur de l'élément de liste
icon

Icône de gauche
end-icon

Icône de droite
body

Partie centrale
headline

Titre principal
description

Sous-titre
### Propriétés CSS personnalisées
Nom Description
--shape-corner

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

Taille des coins arrondis de l'élément de liste lorsque l'attribut rounded est spécifié. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.
## mdui-list-subheader API ### Slots
Nom Description
Défaut

Texte du sous-en-tête de liste
## mdui-list API ### Slots
Nom Description
Défaut

Éléments <mdui-list-item>
# Composant Menu Le composant Menu affiche une liste verticale d'options. Le menu s'ouvre lorsqu'un utilisateur interagit avec un Button ou un autre contrôle. Pour un menu déroulant, associez-le au composant [``](/fr/docs/2/components/dropdown). ## Utilisation {#usage} Importez les composants : ```js import 'mdui/components/menu.js'; import 'mdui/components/menu-item.js'; ``` Importez les types TypeScript correspondants : ```ts import type { Menu } from 'mdui/components/menu.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Exemple d'utilisation : ```html Élément 1 Élément 2 ``` ## Exemples {#examples} ### Menu déroulant {#example-dropdown} Associez-le à [``](/fr/docs/2/components/dropdown) pour créer un menu déroulant. ```html Ouvrir le menu Élément 1 Élément 2 ``` ### Disposition compacte {#example-dense} Ajoutez l'attribut `dense` au composant `` pour une disposition compacte. ```html Élément 1 Élément 2 Élément 3 ``` ### Élément de menu désactivé {#example-disabled} Ajoutez l'attribut `disabled` à `` pour désactiver un élément de menu. ```html Élément 1 Élément 2 Élément 3 ``` ### Sélection unique {#example-selects-single} Définissez l'attribut `selects` du composant `` sur `single` pour la sélection unique. La valeur `value` du menu correspond à la `value` de l'élément sélectionné. ```html Élément 1 Élément 2 ``` ### Sélection multiple {#example-selects-multiple} Définissez l'attribut `selects` du composant `` sur `multiple` pour la sélection multiple. La valeur `value` du menu est un tableau contenant les `value` des éléments sélectionnés. Remarque : En mode multiple, la `value` est un tableau et ne peut être lue/modifiée que via la propriété JavaScript. ```html Élément 1 Élément 2 Élément 3 ``` ### Icône {#example-icon} Utilisez les attributs `icon`, `end-icon` et `end-text` sur `` pour ajouter des icônes Material Icons ou du texte à gauche/droite. Utilisez les slots correspondants pour des éléments personnalisés. Pour réserver l'espace d'une icône à gauche sans en afficher, définissez `icon` sur une chaîne vide. ```html Élément 1 Élément 2 Ctrl+X Élément 3 ``` En mode sélection, utilisez l'attribut `selected-icon` ou le slot `selected-icon` pour définir l'icône de l'état sélectionné. ```html Élément 1 Élément 2 ``` ### Lien {#example-link} Ajoutez l'attribut `href` à `` pour l'utiliser comme un lien. Les attributs liés aux liens (`download`, `target`, `rel`) sont disponibles. ```html Élément 1 Élément 2 ``` ### Sous-menu {#example-submenu} Utilisez le slot `submenu` dans `` pour définir le contenu du sous-menu. ```html Hauteur de ligne Simple 1.5 Double Personnalisé: 1.2 Style de paragraphe ``` Utilisez l'attribut `submenu-trigger` sur `` pour définir la méthode de déclenchement du sous-menu. ```html Hauteur de ligne Simple 1.5 Double Personnalisé: 1.2 Style de paragraphe ``` Lorsque `submenu-trigger="hover"`, vous pouvez utiliser les attributs `submenu-open-delay` et `submenu-close-delay` pour les délais d'ouverture/fermeture. ```html Hauteur de ligne Simple 1.5 Double Personnalisé: 1.2 Style de paragraphe ``` ### Contenu personnalisé {#example-custom} Utilisez le slot `custom` de `` pour personnaliser complètement le contenu. ```html
ABS
Valeur absolue d'un nombre
ACOS
Arccosinus d'un nombre, exprimé en radians
ACOSH
Arccosinus hyperbolique d'un nombre
 ``` ## mdui-menu-item API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
value value true string

Valeur de l'élément de menu
disabled disabled true boolean false

Si l'élément de menu est désactivé
icon icon true string

Nom de l'icône Material Icons à gauche. Peut également être défini via slot="icon".

Si aucune icône ne doit être affichée à gauche, mais qu'un slot pour une icône doit être réservé, vous pouvez passer une chaîne vide pour l'occuper.
end-icon endIcon true string

Nom de l'icône Material Icons à droite. Peut également être défini via slot="end-icon".
end-text endText true string

Texte à droite. Peut également être défini via slot="end-text".
selected-icon selectedIcon true string

Nom de l'icône Material Icons pour l'état sélectionné. Peut également être défini via slot="selected-icon".
submenu-open submenuOpen true boolean false

Si le sous-menu est ouvert
href href true 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 true string

Nom du fichier à télécharger.

Remarque : Cette propriété ne s'applique que si l'attribut href est défini.
target target true '_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 true '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 true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
submenu-open

Se déclenche lorsque le sous-menu commence à s'ouvrir. Vous pouvez empêcher l'ouverture du sous-menu en appelant event.preventDefault().
submenu-opened

Se déclenche lorsque l'animation d'ouverture du sous-menu est terminée.
submenu-close

Se déclenche lorsque le sous-menu commence à se fermer. Vous pouvez empêcher la fermeture du sous-menu en appelant event.preventDefault().
submenu-closed

Se déclenche lorsque l'animation de fermeture du sous-menu est terminée.
### Slots
Nom Description
Défaut

Texte de l'élément de menu
icon

Icône de gauche de l'élément de menu
end-icon

Icône de droite de l'élément de menu
end-text

Texte à droite de l'élément de menu
selected-icon

Icône de l'état sélectionné
submenu

Sous-menu
custom

Contenu personnalisé
### CSS Parts
Nom Description
container

Conteneur de l'élément de menu
icon

Icône de gauche
label

Contenu textuel
end-icon

Icône de droite
end-text

Texte de droite
selected-icon

Icône de l'état sélectionné
submenu

Élément de sous-menu
## mdui-menu API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
selects selects true 'single' | 'multiple'

État de sélection des éléments de menu. Par défaut, non sélectionnable. Les valeurs possibles incluent :

  • single : Sélection unique
  • multiple : Sélection multiple
value value false string | string[]

Valeur de l'élément <mdui-menu-item> actuellement sélectionné.

Remarque : L'attribut HTML de cette propriété est toujours une chaîne de caractères, et ne peut être défini comme valeur initiale via l'attribut HTML que lorsque selects="single". La valeur de la propriété JavaScript est une chaîne lorsque selects="single", et un tableau de chaînes lorsque selects="multiple". Par conséquent, lorsque selects="multiple", vous ne pouvez modifier cette valeur qu'en modifiant la valeur de la propriété JavaScript.
dense dense true boolean false

Si les éléments de menu doivent utiliser une disposition compacte
submenu-trigger submenuTrigger true 'click' | 'hover' | 'focus' | 'manual' | string 'click hover'

Mode de déclenchement du sous-menu. Prend en charge plusieurs valeurs, séparées par des espaces. Les valeurs possibles incluent :

  • click : Ouvre le sous-menu lors du clic sur l'élément de menu
  • hover : Ouvre le sous-menu lors du survol de la souris sur l'élément de menu
  • focus : Ouvre le sous-menu lors du focus sur l'élément de menu
  • manual : Ne peut être ouvert ou fermé que par programmation, aucun autre mode de déclenchement ne peut être spécifié
submenu-open-delay submenuOpenDelay true number 200

Délai d'ouverture du sous-menu lors du déclenchement par survol de la souris, en millisecondes.
submenu-close-delay submenuCloseDelay true number 200

Délai de fermeture du sous-menu lors du déclenchement par survol de la souris, en millisecondes.
### Méthodes
Nom Description
focus(options?: FocusOptions): void

Place le focus sur l'élément
blur(): void

Supprime le focus de l'élément actuel
### Événements
Nom Description
change

Se déclenche lorsque l'état de sélection d'un élément de menu change
### Slots
Nom Description
Défaut

Éléments de sous-menu (<mdui-menu-item>), Séparateurs (<mdui-divider>), etc.
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Navigation Bar La Navigation Bar permet de naviguer facilement entre les pages principales d'une application mobile. ## Utilisation {#usage} Importez les composants : ```js import 'mdui/components/navigation-bar.js'; import 'mdui/components/navigation-bar-item.js'; ``` Importez les types TypeScript correspondants : ```ts 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.) ```html Élément 1 Élément 2 Élément 3 ``` **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` : 1. Lorsque l'attribut `scroll-target` est spécifié. Dans ce cas, le `padding-bottom` est ajouté à l'élément ciblé par `scroll-target`. 2. Lorsqu'il se trouve à l'intérieur du composant [``](/fr/docs/2/components/layout). Dans ce cas, aucun `padding-bottom` n'est ajouté. ## Exemples {#examples} ### Visibilité des libellés {#example-label-visibility} 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. ```html Élément 1 Élément 2 Élément 3
Élément 1 Élément 2 Élément 3 Élément 4 ``` Utilisez l'attribut `label-visibility` sur `` 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 ```html Élément 1 Élément 2 Élément 3 selected labeled unlabeled ``` ### Dans un conteneur spécifique {#example-scroll-target} 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). ```html
Élément 1 Élément 2 Élément 3
Contenu de la page
``` ### Masquer lors du défilement {#example-scroll-behavior} Définissez l'attribut `scroll-behavior="hide"` sur `` 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. ```html
Élément 1 Élément 2 Élément 3
Contenu de la page
``` ### Icône {#example-icon} Sur ``, 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. ```html Élément 1 Élément 2 ``` ### Lien {#example-link} Ajoutez l'attribut `href` à `` pour l'utiliser comme un lien. Les attributs liés aux liens (`download`, `target`, `rel`) sont disponibles. ```html Élément 1 Élément 2 ``` ### Badge {#example-badge} Utilisez le slot `badge` dans `` pour ajouter un badge. ```html Élément 1 99+ Élément 2 ``` ## mdui-navigation-bar-item API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
icon icon true string

Nom de l'icône Material Icons pour l'état inactif. Peut également être défini via slot="icon".
active-icon activeIcon true string

Nom de l'icône Material Icons pour l'état actif. Peut également être défini via slot="active-icon".
value value true string

Valeur de l'élément de navigation
href href true 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 true string

Nom du fichier à télécharger.

Remarque : Cette propriété ne s'applique que si l'attribut href est défini.
target target true '_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 true '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 true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
### Slots
Nom Description
Défaut

Texte de l'élément de navigation
icon

Icône
active-icon

Icône de l'état actif
badge

Badge
### CSS Parts
Nom Description
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
### Propriétés CSS personnalisées
Nom Description
--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.
## mdui-navigation-bar API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
hide hide true boolean false

Si le composant est masqué
label-visibility labelVisibility true '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 true string

Valeur de l'élément <mdui-navigation-bar-item> actuellement sélectionné.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Comportement de défilement. Les valeurs possibles incluent :

  • hide : Masque lors du défilement
scroll-target scrollTarget false 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 true number

Seuil de défilement avant activation du comportement, en px.
order order true number

Ordre de ce composant dans le Layout <mdui-layout>, trié par ordre croissant. La valeur par défaut est 0.
### Événements
Nom Description
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.
### Slots
Nom Description
Défaut

Composants <mdui-navigation-bar-item>
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Navigation Drawer Le Navigation Drawer permet d'accéder rapidement aux différentes pages ou contenus via un panneau latéral. On utilise souvent le composant [``](/fr/docs/2/components/list) dans le Navigation Drawer pour ajouter des éléments de navigation. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/navigation-drawer.js'; ``` Importez le type TypeScript correspondant : ```ts import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js'; ``` Exemple d'utilisation : ```html Fermer le Navigation Drawer Ouvrir le Navigation Drawer ``` **Remarques importantes :** Ce composant utilise par défaut un positionnement `position: fixed`. Lorsque `modal` est `false` et que la taille de l'écran est supérieure ou égale à [`--mdui-breakpoint-md`](/fr/docs/2/styles/design-tokens#breakpoint), un `padding-left` ou `padding-right` est automatiquement ajouté au `body` pour éviter que le contenu ne soit masqué. Cependant, dans les deux cas suivants, le positionnement par défaut sera `position: absolute` : 1. Lorsque l'attribut `contained` est `true`. 2. Lorsqu'il se trouve à l'intérieur du composant [``](/fr/docs/2/components/layout). Dans ce cas, aucun `padding-left` ou `padding-right` n'est ajouté. ## Exemples {#examples} ### Dans un conteneur spécifique {#example-contained} Par défaut, le Navigation Drawer s'affiche sur le côté de la fenêtre. Pour le placer dans un conteneur spécifique, ajoutez l'attribut `contained`. Le Navigation Drawer s'affichera alors par rapport à son parent (ajoutez `position: relative; overflow: hidden;` sur le parent). ```html
Fermer le Navigation Drawer
Ouvrir le Navigation Drawer
``` ### Modal {#example-modal} Ajoutez l'attribut `modal` pour afficher un fond (overlay) lorsque le Navigation Drawer est ouvert. Notez que si la largeur de la fenêtre ou du parent est inférieure à [`--mdui-breakpoint-md`](/fr/docs/2/styles/design-tokens#breakpoint), l'overlay s'affiche toujours, quel que soit cet attribut. Ajoutez `close-on-esc` pour fermer avec la touche Échap. Ajoutez `close-on-overlay-click` pour fermer en cliquant sur l'overlay. ```html
Fermer le Navigation Drawer
Ouvrir le Navigation Drawer
``` ### À droite {#example-placement} Définissez l'attribut `placement="right"` pour afficher le Navigation Drawer sur le côté droit. ```html
Fermer le Navigation Drawer
Ouvrir le Navigation Drawer
``` ## mdui-navigation-drawer API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
open open true boolean false

Si le Navigation Drawer est ouvert
modal modal true boolean false

Si le Navigation Drawer est ouvert, affiche-t-il un calque de superposition ?

Sur les appareils à écran étroit (largeur d'écran inférieure à --mdui-breakpoint-md), le calque de superposition est toujours affiché, indépendamment de ce paramètre.
close-on-esc closeOnEsc true boolean false

Si un calque de superposition est présent, appuyer sur la touche Échap ferme-t-il le Navigation Drawer ?
close-on-overlay-click closeOnOverlayClick true boolean false

Lors d'un clic sur le calque de superposition, le Navigation Drawer se ferme-t-il ?
placement placement true 'left' | 'right' 'left'

Position du Navigation Drawer. Les valeurs possibles incluent :

  • left : À gauche
  • right : À droite
contained contained true boolean false

Par défaut, le Navigation Drawer 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 les styles position: relative; overflow: hidden; à l'élément parent.
order order true number

Ordre de ce composant dans le Layout <mdui-layout>, trié par ordre croissant. La valeur par défaut est 0.
### Événements
Nom Description
open

Se déclenche avant l'ouverture du Navigation Drawer. Vous pouvez empêcher l'ouverture du Navigation Drawer en appelant event.preventDefault().
opened

Se déclenche après la fin de l'animation d'ouverture du Navigation Drawer.
close

Se déclenche avant la fermeture du Navigation Drawer. Vous pouvez empêcher la fermeture du Navigation Drawer en appelant event.preventDefault().
closed

Se déclenche après la fin de l'animation de fermeture du Navigation Drawer.
overlay-click

Se déclenche lors du clic sur le calque de superposition
### Slots
Nom Description
Défaut

Contenu du Navigation Drawer
### CSS Parts
Nom Description
overlay

Calque de superposition
panel

Conteneur du Navigation Drawer
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Navigation Rail Le Navigation Rail offre un accès aux différentes pages principales pour les tablettes et les ordinateurs de bureau. ## Utilisation {#usage} Importez les composants : ```js import 'mdui/components/navigation-rail.js'; import 'mdui/components/navigation-rail-item.js'; ``` Importez les types TypeScript correspondants : ```ts 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.) ```html Récent Images Bibliothèque ``` **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` : 1. Lorsque l'attribut `contained` du composant `` est `true`. Dans ce cas, le `padding-left` ou `padding-right` est ajouté à l'élément parent. 2. Lorsqu'il se trouve à l'intérieur du composant [``](/fr/docs/2/components/layout). Dans ce cas, aucun `padding-left` ou `padding-right` n'est ajouté. ## Exemples {#examples} ### Dans un conteneur spécifique {#example-contained} 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). ```html
Récent Images Bibliothèque
Contenu de la page
``` ### À droite {#example-placement} Définissez l'attribut `placement="right"` sur `` pour l'afficher à droite. ```html
Récent Images Bibliothèque
Contenu de la page
``` ### Séparateur visible {#example-divider} Ajoutez l'attribut `divider` à `` pour ajouter une ligne de séparation. ```html
Récent Images Bibliothèque
Contenu de la page
``` ### Ajouter des éléments en haut/bas {#example-top-bottom} Utilisez les slots `top` et `bottom` dans `` pour ajouter des éléments en haut et en bas. ```html
Récent Images Bibliothèque
Contenu de la page
``` ### Alignement vertical des éléments de navigation {#example-alignment} Utilisez l'attribut `alignment` de `` pour modifier l'alignement vertical des éléments. ```html
Récent Images Bibliothèque
start center end
``` ### Icône {#example-icon} Sur ``, utilisez `icon` pour l'icône inactive et `active-icon` pour l'active. Utilisez les slots correspondants. ```html
Récent Images Bibliothèque
Contenu de la page
``` ### Utiliser uniquement l'icône {#example-no-label} `` peut être utilisé sans texte. ```html
Contenu de la page
``` ### Lien {#example-link} Ajoutez l'attribut `href` à `` pour l'utiliser comme un lien. Les attributs liés aux liens (`download`, `target`, `rel`) sont disponibles. ```html
Récent Images Bibliothèque
Contenu de la page
``` ### Badge {#example-badge} Utilisez le slot `badge` dans `` pour ajouter un badge. ```html
Récent 99+ Images Bibliothèque
Contenu de la page
``` ## mdui-navigation-rail-item API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
icon icon true string

Nom de l'icône Material Icons pour l'état inactif. Peut également être défini via slot="icon".
active-icon activeIcon true string

Nom de l'icône Material Icons pour l'état actif. Peut également être défini via slot="active-icon".
value value true string

Valeur de l'élément de navigation
href href true 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 true string

Nom du fichier à télécharger.

Remarque : Cette propriété ne s'applique que si l'attribut href est défini.
target target true '_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 true '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 true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
### Slots
Nom Description
Défaut

Contenu textuel
icon

Icône
active-icon

Icône de l'état actif
badge

Badge
### CSS Parts
Nom Description
container

Conteneur de l'élément de navigation
indicator

Indicateur
badge

Badge
icon

Icône
active-icon

Icône de l'état actif
label

Contenu textuel
### Propriétés CSS personnalisées
Nom Description
--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.
## mdui-navigation-rail API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
value value true string

Valeur de l'élément <mdui-navigation-rail-item> actuellement sélectionné.
placement placement true 'left' | 'right' 'left'

Position du Navigation Rail. Les valeurs possibles incluent :

  • left : À gauche
  • right : À droite
alignment alignment true 'start' | 'center' | 'end' 'start'

Alignement des éléments <mdui-navigation-rail-item>. Les valeurs possibles incluent :

  • start : Aligné en haut
  • center : Centré
  • end : Aligné en bas
contained contained true 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 true boolean false

Si un séparateur doit être ajouté entre le Navigation Rail et le contenu de la page
order order true number

Ordre de ce composant dans le Layout <mdui-layout>, trié par ordre croissant. La valeur par défaut est 0.
### Événements
Nom Description
change

Se déclenche lorsque la valeur change
### Slots
Nom Description
Défaut

Composants <mdui-navigation-rail-item>
top

Éléments en haut
bottom

Éléments en bas
### CSS Parts
Nom Description
top

Conteneur des éléments supérieurs
bottom

Conteneur des éléments inférieurs
items

Conteneur des composants <mdui-navigation-rail-item>
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Bouton radio Les boutons radio permettent aux utilisateurs de choisir une option parmi un ensemble, en garantissant qu'une seule option est sélectionnée à la fois. ## Utilisation {#usage} Importez les composants : ```js import 'mdui/components/radio-group.js'; import 'mdui/components/radio.js'; ``` Importez les types TypeScript correspondants : ```ts import type { RadioGroup } from 'mdui/components/radio-group.js'; import type { Radio } from 'mdui/components/radio.js'; ``` Exemple d'utilisation : ```html Chinois Anglais ``` ## Exemples {#examples} ### État sélectionné {#example-checked} La propriété `value` du groupe de boutons radio (``) correspond à la `value` du bouton radio sélectionné. Mettez à jour cette propriété pour modifier la sélection. ```html Chinois Anglais ``` Vous pouvez utiliser `` seul, et lire/modifier l'état via `checked`. ```html Bouton radio ``` ### État désactivé {#example-disabled} Ajoutez `disabled` à `` pour désactiver tout le groupe de boutons radio. ```html Chinois Anglais ``` Ajoutez `disabled` à un `` pour désactiver un bouton radio spécifique. ```html Chinois Anglais ``` ### Icône {#example-icon} Utilisez les attributs `unchecked-icon` et `checked-icon` pour définir les icônes Material Icons des états. Utilisez les slots correspondants pour des éléments personnalisés. ```html Chinois Anglais ``` ## mdui-radio-group API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
disabled disabled true boolean false

Si ce composant est désactivé
form form true string

Élément <form> associé. La valeur de cet attribut doit être l'id d'un élément <form> dans la même page.

Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément <form>. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, pas seulement en tant qu'enfant de l'élément <form>.
name name true string ''

Nom du groupe de boutons radio, qui sera envoyé avec les données du formulaire
value value true string ''

Valeur actuellement sélectionnée dans le groupe de boutons radio, qui sera envoyée avec les données du formulaire
undefined defaultValue false string ''

Valeur sélectionnée par défaut. Lors de la réinitialisation du formulaire, il reviendra à cette valeur par défaut. Cette propriété ne peut être définie que par une propriété JavaScript.
required required true boolean false

Si l'un des boutons radio doit être sélectionné lors de la soumission du formulaire
undefined validity false ValidityState

État de validation du formulaire, voir ValidityState pour plus de détails
undefined validationMessage false string

Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
### Méthodes
Nom Description
checkValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.
reportValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.

Si la validation échoue, un message d'erreur s'affiche également sur le composant.
setCustomValidity(message: string): void

Définit un texte d'erreur personnalisé. Tant que ce texte n'est pas vide, cela signifie que le champ n'est pas valide.
### Événements
Nom Description
change

Se déclenche lorsque la valeur sélectionnée change
input

Se déclenche lorsque la valeur sélectionnée change
invalid

Se déclenche lorsque la validation du champ du formulaire échoue
### Slots
Nom Description
Défaut

Éléments <mdui-radio>
## mdui-radio API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
value value true string ''

Valeur actuelle du bouton radio
disabled disabled true boolean false

Si le bouton radio actuel est désactivé
checked checked true boolean false

Si le bouton radio actuel est sélectionné
unchecked-icon uncheckedIcon true string

Nom de l'icône Material Icons pour l'état non sélectionné. Peut également être défini via slot="unchecked-icon".
checked-icon checkedIcon true string

Nom de l'icône Material Icons pour l'état sélectionné. Peut également être défini via slot="checked-icon".
autofocus autofocus true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
change

Se déclenche lorsque ce bouton radio est sélectionné
### Slots
Nom Description
Défaut

Contenu textuel
unchecked-icon

Icône de l'état non sélectionné
checked-icon

Icône de l'état sélectionné
### CSS Parts
Nom Description
control

Conteneur de l'Icône de gauche
unchecked-icon

Icône de l'état non sélectionné
checked-icon

Icône de l'état sélectionné
label

Contenu textuel
# Composant Range Slider Le composant Range Slider permet aux utilisateurs de sélectionner une plage de valeurs. ## Utilisation {#usage} Importez le composant : ```js import 'mdui/components/range-slider.js'; ``` Importez le type TypeScript correspondant : ```ts import type { RangeSlider } from 'mdui/components/range-slider.js'; ``` Exemple d'utilisation : ```html ``` ## Exemples {#examples} ### Valeur par défaut {#example-value} L'attribut `value` (un tableau) permet de lire ou de définir la valeur actuelle. Il ne peut être modifié que via la propriété JavaScript. ```html ``` ### État désactivé {#example-disabled} Ajoutez l'attribut `disabled` pour désactiver le Slider. ```html ``` ### Plage {#example-min-max} Utilisez les attributs `min` et `max` pour définir la plage. ```html ``` ### Pas {#example-step} Utilisez l'attribut `step` pour définir l'intervalle. ```html ``` ### Repères {#example-tickmarks} Ajoutez l'attribut `tickmarks` pour afficher des repères. ```html ``` ### Masquer l'infobulle {#example-nolabel} Ajoutez l'attribut `nolabel` pour masquer l'infobulle. ```html ``` ### Formater l'infobulle {#example-labelFormatter} Utilisez la propriété JavaScript `labelFormatter` (une fonction) pour formater l'infobulle. ```html ``` ## mdui-range-slider API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
undefined defaultValue false number[] []

Valeur par défaut. Lors de la réinitialisation du formulaire, il reviendra à cette valeur par défaut. Cette propriété ne peut être définie que par une propriété JavaScript.
undefined value false number[]

Valeur du Range Slider, au format tableau, qui sera envoyée avec les données du formulaire.

REMARQUE : Cette propriété ne peut pas être définie comme valeur initiale via un attribut HTML. Pour modifier cette valeur, vous ne pouvez le faire qu'en modifiant la valeur de la propriété JavaScript.
autofocus autofocus true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
min min true number 0

Valeur minimale du Slider, par défaut 0.
max max true number 100

Valeur maximale du Slider, par défaut 100.
step step true number 1

Intervalle d'incrémentation, par défaut 1.
tickmarks tickmarks true boolean false

Si des repères doivent être ajoutés
nolabel nolabel true boolean false

Si l'infobulle doit être masquée
disabled disabled true boolean false

Si le composant est désactivé
form form true string

Élément <form> associé. La valeur de cet attribut doit être l'id d'un élément <form> dans la même page.

Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément <form>. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, pas seulement en tant qu'enfant de l'élément <form>.
name name true string ''

Nom du Slider, qui sera envoyé avec les données du formulaire
undefined validity false ValidityState

État de validation du formulaire, voir ValidityState pour plus de détails
undefined validationMessage false string

Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
undefined labelFormatter false (value: number) => string

Fonction pour personnaliser le format d'affichage de l'étiquette. Le paramètre de la fonction est la valeur actuelle du Slider, et la valeur de retour est le texte à afficher.
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
checkValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.
reportValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.

Si la validation échoue, un message d'erreur s'affiche également sur le composant.
setCustomValidity(message: string): void

Définit un texte d'erreur personnalisé. Tant que ce texte n'est pas vide, cela signifie que le champ n'est pas valide.
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
change

Se déclenche lorsque la valeur change et que l'élément perd le focus
input

Se déclenche lorsque la valeur change
invalid

Se déclenche lorsque la validation du champ du formulaire échoue
### CSS Parts
Nom Description
track-inactive

Piste à l'état inactif
track-active

Piste à l'état actif
handle

Poignée
label

Texte de l'infobulle
tickmark

Repère
# Composant Select Le composant Select propose une liste déroulante d'options pour une sélection rapide. Cette page traite principalement de l'utilisation de ``. Pour l'utilisation des éléments de menu, consultez [``](/fr/docs/2/components/menu#menu-item-api). ## Utilisation {#usage} Importez les composants selon vos besoins : ```js import 'mdui/components/select.js'; import 'mdui/components/menu-item.js'; ``` Importez les types TypeScript correspondants : ```ts import type { Select } from 'mdui/components/select.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Exemple d'utilisation : ```html Élément 1 Élément 2 ``` ## Exemples {#examples} ### Variante {#example-variant} Définissez la variante à l'aide de l'attribut `variant`. ```html Élément 1 Élément 2 Élément 1 Élément 2 ``` ### Sélection multiple {#example-multiple} Par défaut, la sélection est unique. La `value` de `` correspond à la `value` de l'option sélectionnée. Pour permettre la sélection multiple, ajoutez l'attribut `multiple`. La `value` devient alors un tableau contenant les `value` des options sélectionnées. Remarque : en mode multiple, la `value` est un tableau et ne peut être lue ou modifiée que via la propriété JavaScript. ```html Élément 1 Élément 2 Élément 3 ``` ### Texte d'aide {#example-helper-text} Utilisez l'attribut `label` pour afficher un texte au-dessus du Select. ```html Élément 1 Élément 2 ``` Utilisez `placeholder` pour afficher un exemple de saisie. ```html Élément 1 Élément 2 ``` Utilisez `helper` ou le slot `helper` pour afficher un message d'aide en dessous. ```html Élément 1 Élément 2 Élément 1 Élément 2 Message d'aide ``` ### Lecture seule {#example-readonly} Ajoutez l'attribut `readonly` pour rendre le champ en lecture seule. ```html Élément 1 Élément 2 ``` ### Désactivé {#example-disabled} Ajoutez l'attribut `disabled` pour désactiver le composant. ```html Élément 1 Élément 2 ``` ### Effaçable {#example-clearable} Ajoutez l'attribut `clearable` pour afficher un bouton d'effacement lorsqu'une valeur est sélectionnée. ```html Élément 1 Élément 2 ``` Personnalisez le bouton à l'aide du slot `clear`. ```html Élément 1 Élément 2 ``` ### Position du menu déroulant {#example-placement} Utilisez l'attribut `placement` pour définir la position du menu déroulant. ```html Élément 1 Élément 2 ``` ### Alignement du texte à droite {#example-end-aligned} Ajoutez l'attribut `end-aligned` pour aligner le texte à droite. ```html Élément 1 Élément 2 ``` ### Texte et icônes avant/après {#example-prefix-suffix} Utilisez les attributs `icon` et `end-icon` pour ajouter des icônes Material Icons. Utilisez les slots correspondants pour des éléments personnalisés. ```html Élément 1 Élément 2

Élément 1 Élément 2 ``` Utilisez les attributs `prefix` et `suffix` (ou les slots correspondants) pour ajouter du texte avant ou après. Ce texte ne s'affiche que lorsque le Select a le focus ou contient une valeur. ```html Élément 1 Élément 2

Élément 1 Élément 2 $ /100 ``` ## mdui-select API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
variant variant true 'filled' | 'outlined' 'filled'

Style du Select. Les valeurs possibles incluent :

  • filled : Select avec couleur de fond, effet visuel fort
  • outlined : Select avec bordure, effet visuel plus faible
multiple multiple true boolean false

Si la sélection multiple est prise en charge
name name true string ''

Nom du Select, qui sera envoyé avec les données du formulaire
value value false string | string[] ''

Valeur du Select, qui sera envoyée avec les données du formulaire.

Si l'attribut multiple n'est pas spécifié, cette valeur est une chaîne de caractères ; si l'attribut multiple est spécifié, cette valeur est un tableau de chaînes de caractères. L'attribut HTML ne peut définir qu'une valeur de chaîne ; si vous devez définir une valeur de tableau, définissez-la via la propriété JavaScript.
undefined defaultValue false string | string[] ''

Valeur sélectionnée par défaut. Lors de la réinitialisation du formulaire, il reviendra à cette valeur par défaut. Cette propriété ne peut être définie que par une propriété JavaScript.
label label true string

Texte de l'étiquette
placeholder placeholder true string

Texte de l'espace réservé
helper helper true string

Texte d'aide en bas du Select. Peut également être défini via slot="helper".
clearable clearable true boolean false

Si le Select peut être vidé
clear-icon clearIcon true string

Lorsque le Select peut être vidé, nom de l'icône Material Icons pour le bouton d'effacement affiché à droite. Peut également être défini via slot="clear-icon".
placement placement true 'auto' | 'bottom' | 'top' 'auto'

Position du Select. Les valeurs possibles incluent :

  • auto : Position déterminée automatiquement
  • bottom : En bas
  • top : En haut
end-aligned endAligned true boolean false

Si le texte doit être aligné à droite
prefix prefix true string

Texte de préfixe du Select. N'est affiché qu'à l'état de focus ou lorsque le Select a une valeur. Peut également être défini via slot="prefix".
suffix suffix true string

Texte de suffixe du Select. N'est affiché qu'à l'état de focus ou lorsque le Select a une valeur. Peut également être défini via slot="suffix".
icon icon true string

Nom de l'icône Material Icons pour l'icône de préfixe du Select. Peut également être défini via slot="icon".
end-icon endIcon true string

Nom de l'icône Material Icons pour l'icône de suffixe du Select. Peut également être défini via slot="end-icon".
error-icon errorIcon true string

Lorsque la validation du champ du formulaire échoue, nom de l'icône Material Icons affichée à droite du Select. Peut également être défini via slot="error-icon".
form form true string

Élément <form> associé. La valeur de cet attribut doit être l'id d'un élément <form> dans la même page.

Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément <form>. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, pas seulement en tant qu'enfant de l'élément <form>.
readonly readonly true boolean false

Si le champ est en lecture seule
disabled disabled true boolean false

Si le composant est désactivé
required required true boolean false

Si ce champ doit être obligatoirement rempli lors de la soumission du formulaire
undefined validity false ValidityState

État de validation du formulaire, voir ValidityState pour plus de détails
undefined validationMessage false string

Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
autofocus autofocus true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
### Méthodes
Nom Description
checkValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.
reportValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.

Si la validation échoue, un message d'erreur s'affiche également sur le composant.
setCustomValidity(message: string): void

Définit un texte d'erreur personnalisé. Tant que ce texte n'est pas vide, cela signifie que le champ n'est pas valide.
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
change

Se déclenche lorsque la valeur sélectionnée change
invalid

Se déclenche lorsque la validation du champ du formulaire échoue
clear

Se déclenche lors du clic sur le bouton d'effacement généré par l'attribut clearable. Vous pouvez empêcher l'effacement du Select en appelant event.preventDefault().
### Slots
Nom Description
Défaut

Éléments <mdui-menu-item>
icon

Icône de gauche
end-icon

Icône de droite
error-icon

Icône de droite à l'état d'échec de validation
prefix

Texte de gauche
suffix

Texte de droite
clear-button

Bouton d'effacement
clear-icon

Icône dans le bouton d'effacement
helper

Texte d'aide en bas
### CSS Parts
Nom Description
chips

Conteneur des chips correspondant aux valeurs sélectionnées en sélection multiple
chip

Chip correspondant à chaque valeur sélectionnée en sélection multiple
chip__button

Élément <button> dans la chip
chip__label

Texte de la chip
chip__delete-icon

Icône de suppression de la chip
text-field

Champ de texte, c'est-à-dire l'élément <mdui-text-field>
text-field__container

Conteneur du champ de texte
text-field__icon

Icône de gauche du champ de texte
text-field__end-icon

Icône de droite du champ de texte
text-field__error-icon

Icône de droite à l'état d'échec de validation du champ de texte
text-field__prefix

Texte de gauche du champ de texte
text-field__suffix

Texte de droite du champ de texte
text-field__label

Texte de l'étiquette du champ de texte
text-field__input

Élément <input> du champ de texte
text-field__clear-button

Bouton d'effacement du champ de texte
text-field__clear-icon

Icône du bouton d'effacement du champ de texte
text-field__supporting

Conteneur des informations auxiliaires en bas du champ de texte, y compris l'aide et l'erreur
text-field__helper

Texte d'aide en bas du champ de texte
text-field__error

Texte de description d'erreur en bas du champ de texte
menu

Dropdown, c'est-à-dire l'élément <mdui-menu>
# Composant Bouton segmenté Le composant Bouton segmenté regroupe des boutons pour proposer des options, changer de vue, trier des éléments, etc. ## Utilisation {#usage} Importez les composants : ```js import 'mdui/components/segmented-button-group.js'; import 'mdui/components/segmented-button.js'; ``` Importez les types TypeScript correspondants : ```ts import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js'; import type { SegmentedButton } from 'mdui/components/segmented-button.js'; ``` Exemple d'utilisation : ```html Jour Semaine Mois ``` ## Exemples {#examples} ### Pleine largeur {#example-full-width} Ajoutez l'attribut `full-width` à `` pour occuper toute la largeur. ```html Jour Semaine Mois ``` ### Sélection unique {#example-selects-single} Définissez `selects="single"` pour la sélection unique. La `value` du groupe correspond à la `value` du bouton sélectionné. ```html Jour Semaine Mois Jour Semaine Mois ``` ### Sélection multiple {#example-selects-multiple} Définissez `selects="multiple"` pour la sélection multiple. La `value` du groupe est un tableau des `value` des boutons sélectionnés. Remarque : En mode multiple, la `value` est un tableau et ne peut être lue/modifiée que via la propriété JavaScript. ```html Jour Semaine Mois Jour Semaine Mois ``` ### Icône {#example-icon} Utilisez les attributs `icon` et `end-icon` sur `` pour ajouter des icônes Material Icons. Utilisez les slots correspondants. ```html Jour Semaine Mois ``` Utilisez l'attribut `selected-icon` ou le slot `selected-icon` pour définir l'icône de l'état sélectionné. ```html Jour Semaine ``` ### Lien {#example-link} Ajoutez l'attribut `href` à `` pour le transformer en lien. Les attributs liés aux liens (`download`, `target`, `rel`) sont disponibles. ```html Lien Semaine Mois ``` ### États désactivé et chargement {#example-disabled} Ajoutez `disabled` à `` pour désactiver tout le groupe. ```html Jour Semaine Mois ``` Ajoutez `disabled` à un bouton pour le désactiver, ou `loading` pour un état de chargement. ```html Jour Semaine Mois Année ``` ## mdui-segmented-button-group API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
full-width fullWidth true boolean false

Si le groupe doit remplir toute la largeur de l'élément parent
selects selects true 'single' | 'multiple'

État de sélection des boutons segmentés. Par défaut, non sélectionnable. Les valeurs possibles incluent :

  • single : Sélection unique
  • multiple : Sélection multiple
disabled disabled true boolean false

Si le composant est désactivé
required required true boolean false

Si une sélection est requise lors de la soumission du formulaire
form form true string

Élément <form> associé. La valeur de cet attribut doit être l'id d'un élément <form> dans la même page.

Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément <form>. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, pas seulement en tant qu'enfant de l'élément <form>.
name name true string ''

Nom lors de la soumission du formulaire, qui sera envoyé avec les données du formulaire
value value false string | string[] ''

Valeur du ou des <mdui-segmented-button> actuellement sélectionné(s).

Remarque : L'attribut HTML de cette propriété est toujours une chaîne de caractères, et ne peut être défini comme valeur initiale via l'attribut HTML que lorsque selects="single". La valeur de la propriété JavaScript est une chaîne lorsque selects="single", et un tableau de chaînes lorsque selects="multiple". Par conséquent, lorsque selects="multiple", vous ne pouvez modifier cette valeur qu'en modifiant la valeur de la propriété JavaScript.
undefined defaultValue false string | string[] ''

Valeur sélectionnée par défaut. Lors de la réinitialisation du formulaire, il reviendra à cette valeur par défaut. Cette propriété ne peut être définie que par une propriété JavaScript.
undefined validity false ValidityState

État de validation du formulaire, voir ValidityState pour plus de détails
undefined validationMessage false string

Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
### Méthodes
Nom Description
checkValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.
reportValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.

Si la validation échoue, un message d'erreur s'affiche également sur le composant.
setCustomValidity(message: string): void

Définit un texte d'erreur personnalisé. Tant que ce texte n'est pas vide, cela signifie que le champ n'est pas valide.
### Événements
Nom Description
change

Se déclenche lorsque la valeur sélectionnée change
invalid

Se déclenche lorsque la validation du champ du formulaire échoue
### Slots
Nom Description
Défaut

Composants <mdui-segmented-button>
### Propriétés CSS personnalisées
Nom Description
--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.
## mdui-segmented-button API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
icon icon true string

Nom de l'icône Material Icons à gauche. Peut également être défini via slot="icon".
end-icon endIcon true string

Nom de l'icône Material Icons à droite. Peut également être défini via slot="end-icon".
selected-icon selectedIcon true string

Nom de l'icône Material Icons pour l'état sélectionné. Peut également être défini via slot="selected-icon".
href href true string

URL cible du lien.

Si cette propriété est définie, le composant sera rendu comme un élément <a> et pourra utiliser les attributs liés aux liens.
download download true string

Nom du fichier à télécharger.

Remarque : Cette propriété ne s'applique que si l'attribut href est défini.
target target true '_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 true '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 true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
disabled disabled true boolean false

Si le composant est désactivé
loading loading true boolean false

Si le composant est en état de chargement
name name true string ''

Nom du bouton, qui sera envoyé avec les données du formulaire.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini.
value value true string ''

Valeur initiale du bouton, qui sera envoyée avec les données du formulaire.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini.
type type true 'submit' | 'reset' | 'button' 'button'

Type du bouton. Par défaut, il s'agit de button. Les valeurs possibles incluent :

  • submit : Au clic sur le bouton, les données du formulaire sont envoyées au serveur
  • reset : Au clic sur le bouton, tous les champs du formulaire sont réinitialisés à leurs valeurs initiales
  • button : Ce type de bouton n'a pas de comportement par défaut

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié.
form form true string

Élément <form> associé. La valeur de cet attribut doit être l'id d'un élément <form> dans la même page.

Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément <form>. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, y compris hors de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié.
formaction formAction true string

Spécifie l'URL de soumission du formulaire.

Si cet attribut est spécifié, il remplace l'attribut action de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié et que type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Spécifie le type de contenu à utiliser pour soumettre le formulaire au serveur. Les valeurs possibles incluent :

  • application/x-www-form-urlencoded : Valeur par défaut si l'attribut n'est pas spécifié
  • multipart/form-data : À utiliser lorsque le formulaire contient un élément <input type="file">
  • text/plain : Nouveau dans HTML5, utilisé pour le débogage

Si cet attribut est spécifié, il remplace l'attribut enctype de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas spécifié et que type="submit".
formmethod formMethod true 'post' | 'get'

Spécifie la méthode HTTP à utiliser pour soumettre le formulaire. Les valeurs possibles incluent :

  • post : Les données du formulaire sont incluses dans le corps de la requête et envoyées au serveur
  • get : Les données du formulaire sont ajoutées à l'URI du formulaire avec ? comme séparateur, et l'URI résultante est envoyée au serveur. À utiliser lorsque le formulaire n'a pas d'effets secondaires et ne contient que des caractères ASCII

Si cet attribut est défini, il remplace l'attribut method de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
formnovalidate formNoValidate true boolean false

Quand il est activé, la validation du formulaire n'est pas effectuée lors de la soumission.

Si cet attribut est défini, il remplace l'attribut novalidate de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Où afficher la réponse après l'envoi du formulaire. Les valeurs possibles incluent :

  • _self : Option par défaut, ouvre dans le contexte courant
  • _blank : Ouvre dans une nouvelle fenêtre
  • _parent : Ouvre dans le contexte parent
  • _top : Ouvre dans toute la fenêtre

Si cet attribut est défini, il remplace l'attribut target de l'élément <form>.

Remarque : Cette propriété ne s'applique que si l'attribut href n'est pas défini et que type="submit".
undefined validity false ValidityState

État de validation du formulaire, voir ValidityState pour plus de détails
undefined validationMessage false string

Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
checkValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.
reportValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.

Si la validation échoue, un message d'erreur s'affiche également sur le composant.
setCustomValidity(message: string): void

Définit un message d'erreur personnalisé. Tant qu'il n'est pas vide, le champ est considéré comme invalide.
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
invalid

Se déclenche lorsque la validation du champ du formulaire échoue
### Slots
Nom Description
Défaut

Contenu textuel du bouton segmenté
icon

Icône de gauche du bouton segmenté
selected-icon

Icône de gauche à l'état sélectionné
end-icon

Icône de droite du bouton segmenté
### CSS Parts
Nom Description
button

Élément <button> ou <a> interne
icon

Icône de gauche
selected-icon

Icône de gauche à l'état sélectionné
end-icon

Icône de droite
label

Contenu textuel
loading

Élément <mdui-circular-progress> en état de chargement
# Composant Slider Le composant Slider permet aux utilisateurs de sélectionner une valeur en déplaçant un curseur le long d'une piste. ## Utilisation {#usage} Importez le composant selon vos besoins : ```js import 'mdui/components/slider.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Slider } from 'mdui/components/slider.js'; ``` Exemple d'utilisation : ```html ``` ## Exemples {#examples} ### Valeur par défaut {#example-value} L'attribut `value` permet de lire ou définir la valeur actuelle. ```html ``` ### État désactivé {#example-disabled} Ajoutez l'attribut `disabled` pour désactiver le Slider. ```html ``` ### Plage de valeurs {#example-min-max} Utilisez les attributs `min` et `max` pour définir la plage de valeurs. ```html ``` ### Pas {#example-step} Utilisez l'attribut `step` pour définir l'incrément. ```html ``` ### Repères {#example-tickmarks} Ajoutez l'attribut `tickmarks` pour afficher des repères. ```html ``` ### Masquer l'infobulle {#example-nolabel} Ajoutez l'attribut `nolabel` pour masquer l'infobulle. ```html ``` ### Formater l'infobulle {#example-labelFormatter} Utilisez la propriété JavaScript `labelFormatter` (qui est une fonction) pour formater l'infobulle. ```html ``` ## mdui-slider API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
value value false number 0

Valeur du Slider, qui sera envoyée avec les données du formulaire
undefined defaultValue false number 0

Valeur par défaut. Lors de la réinitialisation du formulaire, il reviendra à cette valeur par défaut. Cette propriété ne peut être définie que par une propriété JavaScript.
autofocus autofocus true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
min min true number 0

Valeur minimale du Slider, par défaut 0.
max max true number 100

Valeur maximale du Slider, par défaut 100.
step step true number 1

Intervalle d'incrémentation, par défaut 1.
tickmarks tickmarks true boolean false

Si des repères doivent être ajoutés
nolabel nolabel true boolean false

Si l'infobulle doit être masquée
disabled disabled true boolean false

Si le composant est désactivé
form form true string

Élément <form> associé. La valeur de cet attribut doit être l'id d'un élément <form> dans la même page.

Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément <form>. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, pas seulement en tant qu'enfant de l'élément <form>.
name name true string ''

Nom du Slider, qui sera envoyé avec les données du formulaire
undefined validity false ValidityState

État de validation du formulaire, voir ValidityState pour plus de détails
undefined validationMessage false string

Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
undefined labelFormatter false (value: number) => string

Fonction pour personnaliser le format d'affichage de l'étiquette. Le paramètre de la fonction est la valeur actuelle du Slider, et la valeur de retour est le texte à afficher.
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
checkValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.
reportValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.

Si la validation échoue, un message d'erreur s'affiche également sur le composant.
setCustomValidity(message: string): void

Définit un texte d'erreur personnalisé. Tant que ce texte n'est pas vide, cela signifie que le champ n'est pas valide.
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
change

Se déclenche lorsque la valeur change et que l'élément perd le focus
input

Se déclenche lorsque la valeur change
invalid

Se déclenche lorsque la validation du champ du formulaire échoue
### CSS Parts
Nom Description
track-inactive

Piste à l'état inactif
track-active

Piste à l'état actif
handle

Poignée
label

Texte de l'infobulle
tickmark

Repère
# Composant Snackbar Le composant Snackbar affiche de brefs messages sur l'état de l'application. En plus d'utiliser ce composant directement, mdui propose une fonction [`mdui.snackbar`](/fr/docs/2/functions/snackbar) qui simplifie son utilisation. ## Utilisation {#usage} Importez le composant selon vos besoins : ```js import 'mdui/components/snackbar.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Snackbar } from 'mdui/components/snackbar.js'; ``` Exemple d'utilisation : ```html Photo archivée Afficher le message ``` ## Exemples {#examples} ### Position {#example-placement} Utilisez l'attribut `placement` pour définir la position d'affichage. ```html
Photo archivée top-start Photo archivée top Photo archivée top-end
Photo archivée bottom-start Photo archivée bottom Photo archivée bottom-end
``` ### Bouton d'action {#example-action} Utilisez l'attribut `action` pour ajouter un bouton à droite. Un clic sur ce bouton déclenche l'événement `action-click`. Ajoutez `action-loading` pour afficher un état de chargement. ```html Photo archivée Afficher le message ``` Vous pouvez également utiliser le slot `action` pour un élément personnalisé. ```html Photo archivée Annuler Afficher le message ``` ### Fermable {#example-closeable} Ajoutez l'attribut `closeable` pour afficher un bouton de fermeture à droite. Un clic sur ce bouton ferme le snackbar et déclenche l'événement `close`. ```html Photo archivée Afficher le message ``` Personnalisez le bouton à l'aide du slot `close-button`. ```html Photo archivée Afficher le message ``` Personnalisez l'icône du bouton à l'aide de l'attribut `close-icon` ou du slot `close-icon`. ```html Photo archivée Afficher le message ``` ### Nombre de lignes du message {#example-message-line} Par défaut, le nombre de lignes du message n'est pas limité. Utilisez `message-line` (avec la valeur 1 ou 2) pour le limiter. ```html L'élément possède déjà l'étiquette « voyage ». Vous pouvez ajouter une nouvelle étiquette. Afficher le message ``` ### Fermeture automatique {#example-auto-close-delay} Utilisez `auto-close-delay` (en millisecondes) pour définir le délai avant la fermeture automatique. Valeur par défaut : 5000 ms. ```html Photo archivée Afficher le message ``` ### Fermer en cliquant à l'extérieur {#example-close-on-outside-click} Ajoutez `close-on-outside-click` pour fermer le snackbar en cliquant à l'extérieur de celui-ci. ```html Photo archivée Afficher le message ``` ## mdui-snackbar API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
open open true boolean false

Si la snackbar est affichée
placement placement true 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' 'bottom'

Position d'affichage de la snackbar. Par défaut bottom. Les valeurs possibles incluent :

  • top : En haut, centré
  • top-start : En haut, aligné à gauche
  • top-end : En haut, aligné à droite
  • bottom : En bas, centré
  • bottom-start : En bas, aligné à gauche
  • bottom-end : En bas, aligné à droite
action action true string

Texte du bouton d'action. Peut également être défini via slot="action" pour définir le bouton d'action.
action-loading actionLoading true boolean false

Si le bouton d'action est en état de chargement
closeable closeable true boolean false

Si un bouton de fermeture doit être affiché à droite
close-icon closeIcon true string

Nom de l'icône Material Icons pour le bouton de fermeture. Peut également être défini via slot="close-icon".
message-line messageLine true 1 | 2

Nombre maximal de lignes pour le texte du message. Par défaut, aucune limite. Les valeurs possibles incluent :

  • 1 : Affiche au maximum une ligne
  • 2 : Affiche au maximum deux lignes
auto-close-delay autoCloseDelay true number 5000

Délai de fermeture automatique (en millisecondes). Définissez sur 0 pour désactiver la fermeture automatique. La valeur par défaut est de 5000 millisecondes.
close-on-outside-click closeOnOutsideClick true boolean false

Si un clic ou un toucher en dehors de la snackbar doit la fermer
### Événements
Nom Description
open

Se déclenche lorsque la snackbar commence à s'afficher. Vous pouvez empêcher l'affichage de la snackbar en appelant event.preventDefault().
opened

Se déclenche lorsque l'animation d'affichage de la snackbar est terminée.
close

Se déclenche lorsque la snackbar commence à se masquer. Vous pouvez empêcher la fermeture de la snackbar en appelant event.preventDefault().
closed

Se déclenche lorsque l'animation de masquage de la snackbar est terminée.
action-click

Se déclenche lors du clic sur le bouton d'action
### Slots
Nom Description
Défaut

Contenu textuel du message de la snackbar
action

Bouton d'action à droite
close-button

Bouton de fermeture à droite. Doit avoir l'attribut closeable défini sur true pour être affiché.
close-icon

Icône dans le bouton de fermeture
### CSS Parts
Nom Description
message

Texte du message
action

Bouton d'action
close-button

Bouton de fermeture
close-icon

Icône dans le bouton de fermeture
### Propriétés CSS personnalisées
Nom Description
--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.
# Composant Switch Le composant Switch permet de basculer l'état (activé/désactivé) d'une option. ## Utilisation {#usage} Importez le composant selon vos besoins : ```js import 'mdui/components/switch.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Switch } from 'mdui/components/switch.js'; ``` Exemple d'utilisation : ```html ``` ## Exemples {#examples} ### État activé {#example-checked} Lorsque le switch est activé, l'attribut `checked` vaut `true`. Ajoutez `checked` pour qu'il soit activé par défaut. ```html ``` ### État désactivé {#example-disabled} Ajoutez l'attribut `disabled` pour désactiver le switch. ```html ``` ### Icône {#example-icon} Utilisez les attributs `unchecked-icon` et `checked-icon` pour définir les icônes Material Icons correspondant à chaque état. Utilisez les slots associés pour une personnalisation avancée. ```html ``` ## mdui-switch API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
disabled disabled true boolean false

Si le composant est désactivé
checked checked true boolean false

Si le composant est coché (activé)
undefined defaultChecked false boolean false

État coché par défaut. Lors de la réinitialisation du formulaire, il reviendra à cet état. Cette propriété ne peut être définie que par une propriété JavaScript.
unchecked-icon uncheckedIcon true string

Nom de l'icône Material Icons pour l'état non coché. Peut également être défini via slot="unchecked-icon".
checked-icon checkedIcon true string

Nom de l'icône Material Icons pour l'état coché. Peut également être défini via slot="checked-icon".

Par défaut, l'icône est check. Vous pouvez passer une chaîne vide pour supprimer l'icône par défaut.
required required true boolean false

Si ce Switch doit être coché lors de la soumission du formulaire
form form true string

Élément <form> associé. La valeur de cet attribut doit être l'id d'un élément <form> dans la même page.

Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément <form>. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, pas seulement en tant qu'enfant de l'élément <form>.
name name true string ''

Nom du Switch, qui sera envoyé avec les données du formulaire
value value true string 'on'

Valeur du Switch, qui sera envoyée avec les données du formulaire
undefined validity false ValidityState

État de validation du formulaire, voir ValidityState pour plus de détails
undefined validationMessage false string

Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
autofocus autofocus true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
### Méthodes
Nom Description
checkValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.
reportValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.

Si la validation échoue, un message d'erreur s'affiche également sur le composant.
setCustomValidity(message: string): void

Définit un texte d'erreur personnalisé. Tant que ce texte n'est pas vide, cela signifie que le champ n'est pas valide.
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
change

Se déclenche lorsque l'état de sélection change
input

Se déclenche lorsque l'état de sélection change
invalid

Se déclenche lorsque la validation du champ du formulaire échoue
### Slots
Nom Description
unchecked-icon

Élément à l'état non coché
checked-icon

Élément à l'état coché
### CSS Parts
Nom Description
track

Piste
thumb

Conteneur de l'icône
unchecked-icon

Icône de l'état non coché
checked-icon

Icône de l'état coché
### Propriétés CSS personnalisées
Nom Description
--shape-corner

Taille des coins arrondis de la piste 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.
--shape-corner-thumb

Taille des coins arrondis du conteneur de l'icône 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.
# Composant Onglets 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. ## Utilisation {#usage} Importez les composants selon vos besoins : ```js import 'mdui/components/tabs.js'; import 'mdui/components/tab.js'; import 'mdui/components/tab-panel.js'; ``` Importez les types TypeScript correspondants : ```ts 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 : ```html Onglet 1 Onglet 2 Onglet 3 Panneau d'onglets 1 Panneau d'onglets 2 Panneau d'onglets 3 ``` ## Exemples {#examples} ### Style des onglets {#example-variant} Utilisez l'attribut `variant` sur `` pour définir le style. ```html 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 ``` ### Position des onglets {#example-placement} Utilisez l'attribut `placement` sur `` pour définir la position des onglets. ```html 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 ``` ### Pleine largeur {#example-full-width} Ajoutez l'attribut `full-width` à `` pour que les onglets s'étendent sur toute la largeur disponible. ```html Onglet 1 Onglet 2 Onglet 3 Panneau d'onglets 1 Panneau d'onglets 2 Panneau d'onglets 3 ``` ### Icône {#example-icon} Utilisez l'attribut `icon` sur `` pour ajouter une icône Material Icons. Ajoutez l'attribut `inline` pour aligner horizontalement l'icône et le texte. ```html Onglet 1 Onglet 2 Onglet 3 Panneau d'onglets 1 Panneau d'onglets 2 Panneau d'onglets 3 ``` ### Badge {#example-badge} Utilisez le slot `badge` dans `` pour ajouter un badge. ```html Onglet 1 99+ Onglet 2 Onglet 3 Panneau d'onglets 1 Panneau d'onglets 2 Panneau d'onglets 3 ``` ### Contenu personnalisé {#example-custom} Utilisez le slot `custom` dans `` pour personnaliser entièrement le contenu de l'onglet. ```html Onglet 1 Icon Onglet 2 Onglet 3 Panneau d'onglets 1 Panneau d'onglets 2 Panneau d'onglets 3 ``` ## mdui-tab-panel API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
value value true string

Valeur du panneau d'onglets
### Slots
Nom Description
Défaut

Contenu du panneau d'onglets
## mdui-tab API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
value value true string

Valeur de l'onglet
icon icon true string

Nom de l'icône Material Icons. Peut également être défini via slot="icon".
inline inline true boolean false

Si l'icône et le texte doivent être disposés horizontalement
autofocus autofocus true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
### Méthodes
Nom Description
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
### Slots
Nom Description
Défaut

Contenu textuel de l'onglet
icon

Icône de l'onglet
badge

Badge
custom

Contenu personnalisé pour tout l'onglet
### CSS Parts
Nom Description
container

Conteneur de l'onglet
icon

Icône de l'onglet
label

Texte de l'onglet
## mdui-tabs API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
variant variant true '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 true string

Valeur de l'élément <mdui-tab> actuellement actif
placement placement true '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é à gauche
  • top : En haut, centré
  • top-end : En haut, aligné à droite
  • bottom-start : En bas, aligné à gauche
  • bottom : En bas, centré
  • bottom-end : En bas, aligné à droite
  • left-start : À gauche, aligné en haut
  • left : À gauche, centré
  • left-end : À gauche, aligné en bas
  • right-start : À droite, aligné en haut
  • right : À droite, centré
  • right-end : À droite, aligné en bas
full-width fullWidth true boolean false

Indique si le composant doit occuper toute la largeur de l'élément parent
### Événements
Nom Description
change

Se déclenche lorsque la valeur sélectionnée change
### Slots
Nom Description
Défaut

Éléments <mdui-tab>
panel

Éléments <mdui-tab-panel>
### CSS Parts
Nom Description
container

Conteneur des éléments <mdui-tab>
indicator

Indicateur d'état actif
# Composant Champ de texte Le composant champ de texte permet aux utilisateurs de saisir du texte, généralement utilisé dans les formulaires et les boîtes de dialogue. ## Utilisation {#usage} Importez le composant selon vos besoins : ```js import 'mdui/components/text-field.js'; ``` Importez le type TypeScript correspondant : ```ts import type { TextField } from 'mdui/components/text-field.js'; ``` Exemple d'utilisation : ```html ``` ## Exemples {#examples} ### Variante {#example-variant} Définissez la variante à l'aide de l'attribut `variant`. ```html

``` ### Texte d'aide {#example-helper-text} Utilisez `label` pour afficher un texte au-dessus du champ. ```html ``` Utilisez `placeholder` pour afficher un exemple de saisie. ```html ``` Utilisez `helper` (ou le slot `helper`) pour afficher un message d'aide en dessous. Ajoutez `helper-on-focus` pour ne l'afficher que lorsque le champ a le focus. ```html Message d'aide ``` ### Effaçable {#example-clearable} Ajoutez l'attribut `clearable` pour afficher un bouton d'effacement lorsqu'une valeur est saisie. ```html ``` ### Alignement du texte à droite {#example-end-aligned} Ajoutez l'attribut `end-aligned` pour aligner le texte à droite. ```html ``` ### Texte et icônes avant/après {#example-prefix-suffix} Utilisez les attributs `icon` et `end-icon` pour ajouter des icônes Material Icons. Utilisez les slots correspondants pour une personnalisation avancée. ```html

``` Utilisez les attributs `prefix` et `suffix` (ou les slots correspondants) pour ajouter du texte avant ou après. Ce texte ne s'affiche que lorsque le champ a le focus ou contient une valeur. ```html

$ /100 ``` ### Lecture seule {#example-readonly} Ajoutez l'attribut `readonly` pour rendre le champ en lecture seule. ```html ``` ### Désactivé {#example-disabled} Ajoutez l'attribut `disabled` pour désactiver le composant. ```html ``` ### Champ multiligne {#example-rows} Utilisez l'attribut `rows` pour définir le nombre de lignes. ```html ``` Ajoutez l'attribut `autosize` pour ajuster automatiquement la hauteur. Utilisez `min-rows` et `max-rows` pour définir les limites. ```html

``` ### Compteur de caractères {#example-counter} Lorsque `maxlength` est défini, ajoutez `counter` pour afficher un compteur de caractères. ```html ``` ### Champ mot de passe {#example-password} Lorsque `type="password"`, ajoutez `toggle-password` pour afficher un bouton permettant d'afficher/masquer le mot de passe. ```html ``` ## mdui-text-field API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
variant variant true 'filled' | 'outlined' 'filled'

Forme du champ de texte. Par défaut filled. Les valeurs possibles incluent :

  • filled : Champ de texte avec couleur de fond, effet visuel fort
  • outlined : Champ de texte avec bordure, effet visuel plus faible
type type true 'text' | 'number' | 'password' | 'url' | 'email' | 'search' | 'tel' | 'hidden' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' 'text'

Type de saisie du champ de texte. Par défaut text. Les valeurs possibles incluent :

  • text : Valeur par défaut. Champ de texte
  • number : Permet uniquement la saisie de chiffres. Affiche un clavier numérique sur les appareils dotés d'un clavier virtuel.
  • password : Pour saisir des mots de passe ; la valeur est masquée.
  • url : Pour saisir des URL ; valide le format de l'URL. Affiche un clavier adapté sur les appareils prenant en charge les claviers virtuels.
  • email : Pour saisir des adresses e-mail ; valide le format de l'e-mail. Affiche un clavier adapté sur les appareils prenant en charge les claviers virtuels.
  • search : Pour les champs de recherche. Sur les appareils dotés d'un clavier virtuel, la touche Entrée affiche une icône de recherche.
  • tel : Pour saisir des numéros de téléphone. Affiche un clavier numérique téléphonique sur les appareils dotés d'un clavier virtuel.
  • hidden : Masque le contrôle, mais sa valeur est toujours envoyée au serveur.
  • date : Saisie d'une date (année, mois, jour, sans heure). Sur les navigateurs pris en charge, ouvre un sélecteur de date ou une molette numérique année-mois-jour lorsqu'il est activé.
  • datetime-local : Saisie d'une date et d'une heure, sans fuseau horaire. Sur les navigateurs pris en charge, ouvre un sélecteur de date ou une molette numérique année-mois-jour lorsqu'il est activé.
  • month : Saisie d'une année et d'un mois, sans fuseau horaire.
  • time : Saisie d'une heure, sans fuseau horaire.
  • week : Saisie d'une date composée d'une année et d'un numéro de semaine, sans fuseau horaire.
name name true string ''

Nom du champ de texte, qui sera envoyé avec les données du formulaire
value value false string ''

Valeur du champ de texte, qui sera envoyée avec les données du formulaire
undefined defaultValue false string ''

Valeur par défaut. Lors de la réinitialisation du formulaire, il reviendra à cette valeur par défaut. Cette propriété ne peut être définie que par une propriété JavaScript.
label label true string

Texte de l'étiquette
placeholder placeholder true string

Texte de l'espace réservé
helper helper true string

Texte d'aide en bas du champ de texte. Peut également être défini via slot="helper".
helper-on-focus helperOnFocus true boolean false

Si le texte d'aide en bas ne doit être affiché que lorsque le champ obtient le focus.
clearable clearable true boolean false

Si le contenu du champ de texte peut être vidé
clear-icon clearIcon true string

Lorsque le champ de texte peut être vidé, nom de l'icône Material Icons pour le bouton d'effacement affiché à droite. Peut également être défini via slot="clear-icon".
end-aligned endAligned true boolean false

Si le texte doit être aligné à droite
prefix prefix true string

Texte de préfixe du champ de texte. N'est affiché que lorsque le champ de texte a le focus ou a une valeur. Peut également être défini via slot="prefix".
suffix suffix true string

Texte de suffixe du champ de texte. N'est affiché que lorsque le champ de texte a le focus ou a une valeur. Peut également être défini via slot="suffix".
icon icon true string

Nom de l'icône Material Icons pour l'icône de préfixe du champ de texte. Peut également être défini via slot="icon".
end-icon endIcon true string

Nom de l'icône Material Icons pour l'icône de suffixe du champ de texte. Peut également être défini via slot="end-icon".
error-icon errorIcon true string

Lorsque la validation du champ du formulaire échoue, nom de l'icône Material Icons affichée à droite du champ de texte. Peut également être défini via slot="error-icon".
form form true string

Élément <form> associé. La valeur de cet attribut doit être l'id d'un élément <form> dans la même page.

Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément <form>. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, pas seulement en tant qu'enfant de l'élément <form>.
readonly readonly true boolean false

Si le champ est en lecture seule
disabled disabled true boolean false

Si le champ de texte est désactivé
required required true boolean false

Si ce champ doit être obligatoirement rempli lors de la soumission du formulaire
rows rows true number

Nombre de lignes fixes affichées pour le champ de texte
autosize autosize true boolean false

Si la hauteur du champ de texte doit s'ajuster automatiquement en fonction du contenu saisi
min-rows minRows true number

Lorsque autosize est true, nombre minimal de lignes du champ de texte
max-rows maxRows true number

Lorsque autosize est true, nombre maximal de lignes du champ de texte
minlength minlength true number

Nombre minimal de caractères autorisé
maxlength maxlength true number

Nombre maximal de caractères autorisé
counter counter true boolean false

Si un compteur de caractères doit être affiché, n'est effectif que lorsque maxlength est spécifié.
min min true number

Lorsque type est number, valeur numérique minimale autorisée
max max true number

Lorsque type est number, valeur numérique maximale autorisée
step step true number

Lorsque type est number, pas d'incrémentation/décrémentation
pattern pattern true string

Expression régulière pour la validation du formulaire
toggle-password togglePassword true boolean false

Lorsque type est password, définir cet attribut ajoute un bouton pour basculer entre le texte clair et le texte masqué.
show-password-icon showPasswordIcon true string

icône Material Icons pour le bouton de basculement du mot de passe, affiché lorsque le mot de passe est en texte clair. Peut également être défini via slot="show-password-icon".
hide-password-icon hidePasswordIcon true string

icône Material Icons pour le bouton de basculement du mot de passe, affiché lorsque le mot de passe est masqué. Peut également être défini via slot="hide-password-icon".
autocapitalize autocapitalize true 'none' | 'sentences' | 'words' | 'characters'

Attribut iOS non standard servant à contrôler la mise en majuscule automatique de la première lettre du texte. Valable sur iOS 5 et versions ultérieures. Les valeurs possibles incluent :

  • none : Désactive la mise en majuscule automatique
  • sentences : Met en majuscule la première lettre des phrases
  • words : Met en majuscule la première lettre des mots
  • characters : Met en majuscule toutes les lettres
autocorrect autocorrect true string

Attribut autocorrect de l'élément input
autocomplete autocomplete true string

Attribut autocomplete de l'élément input
enterkeyhint enterkeyhint true 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'

Attribut enterkeyhint de l'élément input, utilisé pour personnaliser le texte ou l'icône affiché(e) sur la touche Entrée du clavier virtuel. L'affichage réel dépend de l'appareil et de la langue de l'utilisateur. Les valeurs possibles incluent :

  • enter : Insère une nouvelle ligne
  • done : Termine la saisie, ferme le clavier virtuel
  • go : Navigue vers la cible du texte saisi
  • next : Passe à l'élément de saisie suivant
  • previous : Revient à l'élément de saisie précédent
  • search : Navigue vers les résultats de recherche
  • send : Envoie le message texte
spellcheck spellcheck true boolean false

Si la vérification orthographique doit être activée
inputmode inputmode true 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'

Attribut inputmode de l'élément input, utilisé pour personnaliser le type de clavier virtuel. Les valeurs possibles incluent :

  • none : Pas de clavier virtuel. Utile lorsque vous souhaitez implémenter votre propre contrôle de saisie au clavier.
  • text : Clavier de saisie de texte standard
  • decimal : Clavier de saisie décimale, peut inclure un point décimal . ou une virgule de séparation des milliers , en plus des chiffres.
  • numeric : Affiche un clavier numérique 0-9
  • tel : Clavier numérique téléphonique, comprenant les chiffres 0-9, l'astérisque * ou le dièse #.
  • search : Clavier virtuel optimisé pour la saisie de recherche, le bouton de soumission affiche généralement search ou "Rechercher".
  • email : Clavier virtuel optimisé pour la saisie d'adresses e-mail, comprend généralement les touches @, ..
  • url : Clavier virtuel optimisé pour la saisie d'URL, comprend généralement les touches ., /, #.
undefined validity false ValidityState

État de validation du formulaire, voir ValidityState pour plus de détails
undefined validationMessage false string

Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
undefined valueAsNumber false number

Obtient la valeur actuelle et la convertit en type number ; ou définit une valeur de type number. Si la valeur ne peut pas être convertie en type number, renvoie NaN.
autofocus autofocus true boolean false

Si le focus doit être automatiquement obtenu après le chargement de la page
tabindex tabIndex false number

Ordre de l'élément lors de la navigation au clavier avec la touche Tab
### Méthodes
Nom Description
select(): void

Sélectionne le texte dans le champ de texte
setSelectionRange(start: number, end: number, direction: 'forward' | 'backward' | 'none'): void

Sélectionne une plage spécifique dans le champ de texte
setRangeText(replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve'): void

Remplace une plage spécifique de texte dans le champ de texte par un nouveau texte
checkValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.
reportValidity(): boolean

Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie false et déclenche l'événement invalid ; sinon, renvoie true.

Si la validation échoue, un message d'erreur s'affiche également sur le composant.
setCustomValidity(message: string): void

Définit un texte d'erreur personnalisé. Tant que ce texte n'est pas vide, cela signifie que le champ n'est pas valide.
click(): void

Simule un clic sur l'élément
focus(options?: FocusOptions): 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
### Événements
Nom Description
focus

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

Se déclenche lorsque l'élément perd le focus
change

Se déclenche lorsque la valeur du champ de texte change et que le champ perd le focus
input

Se déclenche lorsque la valeur du champ de texte change
invalid

Se déclenche lorsque la validation du champ du formulaire échoue
clear

Se déclenche lors du clic sur le bouton d'effacement généré par l'attribut clearable. Vous pouvez empêcher l'effacement du champ de texte en appelant event.preventDefault().
### Slots
Nom Description
icon

Icône de gauche
end-icon

Icône de droite
error-icon

Icône de droite à l'état d'échec de validation
prefix

Texte de gauche
suffix

Texte de droite
clear-button

Bouton d'effacement
clear-icon

Icône dans le bouton d'effacement
toggle-password-button

Bouton de basculement de l'affichage du mot de passe
show-password-icon

Icône dans le bouton de basculement de l'affichage du mot de passe à l'état affiché (texte clair)
hide-password-icon

Icône dans le bouton de basculement de l'affichage du mot de passe à l'état masqué
helper

Texte d'aide en bas
### CSS Parts
Nom Description
container

Conteneur du champ de texte
icon

Icône de gauche
end-icon

Icône de droite
error-icon

Icône de droite à l'état d'échec de validation
prefix

Texte de gauche
suffix

Texte de droite
label

Texte de l'étiquette au-dessus
input

Élément <input> ou <textarea> interne
clear-button

Bouton d'effacement
clear-icon

Icône dans le bouton d'effacement
toggle-password-button

Bouton de basculement de l'affichage du mot de passe
show-password-icon

Icône dans le bouton de basculement de l'affichage du mot de passe à l'état affiché (texte clair)
hide-password-icon

Icône dans le bouton de basculement de l'affichage du mot de passe à l'état masqué
supporting

Conteneur des informations auxiliaires en bas, y compris l'aide, l'erreur et le compteur
helper

Texte d'aide en bas
error

Texte de description d'erreur en bas
counter

Compteur de caractères à droite en bas
# Composant Infobulle Les infobulles fournissent un texte explicatif ou des informations contextuelles supplémentaires sur un élément spécifique pour aider l'utilisateur à comprendre sa fonction. ## Utilisation {#usage} Importez le composant selon vos besoins : ```js import 'mdui/components/tooltip.js'; ``` Importez le type TypeScript correspondant : ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Exemple d'utilisation : ```html Button ``` ## Exemples {#examples} ### Infobulle simple {#example-plain} Le style par défaut est une infobulle simple. Utilisez l'attribut `content` pour définir le contenu. ```html Button ``` Vous pouvez également utiliser le slot `content`. ```html Button
titre
contenu
 ``` ### Infobulle riche {#example-rich} Définissez `variant="rich"` pour créer une infobulle riche. Utilisez les attributs `headline` et `content` pour définir le titre et le contenu. ```html Button ``` Utilisez les slots `headline`, `content` et `action`. ```html Button
Infobulle riche
Les infobulles riches attirent l'attention sur un élément spécifique qui le mérite. Elles prennent en charge plusieurs lignes de texte informatif.
Action ``` ### Position {#example-placement} Utilisez l'attribut `placement` pour définir la position. ```html
``` ### Déclenchement {#example-trigger} Utilisez l'attribut `trigger` pour définir le mode de déclenchement. ```html Button ``` ### Délai d'ouverture/fermeture {#example-delay} Lorsque `trigger="hover"`, utilisez `open-delay` et `close-delay` pour définir les délais en millisecondes. ```html Button ``` ### État désactivé {#example-disabled} Ajoutez l'attribut `disabled` pour désactiver l'infobulle. ```html Button ``` ## mdui-tooltip API ### Propriétés
Attribut HTML Propriété JavaScript Reflect Type Défaut Description
variant variant true 'plain' | 'rich' 'plain'

Forme de l'infobulle. Par défaut plain. Les valeurs possibles incluent :

  • plain : Texte brut, adapté aux simples lignes de texte
  • rich : Texte enrichi, peut contenir un titre, un corps et des boutons d'action
placement placement true 'auto' | 'top-left' | 'top-start' | 'top' | 'top-end' | 'top-right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-right' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Position de l'infobulle. Par défaut auto. Les valeurs possibles incluent :

  • auto : Position déterminée automatiquement. Lorsque variant="plain", privilégie top ; lorsque variant="rich", privilégie bottom-right.
  • top-left : En haut à gauche
  • top-start : En haut, aligné à gauche
  • top : En haut, centré
  • top-end : En haut, aligné à droite
  • top-right : En haut à droite
  • bottom-left : En bas à gauche
  • bottom-start : En bas, aligné à gauche
  • bottom : En bas, centré
  • bottom-end : En bas, aligné à droite
  • bottom-right : En bas à droite
  • left-start : À gauche, aligné en haut
  • left : À gauche, centré
  • left-end : À gauche, aligné en bas
  • right-start : À droite, aligné en haut
  • right : À droite, centré
  • right-end : À droite, aligné en bas
open-delay openDelay true number 150

Délai d'affichage lors du déclenchement par survol de la souris, en millisecondes.
close-delay closeDelay true number 150

Délai de masquage lors du déclenchement par survol de la souris, en millisecondes.
headline headline true string

Titre de l'infobulle. Utilisable uniquement lorsque variant="rich". Peut également être défini via slot="headline".
content content true string

Contenu de l'infobulle. Peut également être défini via slot="content".
trigger trigger true 'click' | 'hover' | 'focus' | 'manual' | string 'hover focus'

Mode de déclenchement. Prend en charge plusieurs valeurs, séparées par des espaces. Les valeurs possibles incluent :

  • click : Se déclenche au clic
  • hover : Se déclenche au survol de la souris
  • focus : Se déclenche au focus
  • manual : Ne peut être ouvert ou fermé que par programmation, aucun autre mode de déclenchement ne peut être spécifié
disabled disabled true boolean false

Si l'infobulle est désactivée
open open true boolean false

Si l'infobulle est affichée
### Événements
Nom Description
open

Se déclenche lorsque l'infobulle commence à s'afficher. Vous pouvez empêcher l'ouverture de l'infobulle en appelant event.preventDefault().
opened

Se déclenche lorsque l'animation d'affichage de l'infobulle est terminée.
close

Se déclenche lorsque l'infobulle commence à se masquer. Vous pouvez empêcher la fermeture de l'infobulle en appelant event.preventDefault().
closed

Se déclenche lorsque l'animation de masquage de l'infobulle est terminée.
### Slots
Nom Description
Défaut

Élément cible déclenchant l'infobulle. Seul le premier élément du slot default est pris en compte comme élément cible.
headline

Titre de l'infobulle, ce slot ne s'applique que lorsque variant="rich".
content

Contenu de l'infobulle, peut contenir du HTML. Si seul du texte brut est nécessaire, l'attribut content peut être utilisé à la place.
action

Bouton(s) en bas de l'infobulle, ce slot ne s'applique que lorsque variant="rich".
### CSS Parts
Nom Description
popup

Conteneur de l'infobulle
headline

Titre
content

Corps
action

Bouton(s) d'action
### Propriétés CSS personnalisées
Nom Description
--shape-corner-plain

Lorsque variant="plain", 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.
--shape-corner-rich

Lorsque variant="rich", 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.
# Composant Top App Bar 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 {#usage} Importez les composants selon vos besoins : ```js import 'mdui/components/top-app-bar.js'; import 'mdui/components/top-app-bar-title.js'; ``` Importez les types TypeScript correspondants : ```ts 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.) ```html Titre
``` **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` : 1. Lorsque l'attribut `scroll-target` est spécifié. Dans ce cas, le `padding-top` est ajouté à l'élément cible de `scroll-target`. 2. Lorsqu'il se trouve à l'intérieur du composant [``](/fr/docs/2/components/layout). Dans ce cas, aucun `padding-top` n'est ajouté. ## Exemples {#examples} ### Dans un conteneur spécifique {#example-scroll-target} 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). ```html
Titre
``` ### Variante {#example-variant} Définissez la variante à l'aide de l'attribut `variant` sur ``. ```html
Titre
center-aligned small medium large
``` ### Comportement lors du défilement {#example-scroll-behavior} 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** ```html
Titre
``` **Exemple : Ajouter une ombre lors du défilement** ```html
Titre
``` **Exemple : Rétrécir lors du défilement** ```html
Titre
``` **Exemple : Rétrécir et ajouter une ombre** ```html
Titre
``` ### Texte à l'état déployé {#label-large} Pour `variant="medium"` ou `"large"` avec `scroll-behavior="shrink"`, utilisez le slot `label-large` dans `` pour définir le texte affiché à l'état déployé. ```html
Ceci est le titre en état replié Ceci est le titre en état déplié
``` ## mdui-top-app-bar-title API ### Slots
Nom Description
Défaut

Titre de la Top App Bar
label-large

Texte du titre à l'état étendu
### CSS Parts
Nom Description
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 Reflect Type Défaut Description
variant variant true '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 true boolean false

Si le composant est masqué
shrink shrink true 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 true '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 false 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 true number

Seuil de défilement avant activation du comportement, en px.
order order true number

Ordre de ce composant dans le Layout <mdui-layout>, trié par ordre croissant. La valeur par défaut est 0.
### Événements
Nom Description
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 Description
Défaut

Éléments à l'intérieur de la Top App Bar
### Propriétés CSS personnalisées
Nom Description
--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.
# Bibliothèque utilitaire jq mdui intègre une bibliothèque utilitaire JavaScript légère, offrant une API et un style d'appel en chaîne similaires à jQuery, mais avec un poids six fois inférieur. Vous pouvez importer cette fonction utilitaire selon vos besoins : ```js import { $ } from 'mdui/jq.js'; ``` ## Cœur {#api-core} ### `$()` {#dollar} Cette fonction a plusieurs usages : Passez un sélecteur CSS en paramètre pour obtenir un objet JQ contenant les éléments correspondants. ```js $('.box'); ``` Passez un élément DOM, un tableau quelconque, une NodeList ou un objet JQ pour obtenir un objet JQ contenant les éléments spécifiés. ```js $(document); ``` Passez une chaîne HTML pour obtenir un objet JQ contenant les éléments DOM créés à partir de ce HTML. ```js $(`
`); ``` Passez une fonction. Cette fonction est appelée lorsque le DOM est chargé. ```js $(function () { console.log('DOM chargé'); }); ``` ## Extension {#api-extend} ### `$.extend()` {#d-extend} Si un seul objet est passé, ses propriétés sont fusionnées dans l'objet `$`, ajoutant ainsi de nouvelles fonctionnalités dans l'espace de noms `$`. ```js $.extend({ customFunc: function () {}, }); // On peut alors appeler la fonction personnalisée ainsi $.customFunc(); ``` Si deux objets ou plus sont passés, les propriétés de tous les objets sont ajoutées au premier objet, et l'objet fusionné est retourné. Les propriétés ayant la valeur `undefined` ne sont pas fusionnées. ```js const object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 }); // Le premier objet et la valeur retournée sont désormais { key1: val1, key2: val2, key3: val3 } ``` ### `$.fn.extend()` {#fn-extend} Étend les méthodes sur la chaîne de prototypes de `$`. ```js $.fn.extend({ customFunc: function () {}, }); // On peut alors utiliser la méthode étendue ainsi $(document).customFunc(); ``` ## URL {#api-url} ### `$.param()` {#d-param} Sérialise un tableau ou un objet en une chaîne de requête URL. ```js $.param({ width: 1680, height: 1050 }); // width=1680&height=1050 $.param({ foo: { one: 1, two: 2 } }); // foo[one]=1&foo[two]=2 $.param({ ids: [1, 2, 3] }); // ids[]=1&ids[]=2&ids[]=3 ``` Si le paramètre est un tableau, son format doit correspondre à celui retourné par [`.serializeArray()`](#serializeArray). ```js $.param([ { name: 'name', value: 'mdui' }, { name: 'password', value: '123456' }, ]); // name=mdui&password=123456 ``` ## Opérations sur les tableaux et objets {#api-array} ### `$.each()` {#d-each} Parcourt un tableau ou un objet. Retourne le premier paramètre, c'est-à-dire le tableau ou l'objet parcouru. Le premier paramètre de la fonction de rappel est l'indice du tableau ou la clé de l'objet, le second est la valeur correspondante. Dans la fonction de rappel, `this` pointe vers la valeur. Si la fonction de rappel retourne `false`, le parcours s'arrête. ```js // Parcours d'un tableau $.each(['a', 'b', 'c'], function (index, value) { console.log(index + ':' + value); }); // Résultat : // 0:a // 1:b // 2:c ``` ```js // Parcours d'un objet $.each({ name: 'mdui', lang: 'zh' }, function (key, value) { console.log(key + ':' + value); }); // Résultat // name:mdui // lang:zh ``` ### `$.merge()` {#d-merge} Ajoute les éléments du second tableau au premier et retourne le tableau fusionné. ```js const first = ['a', 'b', 'c']; const second = ['c', 'd', 'e']; const result = $.merge(first, second); console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e'] console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e'] ``` ### `$.unique()` {#d-unique} Supprime les doublons d'un tableau. ```js const result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]); console.log(result); // [1, 2, 12, 3] ``` ### `$.map()` {#d-map} Parcourt un tableau ou un objet et retourne un nouveau tableau composé des valeurs retournées par la fonction de rappel. Le premier paramètre de la fonction de rappel est la valeur, le second est l'indice ou la clé. La fonction peut retourner n'importe quelle valeur. Si elle retourne un tableau, ce tableau est aplati. Si elle retourne `null` ou `undefined`, la valeur est ignorée. Dans la fonction, `this` pointe vers l'objet `window`. ```js // Parcours d'un tableau const result = $.map(['a', 'b', 'c'], function (value, index) { return index + value; }); console.log(result); // ['0a', '1b', '2c'] ``` ```js // Si la fonction retourne un tableau, il est aplati const result = $.map([1, 2, 3], function (value, index) { return [value, value + 1]; }); console.log(result); // [1, 2, 2, 3, 3, 4] ``` ```js // Parcours d'un objet const result = $.map( { name: 'mdui', password: '123456' }, function (value, key) { return key + ':' + value; }, ); console.log(result); // ['name:mdui', 'password:123456'] ``` ### `$.contains()` {#d-contains} Vérifie si un nœud contient un autre nœud. Retourne `true` si le parent contient l'enfant, sinon `false`. ```js $.contains(document, document.body); // true $.contains(document.body, document); // false ``` ## Vérification des types de données {#api-type} ### `.is()` {#is} Vérifie si au moins un élément de la collection correspond au paramètre. Retourne `true` si c'est le cas, sinon `false`. Le paramètre peut être un sélecteur CSS, un élément DOM, un tableau d'éléments DOM, un objet JQ, ou une fonction de rappel. Si le paramètre est une fonction de rappel, ses paramètres sont l'indice et l'élément courant. Dans la fonction, `this` pointe vers l'élément courant. Si la fonction retourne `true`, l'élément correspond ; si elle retourne `false`, il ne correspond pas. ```js $('.box').is('.box'); // true $('.box').is('.boxss'); // false $('.box').is($('.box')[0]); // true ``` ```js // Vérification via la fonction de rappel $(document).is(function (index, element) { return element === document; }); // true ``` ## Accès aux objets {#api-object} ### `.length` {#length} Retourne le nombre d'éléments dans la collection actuelle. ```js $('body').length; // 1 ``` ### `.each()` {#each} Parcourt la collection actuelle et exécute une fonction pour chaque élément. Si la fonction retourne `false`, le parcours s'arrête. Le premier paramètre de la fonction est l'indice, le second est l'élément courant. Dans la fonction, `this` pointe vers l'élément courant. ```js $('img').each(function (index, element) { this.src = 'test' + index + '.jpg'; }); ``` ### `.map()` {#map} Parcourt la collection actuelle et exécute une fonction pour chaque élément, retournant une nouvelle collection composée des valeurs retournées. La fonction peut retourner une valeur simple ou un tableau. Si un tableau est retourné, ses éléments sont ajoutés un par un à la nouvelle collection. Si la fonction retourne `null` ou `undefined`, la valeur n'est pas ajoutée. Les paramètres de la fonction sont l'indice et l'élément. Dans la fonction, `this` pointe vers l'élément courant. ```js const result = $('input.checked').map(function (i, element) { return element.value; }); // result est un objet JQ contenant les valeurs des éléments correspondants ``` ### `.eq()` {#eq} Retourne une nouvelle collection contenant uniquement l'élément à l'indice spécifié. ```js $('div').eq(0); // Retourne une collection contenant uniquement le premier élément $('div').eq(-1); // Retourne une collection contenant uniquement le dernier élément $('div').eq(-2); // Retourne une collection contenant uniquement l'avant-dernier élément ``` ### `.first()` {#first} Retourne une nouvelle collection contenant uniquement le premier élément de la collection actuelle. ```js $('div').first(); // Retourne une collection contenant uniquement le premier div ``` ### `.last()` {#last} Retourne une nouvelle collection contenant uniquement le dernier élément de la collection actuelle. ```js $('div').last(); // Retourne une collection contenant uniquement le dernier div ``` ### `.get()` {#get} Retourne l'élément à l'indice spécifié. Si aucun paramètre n'est fourni, retourne un tableau de tous les éléments. ```js $('div').get(); // Retourne un tableau de tous les éléments div $('div').get(0); // Retourne le premier élément div $('div').get(-1); // Retourne le dernier élément div ``` ### `.index()` {#index} Sans paramètre, retourne l'indice du premier élément de la collection par rapport à ses frères. Avec un sélecteur CSS, retourne l'indice du premier élément par rapport aux éléments correspondant au sélecteur. Avec un élément DOM, retourne l'indice de cet élément dans la collection. Avec un objet JQ, retourne l'indice du premier élément de l'objet dans la collection. ```html
``` ```js $('#child3').index(); // 2 $('#child3').index('#child div'); // 2 $('#child div').index($('#child3').get(0)); // 2 ``` ### `.slice()` {#slice} Retourne un sous-ensemble de la collection actuelle. Vous pouvez spécifier les indices de début et de fin (l'élément de fin n'est pas inclus). Si le second paramètre est omis, les éléments de l'indice de début à la fin sont retournés. ```js // Retourne tous les éléments après le troisième (inclus) $('div').slice(3); // Retourne les éléments entre le troisième et le cinquième (3 inclus, 5 exclus) $('div').slice(3, 5); ``` ### `.filter()` {#filter} Filtre les éléments de la collection actuelle correspondant à une expression. Le paramètre peut être un sélecteur CSS, un élément DOM, un tableau d'éléments DOM, ou une fonction de rappel. Avec une fonction de rappel, ses paramètres sont l'indice et l'élément. `this` pointe vers l'élément courant. Si la fonction retourne `true`, l'élément est conservé ; s'il retourne `false`, il est supprimé. ```js // Filtre les éléments div ayant la classe .box $('div').filter('.box'); // Filtre les options sélectionnées $('#select option').filter(function (index, element) { return element.selected; }); ``` ### `.not()` {#not} Filtre les éléments de la collection qui ne correspondent pas à une expression. Le paramètre peut être un sélecteur CSS, un élément DOM, un tableau d'éléments DOM, un objet JQ, ou une fonction de rappel. Avec une fonction de rappel, ses paramètres sont l'indice et l'élément. `this` pointe vers l'élément courant. Si la fonction retourne `true`, l'élément est supprimé ; s'il retourne `false`, il est conservé. ```js // Filtre les éléments div n'ayant pas la classe .box $('div').not('.box'); // Filtre les options non sélectionnées $('#select option').not(function (index, element) { return element.selected; }); ``` ## Classes CSS {#api-css} ### `.hasClass()` {#hasClass} Vérifie si le premier élément de la collection possède une classe CSS spécifiée. ```js // Vérifie si le premier élément div a la classe .item $('div').hasClass('item'); ``` ### `.addClass()` {#addClass} Ajoute des classes CSS à chaque élément de la collection. Plusieurs classes peuvent être séparées par des espaces. Le paramètre peut être une chaîne ou une fonction de rappel retournant des classes. Avec une fonction, ses paramètres sont l'indice et les classes actuelles. `this` pointe vers l'élément courant. ```js // Ajoute la classe .item à tous les éléments div $('div').addClass('item'); // Ajoute les classes .item1 et .item2 $('div').addClass('item1 item2'); // Ajoute les classes retournées par la fonction $('div').addClass(function (index, currentClassName) { return currentClassName + '-' + index; }); ``` ### `.removeClass()` {#removeClass} Supprime des classes CSS de chaque élément. Plusieurs classes peuvent être séparées par des espaces. Le paramètre peut être une chaîne ou une fonction de rappel. Avec une fonction, ses paramètres sont l'indice et les classes actuelles. `this` pointe vers l'élément courant. Sans paramètre, l'attribut `class` est supprimé. ```js // Supprime la classe .item de tous les éléments div $('div').removeClass('item'); // Supprime les classes .item1 et .item2 $('div').removeClass('item1 item2'); // Supprime les classes retournées par la fonction $('div').removeClass(function (index, currentClassName) { return 'item'; }); ``` ### `.toggleClass()` {#toggleClass} Si la classe existe, elle est supprimée ; si elle n'existe pas, elle est ajoutée. Plusieurs classes peuvent être séparées par des espaces. Le paramètre peut être une chaîne ou une fonction de rappel. Avec une fonction, ses paramètres sont l'indice et les classes actuelles. `this` pointe vers l'élément courant. ```js // Bascule la classe .item sur tous les éléments div $('div').toggleClass('item'); // Bascule les classes .item1 et .item2 $('div').toggleClass('item1 item2'); // Bascule les classes retournées par la fonction $('div').toggleClass(function (index, currentClassName) { return 'item'; }); ``` ## Attributs de nœuds {#api-attr} ### `.prop()` {#prop} Obtient la valeur d'une propriété JavaScript du premier élément. ```js // Obtient la valeur de la propriété checked du premier élément $('input').prop('checked'); ``` Avec deux paramètres, définit la valeur de la propriété pour tous les éléments. La valeur peut être de n'importe quel type ou une fonction de rappel retournant une valeur. Avec une fonction, ses paramètres sont l'indice et l'ancienne valeur. `this` pointe vers l'élément courant. Si la valeur ou la valeur retournée est `undefined`, la propriété n'est pas modifiée. ```js // Définit la propriété checked sur true pour tous les inputs $('input').prop('checked', true); // Utilise une fonction pour définir la valeur $('input').prop('checked', function (index, oldPropValue) { return true; }); ``` Un objet peut être passé pour définir plusieurs propriétés. ```js // Définit plusieurs propriétés $('input').prop({ checked: false, disabled: function (index, oldPropValue) { return true; }, }); ``` ### `.removeProp()` {#removeProp} Supprime une propriété JavaScript de tous les éléments. ```js $('input').removeProp('disabled'); ``` ### `.attr()` {#attr} Obtient la valeur d'un attribut HTML du premier élément. ```js // Obtient la valeur d'attribut du premier élément $('div').attr('username'); ``` Avec deux paramètres, définit la valeur de l'attribut pour tous les éléments. La valeur peut être une chaîne, un nombre ou une fonction de rappel. Avec une fonction, ses paramètres sont l'indice et l'ancienne valeur. `this` pointe vers l'élément courant. Si la valeur ou la valeur retournée est `null`, l'attribut est supprimé ; si elle est `undefined`, l'attribut n'est pas modifié. ```js // Définit l'attribut username $('div').attr('username', 'mdui'); // Utilise une fonction $('div').attr('username', function (index, oldAttrValue) { return 'mdui'; }); ``` Un objet peut être passé pour définir plusieurs attributs. ```js // Définit plusieurs attributs en même temps $('div').attr({ username: 'mdui', lastname: function (index, oldAttrValue) { return 'test'; }, }); ``` ### `.removeAttr()` {#removeAttr} Supprime un ou plusieurs attributs HTML de tous les éléments (séparés par des espaces). ```js // Supprime un attribut $('div').removeAttr('username'); // Supprime plusieurs attributs $('div').removeAttr('username lastname'); ``` ### `.val()` {#val} Retourne la valeur du premier élément. Si l'élément est ``, ``, `