Gyakran Ismételt Kérdések
Az alábbiakban összegyűjtöttük az mdui közösségben gyakran felmerülő kérdéseket és a hivatalos válaszokat. Mielőtt kérdést tesz fel, érdemes átnézni, hogy van-e hasonló probléma.
Miért nem jelenik meg a komponens önzáró címke használatakor?
Az mdui a Web Components technológiára épülő komponenskönyvtár. A Web Components specifikáció nem támogatja az önzáró címkéket, ezért kérjük, hogy az mdui komponensekhez mindig adjon hozzá záró címkét.
<!-- Hibás használat -->
<mdui-text-field />
<!-- Helyes használat -->
<mdui-text-field></mdui-text-field>
Hogyan rejthetem el a komponenseket a betöltésük befejeződéséig?
Mivel az mdui komponensek JavaScript segítségével regisztrálódnak, a js fájlok betöltése és a komponensek regisztrálása előtt a komponensek átmenetileg stílus nélkül jelenhetnek meg. A következő két módszerrel oldható meg ez a probléma:
Az egyik módszer a CSS :defined pszeudoosztálya segítségével elrejteni a nem regisztrált mdui komponenseket. Az alábbi CSS kód elrejti az összes nem regisztrált mdui komponenst, és a regisztráció befejeződése után azonnal megjeleníti őket:
:not(:defined) {
visibility: hidden;
}
A másik módszer a JavaScript customElements.whenDefined() metódusának használata. Ez a metódus egy promise-t ad vissza, amely akkor oldódik fel, amikor a megadott komponens regisztrálása befejeződött. Annak érdekében, hogy kezelni tudja azokat az eseteket, amikor egyes komponensek speciális okok miatt nem tölthetők be, használhatja a Promise.allSettled() metódust is.
Az alábbi példa először a opacity: 0 stílussal elrejti a <body> elemet, majd a komponensek regisztrálása után az oldal fokozatosan megjelenik. A példa a Promise.allSettled() használatával várja meg az összes promise befejeződését, biztosítva, hogy még ha valamelyik komponens nem is tölthető be, az oldal normálisan jelenjen meg:
<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'),
]);
// Most a button, card, checkbox komponensek regisztrálása befejeződött, adja hozzá a ready osztályt, hogy az oldal fokozatosan megjelenjen
document.body.classList.add('ready');
</script>