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>