Domande frequenti
Ecco le domande frequenti su mdui. Controllale prima di chiedere nella community o di creare una nuova segnalazione.
Perché i componenti non vengono mostrati con tag autochiudenti?
mdui è una libreria basata sui Web Component. I Web Component non supportano i tag autochiudenti, quindi con i componenti mdui devi sempre usare il tag di chiusura.
<!-- Utilizzo errato -->
<mdui-text-field />
<!-- Utilizzo corretto -->
<mdui-text-field></mdui-text-field>
Come evitare che i componenti non stilizzati appaiano prima del loro caricamento?
I componenti mdui vengono registrati tramite JavaScript, il che può causare una breve comparsa senza stili fino a quando JavaScript non carica e registra i componenti. Ecco due soluzioni:
Una soluzione è utilizzare la pseudo-classe :defined per nascondere i componenti mdui non registrati. Il seguente CSS nasconde tutti i componenti mdui non registrati e li mostra una volta registrati:
:not(:defined) {
visibility: hidden;
}
Un'altra soluzione è utilizzare il metodo customElements.whenDefined(). Questo metodo restituisce una promise che si risolve quando il componente specificato viene registrato. Per gestire i casi in cui alcuni componenti potrebbero non caricarsi, usa Promise.allSettled().
Nell'esempio seguente, l'elemento <body> viene inizialmente nascosto con opacity: 0 e viene mostrato gradualmente dopo che i componenti sono stati registrati. Promise.allSettled() viene utilizzato per attendere il completamento di tutte le promise, garantendo che la pagina venga visualizzata correttamente anche se un componente non riesce a caricarsi.
<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'),
]);
// Dopo la registrazione dei componenti button, card e checkbox, aggiungi la classe 'ready' per visualizzare gradualmente la pagina
document.body.classList.add('ready');
</script>