FAQ

Abaixo estão algumas perguntas comuns da comunidade mdui e respostas oficiais. Recomenda-se procurar por perguntas semelhantes antes de fazer uma pergunta.

Por que usar tags auto-fechadas não exibe o componente?

mdui é uma biblioteca de componentes baseada em Web Components. A especificação Web Components não suporta tags auto-fechadas. Portanto, certifique-se de adicionar uma tag de fechamento para os componentes mdui.

<!-- Uso incorreto -->
<mdui-text-field />

<!-- Uso correto -->
<mdui-text-field></mdui-text-field>

Como ocultar componentes antes que eles sejam carregados?

Como os componentes mdui são registrados via JavaScript, antes que o arquivo JS seja carregado e o componente registrado, ele pode aparecer temporariamente sem estilo. Os dois métodos a seguir podem resolver esse problema:

Um método é usar o pseudo-classe CSS :defined para ocultar componentes mdui não registrados. O seguinte código CSS ocultará todos os componentes mdui não registrados e os exibirá imediatamente após o registro:

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

Outro método é usar o método JavaScript customElements.whenDefined(). Este método retorna uma promise que é resolvida quando o componente especificado é registrado. Para lidar com casos em que alguns componentes não podem ser carregados devido a problemas, você pode usar Promise.allSettled().

O exemplo a seguir oculta <body> com opacity: 0 e, em seguida, exibe a página com um efeito fade-in após o registro dos componentes. O exemplo usa Promise.allSettled() para aguardar a conclusão de todas as promises, garantindo que a página seja exibida normalmente mesmo se algum componente não puder ser carregado:

<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'),
  ]);

  // Agora os componentes button, card, checkbox foram registrados. Adicione a classe ready para exibir a página com fade-in
  document.body.classList.add('ready');
</script>