slot="name" ile Adlandırılmış Yuvalar
Adlandırılmış yuvaları kullanarak bir bileşende birden çok ekleme noktası tanımlayın.
slot="name" ile Adlandırılmış Yuvalar, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 2. 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.
Adlandırılmış Yuvalar Neden Kullanılır
Bileşenlerin çoğunda birden çok yerleştirme noktası gerekir; örneğin bir başlık, gövde ve alt bilgi.
Adlandırılmış Yuvaları Tanımlama
Alt bileşendeki yuva öğesine bir name özelliği ekleyin.
<!-- Layout.svelte -->
<header><slot name="header" /></header>
<main><slot /></main>
<footer><slot name="footer" /></footer>Adlandırılmış Yuvaları Doldurma
Üst bileşende öğeleri slot="name" özelliğiyle işaretleyin.
<Layout>
<h1 slot="header">Title</h1>
<p>Body</p>
<p slot="footer">Copyright</p>
</Layout>Varsayılan ve Adlandırılmış Yuvaları Birlikte Kullanma
Yuva özelliği olmayan içerik varsayılan yuvayı doldurur. Adlandırılmış içerik, kendi adlandırılmış yuvasına gider.
Sıra Bağımsızlığı
Üst bileşendeki sıra önemli değildir. Her yuva adına göre eşleştirilir.
Yuva Başına Birden Çok Öğe
Birden çok öğeyi, slot özelliğine sahip tek bir kapsayıcının içine sararak hepsini aynı yuvaya gönderebilirsiniz.
Koşullu Başlıklar
Adlandırılmış yuvaları isteğe bağlı olarak doldurmak için üst bileşende {#if} kullanın.
Yaygın Yerleşimler
Bu kalıp, başlık, kenar çubuğu, ana bölüm ve alt bilgiden oluşan yerleşimler için harikadır.
Form Bileşenleri
Form bileşenleri; ön ek, son ek, yardımcı metin ve benzeri içerikler için yuvalar tanımlayabilir.
Kendini Belgeleme
Yuva adları, bileşenin API'sini açıklar. title veya actions gibi açıklayıcı adlar seçin.
TypeScript Yardımcıları
TypeScript Svelte dosyalarında yuvalara tür vermek için özel bir $$Slots genel türünü kullanabilirsiniz.
Hızlı Denetim
Adlandırılmış bir yuvayı nasıl hedeflersiniz?
Özet
Alt bileşende birden çok <slot name="..."> tanımlayın ve üst bileşen öğelerinde slot="..." kullanarak bunları hedefleyin.
Sıkça Sorulan Sorular
“slot="name" ile Adlandırılmış Yuvalar” dersi ücretsiz mi?
Evet — “slot="name" ile Adlandırılmış Yuvalar” 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.
“slot="name" ile Adlandırılmış Yuvalar” dersinde ne öğreneceğim?
Adlandırılmış yuvaları kullanarak bir bileşende birden çok ekleme noktası tanımlayın. 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 2. dersidir.
“slot="name" ile Adlandırılmış Yuvalar” 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
- İçerik Yansıtma için Varsayılan Yuvalar
- slot="name" ile Adlandırılmış Yuvalar
- Yuva Geri Dönüş İçeriği
- $$slots ile Yuva İçeriğini Denetleme