Questions fréquentes

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 ?

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.

<!-- Mauvaise utilisation -->
<mdui-text-field />

<!-- Bonne utilisation -->
<mdui-text-field></mdui-text-field>

Comment masquer un composant avant son chargement ?

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 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 :

:not(:defined) {
  visibility: hidden;
}

Une autre méthode consiste à utiliser customElements.whenDefined(). Cette méthode retourne une Promise qui se résout lorsque le composant spécifié est enregistré. Vous pouvez utiliser 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 <body> avec opacity: 0, puis utilise Promise.allSettled pour attendre que tous les composants soient enregistrés avant de faire apparaître la page :

<style>
  body {
    opacity: 0;
  }

  body.ready {
    opacity: 1;
    transition: 0.25s opacity;
  }
</style>

<script type="module">
  await Promise.allSettled([
    customElements.whenDefined('mdui-button'),
    customElements.whenDefined('mdui-card'),
    customElements.whenDefined('mdui-checkbox'),
  ]);

  // Les composants bouton, carte, case à cocher sont maintenant enregistrés, ajoutez la classe ready pour faire apparaître la page en fondu
  document.body.classList.add('ready');
</script>

Chapitre précédent

Localisation

Chapitre suivant

LLMs.txt