Häufig gestellte Fragen
Im Folgenden sind einige häufig gestellte Fragen und offizielle Antworten aus der mdui-Community aufgeführt. Bevor Sie eine Frage stellen, sollten Sie suchen, ob es ähnliche Probleme gibt.
Warum wird die Komponente nicht angezeigt, wenn ich ein selbstschließendes Tag verwende?
mdui basiert auf Web Components. Die Web Components-Spezifikation unterstützt keine selbstschließenden Tags. Stellen Sie daher sicher, dass Sie für mdui-Komponenten ein End-Tag verwenden.
<!-- Falsche Verwendung -->
<mdui-text-field />
<!-- Richtige Verwendung -->
<mdui-text-field></mdui-text-field>
Wie kann ich Komponenten ausblenden, bevor sie geladen sind?
Da mdui-Komponenten über JavaScript registriert werden, können sie vor dem Laden der JS-Datei und der Registrierung der Komponente vorübergehend ungestylt erscheinen. Die folgenden beiden Methoden lösen dieses Problem:
Eine Methode ist die Verwendung der CSS-Pseudoklasse :defined, um nicht registrierte mdui-Komponenten auszublenden. Das folgende CSS blendet alle nicht registrierten mdui-Komponenten aus und zeigt sie sofort an, sobald sie registriert sind:
:not(:defined) {
visibility: hidden;
}
Eine andere Methode ist die Verwendung der JavaScript-Methode customElements.whenDefined(). Diese Methode gibt ein Promise zurück, das aufgelöst wird, sobald die angegebene Komponente registriert ist. Für den Fall, dass einige Komponenten aus bestimmten Gründen nicht geladen werden können, können Sie Promise.allSettled() verwenden.
Das folgende Beispiel blendet zunächst das <body> mit opacity: 0 aus und blendet die Seite dann ein, sobald die Komponenten registriert sind. Es verwendet Promise.allSettled(), um auf alle Promises zu warten, sodass die Seite auch dann angezeigt wird, wenn eine Komponente nicht geladen werden kann:
<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'),
]);
// Jetzt sind die Komponenten button, card und checkbox registriert. Füge die ready-Klasse hinzu, um die Seite einzublenden.
document.body.classList.add('ready');
</script>