• 0

AlpineJS Bileşenlerini x-cloak ile gizleme

5 ay önce , Okuma süresi 1 dakika.

AlpineJS Bileşenlerini x-cloak ile gizleme
Bir javascript framework kullanırken, büyük olasılıkla öğeleri tamamen işlenene kadar gizlemenin bir yoluna ihtiyacınız olacaktır.

JS developer arkadaşlar herhangi bir framework kullanırken  bazı öğeleri işnene kadar gizlemek isteyebilirler. 

AlpineJS ile x-cloaköğeleri gizlemek için attribute kullanabiliriz. Örnek vermek gerekirse Harry Potter'ın görünmezlik pelerini gibi çalışıyor. :)

Bir Alpine bileşeninin oluşturulması bittiğinde, elemanın bir özniteliğine sahip olup olmadığını x-cloak kontrol edecek ve eğer öyleyse, bu attribute kaldırılacaktır.

Bu özelliği kullanmak için aşağıdaki CSS kodunu web sitemize veya uygulamamıza ekleyebiliriz:

<style>
    [x-cloak] { display: none; }
</style>

Şimdi, tek yapmamız gereken x-cloak özelliği herhangi bir öğeye eklemek :

<div x-data="{ open: true }">
    <div x-show="open" x-cloak>
        Component Loaded!
    </div>
</div>

Ve bu öğe, bileşen yüklenene kadar gösterilmeyecektir.

İşte şu olmadan hızlı bir Codepen örneği :  ( çalışırken görmek için sağ alttaki Yeniden Çalıştır'ı tıklamanız gerekebilir)

Yukarıdaki örnekte, gizlemek istediğimiz öğe, bileşen yüklenmeden önce hala görülebilir. 

Şimdi deyim yerindeyse Harry Potter'in pelerinin çağıralım, işte aynı örneği kullanarak x-cloak:

Yüklenene kadar bir Alpine bileşeni bu şekilde gizlenir.

Bu harika javascript kitaplığıyla yapabileceğiniz tüm harika şeyler hakkında daha fazla bilgi edinmek için Alpine deposuna gittiğinizden emin olun.

#javascript