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.
