Sık Sorulan Sorular
Aşağıda, mdui topluluğunda sıkça karşılaşılan sorunlar ve resmi cevaplar derlenmiştir. Soru sormadan önce benzer sorunların olup olmadığını kontrol etmeniz önerilir.
Kendi kendini kapatan etiketler (self-closing tags) kullanınca bileşenler neden görünmüyor?
mdui, Web Components tabanlı bir bileşen kütüphanesidir. Web Components standardı, kendi kendini kapatan etiketleri (self-closing tags) desteklemez. Bu nedenle, lütfen mdui bileşenleri için kapanış etiketlerini eklediğinizden emin olun.
<!-- Yanlış Kullanım -->
<mdui-text-field />
<!-- Doğru Kullanım -->
<mdui-text-field></mdui-text-field>
Bileşenler yüklenmeden önce nasıl gizlenir?
mdui bileşenleri JavaScript ile kaydedildiği için, js dosyası yüklenip bileşen kaydedilene kadar bileşenler geçici olarak stilsiz görünebilir. Bu sorunu çözmek için iki yöntem aşağıda açıklanmıştır:
Bir yöntem, CSS'teki :defined pseudo-sınıfını kullanarak kayıtlı olmayan mdui bileşenlerini gizlemektir. Aşağıdaki CSS kodu, kayıtlı olmayan tüm mdui bileşenlerini gizler ve bileşen kaydı tamamlandığında hemen gösterir:
:not(:defined) {
visibility: hidden;
}
Diğer bir yöntem ise JavaScript'teki customElements.whenDefined() yöntemini kullanmaktır. Bu yöntem, belirtilen bileşenin kaydı tamamlandığında çözülecek (resolve) bir promise döndürür. Bazı bileşenlerin özel bir nedenle yüklenememesi durumunu ele almak için Promise.allSettled() yöntemiyle birlikte kullanabilirsiniz.
Aşağıdaki örnek, önce opacity: 0 ile <body>'yi gizler, ardından bileşen kaydı tamamlandıktan sonra sayfanın yumuşak bir geçişle görünmesini sağlar. Ayrıca örnek, tüm promise'lerin tamamlanmasını beklemek için Promise.allSettled() kullanır, böylece bir bileşen yüklenemese bile sayfanın düzgün görüntülenmesini garanti eder:
<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'),
]);
// Artık button, card, checkbox bileşenleri kaydedildi, ready sınıfını ekleyerek sayfanın yumuşakça görünmesini sağlayın
document.body.classList.add('ready');
</script>