İçerik Yansıtma için Varsayılan Yuvalar
İsteğe bağlı alt içeriği kabul etmek için bir bileşenin içine öğesi yerleştirin.
İçerik Yansıtma için Varsayılan Yuvalar, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 1. 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.
Yuvalar Nedir
Yuvalar, üst bileşenlerin işaretlemeyi alt bileşendeki belirli konumlara yerleştirmesini sağlar.
slot Öğesi
Alt bileşenin içinde, içeriğin görünmesi gereken yere bir <slot /> etiketi yerleştirin.
<!-- Card.svelte -->
<div class="card">
<slot />
</div>Üst Bileşenden Kullanma
Alt bileşenleri bileşen etiketinin içine sarın. Alt bileşenler yuvanın bulunduğu yerde görünür.
<Card>
<p>Hello inside the card!</p>
</Card>Bileşim Gücü
Bu kalıp, kartlar, kip pencereleri ve sayfalar gibi yeniden kullanılabilir yerleşim kabukları oluşturmanızı sağlar.
Birden Çok Alt Bileşen
Her sayıda öğe varsayılan yuvayı doldurabilir.
<Card>
<h1>Title</h1>
<p>Body</p>
</Card>Düz Dizeler
Yuva içeriği olarak düz metin de gönderebilirsiniz.
<Button>Click me</Button>Koşullu İçerik
Hangi içeriğin yuvaya yerleştirileceğini seçmek için üst bileşenin içinde {#if} kullanın.
Bileşen Yuvaları
Yuva içeriği, başka bileşenleri de serbestçe içerebilir.
<Card>
<Avatar />
<Username />
</Card>Stil Uygulama
Yuvaya yerleştirilen içerik, alt bileşenin değil, onu yazan üst bileşenin stillerini korur.
Yerleşim ve Mantık
Yuvalar bir yerleşim ve bileşim aracıdır; veri aktarma mekanizması değildir. Veriler için özellikleri kullanın.
Yuva Çıkışları
Bir bileşende birden çok yuva konumu bulunabilir (varsayılan ve adlandırılmış yuvalar).
Hızlı Denetim
Yuvaya yerleştirilen içerik nerede görünür?
Özet
İçerik yerleştirmek için alt bileşende <slot /> kullanın ve alt bileşenleri üst bileşen etiketlerinin arasına gönderin.
Sıkça Sorulan Sorular
“İçerik Yansıtma için Varsayılan Yuvalar” dersi ücretsiz mi?
Evet — “İçerik Yansıtma için Varsayılan 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.
“İçerik Yansıtma için Varsayılan Yuvalar” dersinde ne öğreneceğim?
İsteğe bağlı alt içeriği kabul etmek için bir bileşenin içine öğesi yerleştirin. 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 1. dersidir.
“İçerik Yansıtma için Varsayılan 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