Časté dotazy
Zde jsou uvedeny některé často kladené otázky a oficiální odpovědi z komunity mdui. Než položíte otázku, doporučujeme vyhledat podobné problémy.
Proč se komponenta nezobrazí při použití samouzavírací značky?
mdui je knihovna komponent založená na Web Components. Specifikace Web Components nepodporuje samouzavírací značky, proto prosím zajistěte, aby komponenty mdui měly uzavírací značku.
<!-- Chybné použití -->
<mdui-text-field />
<!-- Správné použití -->
<mdui-text-field></mdui-text-field>
Jak skrýt komponentu před dokončením jejího načtení?
Protože komponenty mdui jsou registrovány pomocí JavaScriptu, mohou se před načtením a registrací souboru js komponenty dočasně zobrazovat bez stylů. Následující dva způsoby tento problém řeší:
Jedním ze způsobů je použít CSS pseudotřídu :defined ke skrytí neregistrovaných komponent mdui. Následující CSS kód skryje všechny neregistrované komponenty mdui a zobrazí je ihned po registraci:
:not(:defined) {
visibility: hidden;
}
Druhým způsobem je použít JavaScript metodu customElements.whenDefined(). Tato metoda vrací promise, který je vyřešen (resolve) po dokončení registrace zadané komponenty. Pro zpracování případů, kdy se některou komponentu nepodaří načíst, můžete použít metodu Promise.allSettled().
Následující příklad nejprve skryje <body> pomocí opacity: 0 a poté po dokončení registrace komponent stránku plynule zobrazí. Použitím Promise.allSettled() se čeká na dokončení všech promise, aby se zajistilo, že se stránka zobrazí i v případě, že se některou komponentu nepodaří načíst:
<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'),
]);
// Nyní jsou komponenty button, card, checkbox zaregistrovány, přidáme třídu ready, aby se stránka plynule zobrazila
document.body.classList.add('ready');
</script>