Bileşenler
Bileşen yapısı ve yönetimi.
Bileşen, bir kez oluşturulan ve birden fazla bölümde ya da başka bileşenlerde yeniden kullanılabilen bağımsız bir yapı taşıdır. Dışarıdan veri alır ve her kullanıldığı yerde aldığı veriyle çalışır.
Tasarım modu gereklidir
Bileşen oluşturmak için Tasarım modunda olmanız gerekmektedir.
Bileşen oluşturma
Elementler kısmından bir Çerçeve (veya Yazı) element'i ekleyin. Element'e sağ tıklayarak Bileşen Oluştur seçeneğine tıklayın. Açılan modalda bileşeninizin ikonunu ve adını girerek Kaydet'e basın.
Bileşen oluşturulduktan sonra detay ekranına otomatik olarak yönlendirilirsiniz. Sayfaya geri dönmek için sol panelin üstünde bulunan Geri Dön butonunu kullanabilir, tekrar detaya girmek için Katmanlar kısmındaki bileşene çift tıklayabilir veya Kaydedilmiş Şablonlar kısmından ilgili bileşene tıklayabilirsiniz.
Sayfa seviyesinde bileşen
Sayfalar bölümlerden oluşur. Hızlı düzenleme için sayfa seviyesine doğrudan bileşen eklemek mümkün olsa da bu bileşenler canlıda render olmaz. Bileşenleri mutlaka bir bölüm veya başka bir bileşen içinde kullanın.
Bileşene veri ekleme ve bağlama
Bir bileşen, dışarıdan alacağı veriyi Veri Ekle modalı ile tanımlar. Bileşeni kullandığınız yerde bu veri alanına bir değer bağlarsınız. Bu yaklaşım, aynı bileşenin farklı verilerle farklı yerlerde kullanılmasını sağlar.
Veriler
Veri ekleme ve bağlama akışı hakkında daha detaylı bilgi için Veriler sayfasını inceleyebilirsiniz.
Bileşeni bölüme ekleme
Bir bölüm detayındayken Elementler panelindeki Şablonlar sekmesinden veya bölüm altındaki Bileşen Ekle butonundan bileşeninizi seçerek ekleyebilirsiniz. Bileşeni ekledikten sonra bileşenin beklediği veri alanlarına bölümden gelen ilgili verileri Veri Bağla ile geçirin.
Bileşene veri bağlama önerisi
Bileşenin beklediği veriye her zaman bölümden veya ebeveyn bileşenden gelen veriyi doğrudan bağlamak daha güvenilirdir. Bazı özel durumlarda Sayfanın ürününü kullan gibi otomatik bağlamalar da mümkündür; ancak bölümden doğrudan bağlama, bileşenin nerede kullanıldığından bağımsız çalışmasını sağlar.
Listelerle bileşen kullanımı
Bir liste item seviyesine bileşen eklenerek, listenin her iterasyonunda item verisi bileşene otomatik olarak geçirilebilir. Örneğin ürün listesi item'ında productListItem değeri, ürün kartı bileşeninin product verisine bağlanarak her iterasyonda doğru ürünü göstermesi sağlanır.
Listeler
Listeler ve item detayında bileşen kullanımı hakkında daha detaylı bilgi için Listeler sayfasını inceleyebilirsiniz.
Bileşen içinde bileşen
Bileşenler kendi içlerinde başka bileşenleri barındırabilir. Örneğin ürün detay bölümündeki bir satın alma butonları bileşeni, içinde sepete ekle ve hızlı öde butonu bileşenlerini tutabilir. Her bileşen kendi verisini tanımlar; üst bileşen, alt bileşenlere kendi verisinden değerler geçirebilir.
Varyantlar
Bölümler farklı ekran boyutlarına kırılma noktalarıyla uyum sağlarken, bileşenler varyantlar ile farklı görünümler sunar. Her bileşen oluşturulduğu anda bir varsayılan varyant ile gelir ve istediğiniz kadar yeni varyant ekleyebilirsiniz.
Her varyanta ayrı stiller ve aşağıdaki durumlar (state) uygulanabilir:
- Üzerine gel —
:hover - Aktif —
:active
Bu durumlar, ilgili varyant aktif olduğunda geçerli olacak stillerin ayrı ayrı tanımlanmasını sağlar.
Varsayılan varyantta veya eklediğiniz bir varyantta yaptığınız stil değişiklikleri, o varyantın Üzerine gel ve Aktif durumlarına da otomatik olarak aktarılır. Bu durumlar üzerinde yaptığınız güncellemeler ise yalnızca ilgili duruma özel olarak geçerli olur.
Varyantlar bileşenlere özgüdür
Varyantlar yalnızca bileşenlerde kullanılır; bölümlerde karşılığı kırılma noktalarıdır. Element seviyesindeki :hover, :active, :focus gibi pseudo-selector animasyonları hakkında daha detaylı bilgi için Animasyonlar sayfasını inceleyebilirsiniz.
Kırılma noktalarına uyum
Bileşenlerde bölümlerdeki gibi kırılma noktasına özel bir tasarım ekranı bulunmaz. Bunun yerine kırılma noktası, elementlere koşul olarak bağlanır ve bu sayede farklı ekran boyutlarında farklı stiller veya görünürlük değerleri uygulanır.
Koşullar
Kırılma noktasını koşul olarak kullanma hakkında daha detaylı bilgi için Koşullar sayfasını inceleyebilirsiniz.
Temel örnekler
Temel örneklerde bileşen oluşturmanın akışlarını adım adım inceleyebilirsiniz: