Veriler
Bölüm ve bileşenlere veri bağlama ve güncelleme işlemleri.
Tema geliştirirken statik içerik nadiren yeterlidir. Ürünler, kategoriler, menü bağlantıları, sepet gibi dinamik bilgiler bölüm ve bileşenlere veri olarak bağlanır ve içerik buna göre şekillenir.
ikas Studio bu veri akışını üç ana mekanizma ile kurar: bölüm ve bileşenlere veri eklemek, elementlere veri bağlamak ve global tema ayarlarından beslenmek. Bu sayfa her bir mekanizmayı genel hatlarıyla açıklar; uygulama adımlarını Temel Örnekler üzerinden pratik olarak inceleyebilirsiniz.
Tasarım modu gereklidir
Veri oluşturmak için Tasarım modunda olmanız gerekmektedir.
Veri ekleme
Bir bölüm veya bileşenin dışarıdan hangi veriyi beklediğini tanımlamak için kullanılır. Bölüm veya bileşen detayındayken herhangi bir element'i seçtiğinizde sağ panelin en üstünde yer alan Veri Ekle butonuna tıklayarak hangi tipte veri tanımlayacağınızı seçebilirsiniz.
Açılan modalda aşağıdaki alanları düzenleyebilirsiniz:
- Görünen İsim
- Değişken Adı
- Açıklama
- Varsayılan
- Grup
Tanımladığınız veri, İçerik modunda son kullanıcı tarafından yapılandırılabilir hale gelir. Varsayılan değer belirlediğinizde, bölüm veya bileşen her yeni kullanıldığında bu değerle birlikte gelir.
Geliştiriciler için
Bölüme veya bileşene veri eklemek, React'te bir component'e prop tanımlamaya benzer. Yapı dışarıdan hangi veriyi alacağını bildirir ve bu veri kullanıldığı yerde yapılandırılır.
Bir bölüm, kendi prop'larını tanımlayan ve sayfaya mount edilen bir React component'ine karşılık gelir:
interface SectionProps {
data: Data;
}Bir bileşen ise bölümler veya diğer bileşenler içinde kullanılan ve ebeveyninden prop alan bir React component'ine karşılık gelir:
interface ComponentProps {
data: Data;
}Veri tipleri
Veri ekle modalından aşağıdaki veri tiplerini seçebilirsiniz:
- Yazı —
Text - Zengin Yazı —
Rich Text - Renk —
Color - Yazı Stili —
Font Style - Sayı —
Number - Sayı Aralığı —
Number Range - Görsel —
Image - Görsel Listesi —
Image List - Video —
Video - Mantıksal/Anahtar —
Boolean/Switch - Ürün —
Product - Ürün Listesi —
Product List - Ürün Özelliği —
Product Attribute - Ürün Özelliği Listesi —
Product Attribute List - Bağlantı —
Link - Bağlantı Listesi —
Link List - Kategori —
Category - Kategori Listesi —
Category List - Marka —
Brand - Marka Listesi —
Brand List - Blog —
Blog - Blog Listesi —
Blog List - Blog Kategorisi —
Blog Category - Blog Kategorisi Listesi —
Blog Category List - Bileşen —
Component - Bileşen Listesi —
Component List - Enum —
Enum
Stil veri tipi
Stil — Style veri tipi, Veri Ekle modalında görünmez; yanında + ikonu bulunan stil alanlarından eklenir.
İlgili stilin yanındaki + ikonuna tıkladığınızda o stil, bileşene veya bölüme özel bir veri olarak tanımlanır. Kullanıcı bu veriyi İçerik modunda kullanırken, stilin alabileceği değerleri içeren bir seçim listesi ile bu veriyi hangi stil özelliğine bağlayacağını belirleyebilir.
Ek olarak Kenar ve Shadow stil değerleri için tema ayarlarından global stil verisi tanımlanabilir. Detay için Tema Ayarları sayfasını inceleyebilirsiniz.
Fonksiyon veri tipi
Fonksiyon — Function veri tipi, yalnızca Blueprint modunda eklenebilir; Tasarım modundaki Veri Ekle modalından seçilemez.
Veri bağlama
Tanımladığınız verinin elementler tarafından kullanılabilir hale gelmesi için elementlere bağlanması gerekir. Bir element'e sağ tıklayarak Veri Bağla seçeneğinden bölüm veya bileşen verisine, tema ayarlarına ya da ikas tarafından sağlanan hazır veri kaynaklarına bağlanabilirsiniz.
Veri bağlama iki tipik hedefe yapılır:
- İçerik alanı — yazı element'inin metni, görsel element'inin kaynağı gibi doğrudan içeriği belirleyen alanlar.
- Element özellikleri —
href, stil değerleri, görünürlük koşulu gibi HTML veya ikas özellik alanları.
Koşullar
Bir alana doğrudan değer bağlamak yerine, bir koşula göre farklı değerler atamak mümkündür. Koşullar hakkında daha detaylı bilgi için Koşullar sayfasını inceleyebilirsiniz.
Element özellikleri
Her elementin desteklediği özellikler farklıdır. Element özellikleri hakkında daha detaylı bilgi için Özellik sayfasını inceleyebilirsiniz.
Liste verileri
Liste tipinde bir veri (ör. Product List, Link List, Image List) bir çerçeveye bağlandığında çerçeve liste görünümüne dönüşür ve içindeki yapı liste boyunca tekrar eder.
Listeler
Liste verileri hakkında daha detaylı bilgi için Listeler sayfasını inceleyebilirsiniz.
Tema ayarları
Birden fazla bölüm veya bileşende tekrar eden değerler (logo, marka rengi, tipografi vb.) tema ayarları olarak tanımlanıp tek bir yerden yönetilebilir. Tema ayarları da bir veri kaynağıdır ve Veri Bağla akışı ile aynı şekilde elementlere bağlanır.
Bir değeri tema ayarı olarak tanımladığınızda, o değeri kullanan tüm bölüm ve bileşenlerde tek bir noktadan güncellenebilir hale gelir.
Tema ayarları
Tema ayarları hakkında daha detaylı bilgi için Tema Ayarları sayfasını inceleyebilirsiniz.