# mdui v2 Documentation

mdui is an front-end component library based on Material Design 3, using Web Components, supporting dynamic colors, dark mode, and lightweight efficiency.

## Premiers pas

- [Aperçu](https://www.mdui.org/fr/docs/2/index.md): mdui est une bibliothèque de composants Web Material Design. Supporte le mode sombre, la localisation et TypeScript pour créer facilement des applications web modernes de qualité.
- [Installation](https://www.mdui.org/fr/docs/2/getting-started/installation.md): Installez mdui via npm, pnpm ou CDN. Supporte les imports à la demande pour réduire la taille du bundle. Guides détaillés pour l'intégration des builds globaux et des modules ES.
- [Démarrage rapide](https://www.mdui.org/fr/docs/2/getting-started/usage.md): Basé sur les Web Components, mdui détaille l'usage des attributs, propriétés, méthodes, événements et slots. Maîtrisez les mises à jour et le style du Shadow DOM avec nos guides.
- [Support TypeScript](https://www.mdui.org/fr/docs/2/getting-started/typescript-support.md): Entièrement écrit en TypeScript, mdui fournit des définitions de types complètes. Profitez de l'autocomplétion et du typage pour améliorer l'efficacité et la robustesse du code.
- [Support IDE](https://www.mdui.org/fr/docs/2/getting-started/ide-support.md): Optimisé pour VS Code et WebStorm. Bénéficiez de l'autocomplétion et des indices via npm ou extensions. Le support complet HTML et CSS booste la vitesse de développement avec mdui.
- [Localisation](https://www.mdui.org/fr/docs/2/getting-started/localization.md): Support multilingue intégré avec plus de 50 packs de localisation. Supporte le chargement différé ou le préchargement pour bâtir efficacement vos applications globales avec mdui.
- [Foire aux questions](https://www.mdui.org/fr/docs/2/getting-started/faq.md): FAQ mdui avec réponses officielles. Solutions pour les balises auto-fermées, la prévention du FOUC et plus. Astuces et exemples de code concrets pour faciliter vos projets web.

## Développement assisté par l'IA

- [LLMs.txt](https://www.mdui.org/fr/docs/2/ai/llms.md): mdui fournit llms.txt et llms-full.txt pour offrir un contexte précis aux LLM. Les docs Markdown supportent le copier-coller pour améliorer la précision et les réponses de l'IA.
- [Serveur MCP](https://www.mdui.org/fr/docs/2/ai/mcp.md): @mdui/mcp intègre les serveurs MCP pour les agents IA. Interrogez attributs, icônes Material et propriétés CSS directement pour enrichir votre expérience de codage assisté par IA.

## Styles

- [Mode sombre](https://www.mdui.org/fr/docs/2/styles/dark-mode.md): Tous les composants mdui supportent le mode sombre. Activé par le système ou manuellement avec setTheme. Supporte les thèmes globaux ou locaux pour toutes vos applications web.
- [Couleur dynamique](https://www.mdui.org/fr/docs/2/styles/dynamic-color.md): Générez des palettes claires et sombres via une couleur ou image. Utilisez setColorScheme et getColorFromImage pour créer des thèmes personnalisés et harmonieux avec mdui.
- [Typographie](https://www.mdui.org/fr/docs/2/styles/prose.md): Les classes mdui-prose et mdui-table optimisent la mise en page d'articles et tableaux. Obtenez une typographie élégante sans CSS pour votre contenu Markdown ou dynamique mdui.
- [Design Tokens](https://www.mdui.org/fr/docs/2/styles/design-tokens.md): Système Design Tokens via Propriétés CSS. Plus de 100 tokens pour couleurs, coins et plus. Personnalisez-les pour créer un look unique et unifié pour vos applications web mdui.

## Intégration avec les frameworks

- [Intégration avec React](https://www.mdui.org/fr/docs/2/frameworks/react.md): Basé sur les Web Components, mdui s'intègre parfaitement à React. Profitez du support TypeScript complet pour la liaison d'événements et de propriétés pour vos projets mdui.
- [Intégration avec Vue](https://www.mdui.org/fr/docs/2/frameworks/vue.md): Intégration simple à Vue via la configuration du compilateur. Supporte le v-model, l'écoute d'événements, les types TypeScript et les indices IDE pour vos applications web mdui.
- [Intégration avec Angular](https://www.mdui.org/fr/docs/2/frameworks/angular.md): Utilisez mdui dans Angular avec CUSTOM_ELEMENTS_SCHEMA. Offre des guides détaillés, supporte l'injection de dépendances et les types TypeScript complets pour vos projets web.
- [Intégration avec d'autres frameworks](https://www.mdui.org/fr/docs/2/frameworks/others.md): Basé sur les Web Components, mdui s'intègre à tout framework moderne comme Svelte, Next.js ou Nuxt. Offre des guides d'intégration et les meilleures pratiques pour vos applis.

## Composants

- [Composant Avatar](https://www.mdui.org/fr/docs/2/components/avatar.md): Avatar représente les utilisateurs ou marques avec images, icônes ou texte. Supporte les formes rondes ou carrées et diverses tailles pour tous vos profils web de mdui.
- [Composant Badge](https://www.mdui.org/fr/docs/2/components/badge.md): Badge affiche des comptes ou des labels de statut. Supporte les tailles small et large avec chiffres ou texte. S'attache aux composants pour vos notifications mdui web.
- [Composant Bottom App Bar](https://www.mdui.org/fr/docs/2/components/bottom-app-bar.md): Bottom App Bar fournit une navigation mobile et des barres d'action. Intègre FAB et menus. Supporte le masquage au défilement pour tous vos projets de mdui modernes.
- [Composant Bouton](https://www.mdui.org/fr/docs/2/components/button.md): Le bouton supporte les styles elevated, filled, tonal, outlined et text. Inclut icônes, chargement et accessibilité selon les Design Guidelines de Material Design 3 pour vos projets.
- [Composant Bouton icône](https://www.mdui.org/fr/docs/2/components/button-icon.md): Bouton icône pour les actions secondaires avec styles standard, filled, tonal et outlined. Supporte les états de chargement et liens pour vos barres d'outils et cartes mdui web.
- [Composant Carte](https://www.mdui.org/fr/docs/2/components/card.md): La carte est un conteneur polyvalent pour les contenus et actions liés. Supporte les styles elevated, filled et outlined avec support média pour vos interfaces de qualité mdui.
- [Composant Case à cocher](https://www.mdui.org/fr/docs/2/components/checkbox.md): La case à cocher permet de sélectionner plusieurs options. Supporte les états coché et indéterminé. Inclut icônes, validation et support complet des formulaires pour vos projets web.
- [Composant Chip](https://www.mdui.org/fr/docs/2/components/chip.md): Chip représente une entrée, une sélection ou un filtrage. Inclut les variantes assist, filter, input et suggestion avec états amovibles pour vos applications web mdui.
- [Composant Indicateur de progression circulaire](https://www.mdui.org/fr/docs/2/components/circular-progress.md): Circular Progress affiche la progression par barres circulaires. Supporte les modes déterminé et spinner. Tailles et couleurs personnalisables pour tous vos projets mdui.
- [Composant Collapse](https://www.mdui.org/fr/docs/2/components/collapse.md): Collapse organise le contenu en sections groupées pour gagner de l'espace. Inclut le mode accordéon et des animations pour vos pages de FAQ et les paramètres mdui web.
- [Composant Boîte de dialogue](https://www.mdui.org/fr/docs/2/components/dialog.md): Boîte de dialogue pour les infos ou décisions clés. Supporte icônes, titres et boutons avec modes modal ou plein écran. Inclut alert, confirm et prompt pour tous vos projets mdui.
- [Composant Séparateur](https://www.mdui.org/fr/docs/2/components/divider.md): Le séparateur fournit une séparation visuelle pour les listes et les mises en page. Supporte les modes horizontal et vertical avec des retraits pour tous vos projets mdui web.
- [Composant Menu déroulant](https://www.mdui.org/fr/docs/2/components/dropdown.md): Dropdown déclenche des menus ou contenus au clic ou au survol. Inclut divers modes de déclenchement, placement auto et délais pour vos interactions web mdui modernes.
- [Composant Floating Action Button](https://www.mdui.org/fr/docs/2/components/fab.md): Le FAB met en évidence les actions clés avec ses formes régulières ou étendues et trois tailles. Inclut icônes et couleurs pour un accès rapide aux fonctions web de mdui.
- [Composant Icône](https://www.mdui.org/fr/docs/2/components/icon.md): L'icône représente les actions avec les icônes Material ou des SVG. Personnalisez la taille, la couleur et la rotation via CSS pour tous vos projets d'applications mdui web.
- [Composant Layout](https://www.mdui.org/fr/docs/2/components/layout.md): Layout organise les barres d'applications, tiroirs et zones de contenu. Inclut un système de grille réactif avec breakpoints et espacements pour tous vos frameworks mdui.
- [Composant Indicateur de progression linéaire](https://www.mdui.org/fr/docs/2/components/linear-progress.md): Linear Progress affiche la progression via des barres horizontales. Supporte les modes déterminé et indéterminé. Couleurs et hauteurs personnalisables pour vos projets web.
- [Composant Liste](https://www.mdui.org/fr/docs/2/components/list.md): La liste affiche des éléments verticaux pour la navigation ou les contacts. Supporte jusqu'à trois lignes avec avatars, icônes et liens pour tous vos projets d'applications mdui.
- [Composant Menu](https://www.mdui.org/fr/docs/2/components/menu.md): Le menu affiche des options d'opération verticales. Supporte divers modes de sélection, sous-menus, raccourcis et contenu personnalisé pour tous vos menus web mdui de qualité.
- [Composant Navigation Bar](https://www.mdui.org/fr/docs/2/components/navigation-bar.md): Navigation Bar pour basculer entre les pages principales sur mobile. Supporte 3 à 5 items avec libellés auto et badges pour tous vos projets web de mdui moderne pro.
- [Composant Navigation Drawer](https://www.mdui.org/fr/docs/2/components/navigation-drawer.md): Navigation Drawer glisse sur le côté pour naviguer. Supporte les modes modal ou non-modal pour les deux côtés. Inclut infos utilisateur et listes pour vos applis mdui.
- [Composant Navigation Rail](https://www.mdui.org/fr/docs/2/components/navigation-rail.md): Navigation Rail fournit une navigation latérale compacte pour les tablettes et les bureaux. Supporte les badges, les séparateurs et un alignement propre pour vos interfaces web mdui.
- [Composant Bouton radio](https://www.mdui.org/fr/docs/2/components/radio.md): Bouton radio pour les sélections mutuellement exclusives. Garantit qu'une seule option est choisie. Supporte icônes personnalisées et les états désactivés pour tous vos projets web.
- [Composant Range Slider](https://www.mdui.org/fr/docs/2/components/range-slider.md): Range Slider permet de sélectionner une plage avec deux curseurs. Inclut des étapes discrètes, des labels personnalisés et la validation pour vos prix ou plages de temps mdui.
- [Composant Select](https://www.mdui.org/fr/docs/2/components/select.md): Select permet une sélection unique ou multiple dans un menu déroulant. Inclut étiquettes, validation et icônes pour vos saisies de données et filtrages web mdui modernes.
- [Composant Bouton segmenté](https://www.mdui.org/fr/docs/2/components/segmented-button.md): Le bouton segmenté supporte la sélection unique ou multiple pour filtrer ou changer de vue. Inclut icônes, liens et styles personnalisés pour construire vos interfaces mdui web.
- [Composant Slider](https://www.mdui.org/fr/docs/2/components/slider.md): Slider permet de choisir une valeur avec contrôle par étapes et graduations. Inclut la validation, l'auto-focus et des labels pour vos interfaces de volume ou de prix mdui.
- [Composant Snackbar](https://www.mdui.org/fr/docs/2/components/snackbar.md): Snackbar fournit des retours brefs avec boutons d'action et fermeture auto. Inclut couleurs et positions personnalisées pour une meilleure expérience web de mdui pro.
- [Composant Switch](https://www.mdui.org/fr/docs/2/components/switch.md): Switch bascule les paramètres binaires avec retour instantané. Supporte icônes, couleurs et tailles. Idéal pour vos pages de paramètres et la gestion des préférences web mdui.
- [Composant Onglets](https://www.mdui.org/fr/docs/2/components/tabs.md): Les onglets permettent de basculer entre plusieurs vues dans une seule zone. Supportent les styles primaires et secondaires avec des icônes et des badges pour toutes vos navigations web mdui.
- [Composant Champ de texte](https://www.mdui.org/fr/docs/2/components/text-field.md): Le champ de texte supporte la saisie sur une ou plusieurs lignes pour mots de passe ou e-mails. Inclut icônes, validation et ajustement de hauteur pour vos interfaces web mdui pro.
- [Composant Infobulle](https://www.mdui.org/fr/docs/2/components/tooltip.md): L'infobulle affiche des infos supplémentaires au survol ou au focus. Supporte le texte riche, le placement personnalisé et des délais pour expliquer vos fonctions web mdui.
- [Composant Top App Bar](https://www.mdui.org/fr/docs/2/components/top-app-bar.md): Top App Bar fournit des titres et actions en haut. Inclut divers styles, effets de défilement et boutons personnalisés. Un header unifié pour tous vos projets web mdui.

## Fonctions

- [Bibliothèque utilitaire jq](https://www.mdui.org/fr/docs/2/functions/jq.md): Bibliothèque jq intégrée avec une API de type jQuery. Elle supporte le DOM chaînable, les événements et les animations sans dépendance pour tous vos projets mdui.
- [Fonction dialog](https://www.mdui.org/fr/docs/2/functions/dialog.md): Utilisez la boîte de dialogue pour ouvrir des fenêtres de dialogue via JavaScript. Gérez le contenu et les boutons avec Promise pour tous vos projets d'applications web mdui pro.
- [Fonction alert](https://www.mdui.org/fr/docs/2/functions/alert.md): La fonction alert remplace window.alert par une boîte de dialogue Material élégante. Affichez des messages importants sans bloquer votre application web mdui de façon fluide.
- [Fonction confirm](https://www.mdui.org/fr/docs/2/functions/confirm.md): Utilisez confirm pour demander une validation utilisateur via une boîte de dialogue Material. Retourne une Promise résolue avec le choix pour tous vos projets web de mdui pro.
- [Fonction prompt](https://www.mdui.org/fr/docs/2/functions/prompt.md): La fonction prompt permet de saisir des données via une boîte de dialogue Material. Configurez les types d'entrée et la validation pour tous vos projets web de mdui moderne.
- [Fonction snackbar](https://www.mdui.org/fr/docs/2/functions/snackbar.md): Appelez snackbar dynamiquement pour afficher des messages brefs. Configurez texte, durée et action pour un retour immédiat pour tous vos projets mdui moderne pro.
- [Fonction getTheme](https://www.mdui.org/fr/docs/2/functions/getTheme.md): Utilisez getTheme pour récupérer le thème actuel appliqué à la page ou à un élément. Indispensable pour adapter votre logique au design mdui web moderne et fluide.
- [Fonction setTheme](https://www.mdui.org/fr/docs/2/functions/setTheme.md): Appliquez un thème clair, sombre ou système via setTheme. Contrôlez l'apparence globale ou locale en changeant les thèmes pour tous vos projets mdui web d'application.
- [Fonction getColorFromImage](https://www.mdui.org/fr/docs/2/functions/getColorFromImage.md): Extrayez la couleur dominante d'une image avec getColorFromImage. Parfait pour synchroniser vos couleurs avec un fond d'écran pour tous vos projets mdui web modernes.
- [Fonction setColorScheme](https://www.mdui.org/fr/docs/2/functions/setColorScheme.md): Générez un jeu de couleurs complet à partir d'une couleur d'origine via setColorScheme. Personnalisez l'identité visuelle mdui en une seule commande simple et rapide.
- [Fonction removeColorScheme](https://www.mdui.org/fr/docs/2/functions/removeColorScheme.md): Réinitialisez les styles de couleurs via removeColorScheme. Supprimez les palettes personnalisées pour revenir aux réglages par défaut mdui web de façon simple et pro.
- [Fonction loadLocale](https://www.mdui.org/fr/docs/2/functions/loadLocale.md): Chargez dynamiquement les fichiers de Localisation avec loadLocale. Optimisez les perfs en ne chargeant que les langues nécessaires à tous vos projets web de mdui pro.
- [Fonction setLocale](https://www.mdui.org/fr/docs/2/functions/setLocale.md): Changez la langue active de l'interface avec setLocale. Mettez à jour les textes des composants pour supporter une audience internationale mdui web de façon dynamique.
- [Fonction getLocale](https://www.mdui.org/fr/docs/2/functions/getLocale.md): Récupérére le code de Localisation actuel via getLocale. Utilisez cette info pour charger des ressources ou ajuster la langue pour tous vos projets web de mdui moderne.
- [Fonction throttle](https://www.mdui.org/fr/docs/2/functions/throttle.md): Optimisez les performances avec throttle en limitant la fréquence d'exécution des fonctions. Idéal pour les événements de défilement web mdui et les interactions pro.
- [Fonction observeResize](https://www.mdui.org/fr/docs/2/functions/observeResize.md): Surveillez les changements de dimensions d'un élément via observeResize. Exécutez des callbacks pour adapter vos mises en page pour tous vos projets web mdui modernes.
- [Fonction breakpoint](https://www.mdui.org/fr/docs/2/functions/breakpoint.md): Identifiez le Breakpoint actif pour adapter votre logique applicative. La fonction retourne le point actuel ou vérifie une condition pour tous vos projets mdui web pro.

## Bibliothèques

- [Bibliothèque de composants d'icônes @mdui/icons](https://www.mdui.org/fr/docs/2/libraries/icons.md): @mdui/icons propose des milliers d'icônes Material sous forme de composants web. Importez à la demande et stylisez-les librement pour tous vos projets mdui modernes.