$$slots ile Yuva İçeriğini Denetleme
Bir yuvanın kullanıldığı durumlarda sarmalayıcı işaretlemeyi koşullu olarak oluşturmak için $$slots'u inceleyin.
$$slots ile Yuva İçeriğini Denetleme, 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.
Yuvaları Neden Denetlemeli
Bazen yalnızca yuvada içerik varsa kapsayıcı işaretlemeyi (kenarlık, başlık) oluşturmak istersiniz.
slots Nesnesi
Bir bileşenin içinde $$slots, doldurulan her yuva için bir özelliğe sahip bir nesnedir.
Doldurulduğunda Doğru Değerli
Bir yuvada içerik varsa $$slots içindeki anahtarı doğru değerli olur.
{#if $$slots.title}<h2><slot name="title" /></h2>{/if}Boş Kapsayıcılardan Kaçının
DOM'u temiz tutmak için yuva boş olduğunda kapsayıcı işaretlemeyi oluşturmayı atlayın.
Varsayılanlarla Birleştirme
Yedek içerik ile kapsayıcıyı tamamen atlama arasında seçim yapabilirsiniz.
Tepkisel Algılama
Yuva içeriği oluşturma işlemleri arasında değişirse $$slots tepkisel olarak güncellenir.
Birden Çok Yuvayla Kullanma
Her adlandırılmış yuvayı bağımsız olarak denetleyin.
{#if $$slots.header || $$slots.footer}...Kartlarda Yaygındır
İsteğe bağlı başlığı veya alt bilgisi olan kartlarda bu kalıp sıkça kullanılır.
Varsayılan Yuva Anahtarı
Varsayılan yuva $$slots.default altında görünür.
{#if $$slots.default}<div class="body"><slot /></div>{/if}TypeScript
TypeScript kullanıcıları, $$slots için otomatik tamamlamadan yararlanmak üzere bir $$Slots türü tanımlayabilir.
Ödünleşimler
İşaretlemenize dallanma ekler ancak daha temiz bir çıktı üretir. Tasarım sistemleri için buna değer.
Hızlı Denetim
$$slots.header neyi denetler?
Özet
Üst bileşenin bir yuvayı doldurup doldurmadığını algılamak için $$slots.name kullanın; doldurmadıysa kapsayıcı işaretlemeyi atlayın.
Sıkça Sorulan Sorular
“$$slots ile Yuva İçeriğini Denetleme” dersi ücretsiz mi?
Evet — “$$slots ile Yuva İçeriğini Denetleme” 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.
“$$slots ile Yuva İçeriğini Denetleme” dersinde ne öğreneceğim?
Bir yuvanın kullanıldığı durumlarda sarmalayıcı işaretlemeyi koşullu olarak oluşturmak için $$slots'u inceleyin. 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.
“$$slots ile Yuva İçeriğini Denetleme” 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