Często zadawane pytania
Poniżej znajdziesz najczęściej zadawane pytania społeczności mdui i oficjalne odpowiedzi. Przed zadaniem pytania, sprawdź, czy podobny problem został już omówiony.
Dlaczego tagi self-closing nie działają?
mdui jest biblioteką komponentów opartą na Web Components. Specyfikacja Web Components nie obsługuje tagów samozamykających się, dlatego upewnij się, że używasz tagów zamykających dla komponentów mdui.
<!-- Błędne użycie -->
<mdui-text-field />
<!-- Prawidłowe użycie -->
<mdui-text-field></mdui-text-field>
Jak ukryć komponent przed jego pełnym załadowaniem?
Ponieważ komponenty mdui są rejestrowane przez JavaScript, przed załadowaniem i zarejestrowaniem plików JS komponenty mogą być tymczasowo niestylizowane. Poniższe dwa sposoby rozwiązują ten problem:
Pierwszy sposób: użyj pseudoklasy CSS :defined, aby ukryć niezarejestrowane komponenty mdui. Poniższy kod CSS ukryje wszystkie niezarejestrowane komponenty mdui i wyświetli je natychmiast po rejestracji:
:not(:defined) {
visibility: hidden;
}
Drugi sposób: użyj metody JavaScript customElements.whenDefined(). Zwraca ona Promise, który zostanie rozwiązany, gdy dany komponent zostanie zarejestrowany. Aby obsłużyć sytuacje, w których niektóre komponenty nie mogą się załadować, możesz użyć Promise.allSettled().
Przykład poniżej najpierw ukrywa <body> przez opacity: 0, a po zarejestrowaniu komponentów płynnie go wyświetla. Promise.allSettled() czeka na wszystkie Promisy, aby nawet jeśli jakiś komponent nie mógł się załadować, strona i tak się wyświetliła:
<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'),
]);
// Teraz komponenty button, card, checkbox są zarejestrowane – dodajemy klasę ready, aby strona się płynnie się pojawiła
document.body.classList.add('ready');
</script>