Context ile Birleşik Bileşenler
Context aracılığıyla durumu paylaşan çok parçalı bileşenler oluşturun.
Context ile Birleşik Bileşenler, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.
Bileşik bileşenler
Bileşik bileşen, koordineli çalışan birkaç alt bileşene ayrılmış tek bir mantıksal kullanıcı arayüzüdür (Sekmeler + Sekme + TabPanel).
Bağlam üzerinden paylaşılan durum
Üst bileşen, paylaşılan durumu bağlama yerleştirir; alt bileşenler bu durumu getContext aracılığıyla okur.
<!-- Tabs.svelte -->
setContext("tabs", { active, setActive });Alt bileşen bağlamı okur
Her Sekme ve TabPanel, paylaşılan API'yi alır.
<!-- Tab.svelte -->
const { active, setActive } = getContext("tabs");Gevşek bağlılık
Alt bileşenler üst bileşene doğrudan başvurmaz; bağlam üzerinden iletişim kurar.
Birleştirilebilir API
Kullanan taraflar alt bileşenleri özgürce yeniden düzenleyebilir ve özelleştirebilir.
<Tabs>
<TabList>
<Tab id="a">A</Tab>
<Tab id="b">B</Tab>
</TabList>
<TabPanel id="a">Content A</TabPanel>
<TabPanel id="b">Content B</TabPanel>
</Tabs>Örnekler
Sekmeler, akordeon, menü, liste kutusu, adımlar.
Adlandırma kuralı
Açıklık için ortak bir ön ek veya ad alanı dışa aktarımları kullanın.
import { Tabs, Tab, TabList, TabPanel } from "$lib/Tabs";Tür güvenli bağlam
Paylaşılan API için bir sembol anahtarı ve tür tanımlayın.
Yanlış kullanımda hatalar
Bir alt bileşen bağlamı bulamazsa kullanan taraflara yol göstermek için anlaşılır bir hata fırlatın.
Yeniden kullanılabilirlik
Bileşik bileşenler, kullanan tarafların bileşimi kontrol edebilmesi sayesinde son derece yeniden kullanılabilirdir.
Oluşturucularla birleştirme
Bileşik bileşenler, stilsiz erişilebilirlik sağlamak için dahili olarak çoğu zaman oluşturucu kalıbını kullanır.
Hızlı kontrol
Bileşik bileşenler durumu nasıl paylaşır?
Özet
Bileşik bileşenler, bağlam üzerinden koordineli çalışan ve birleştirilebilen alt bileşenlere ayrılmış bir kullanıcı arayüzü oluşturur.
Sıkça Sorulan Sorular
“Context ile Birleşik Bileşenler” dersi ücretsiz mi?
Evet — “Context ile Birleşik Bileşenler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.
“Context ile Birleşik Bileşenler” dersinde ne öğreneceğim?
Context aracılığıyla durumu paylaşan çok parçalı bileşenler oluşturun. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Context ile Birleşik Bileşenler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Snippet'lerle İşleme Özellikleri
- Üst Düzey Bileşenler
- Başsız Kullanıcı Arayüzü için Builder Deseni
- Context ile Birleşik Bileşenler