Slot element

<slot> ile esnek içerik yerleştirme noktaları oluşturursun.

Slot elementi nedir?

<slot>, bir bileşenin içine dışarıdan içerik yerleştirilecek yeri işaretler. Düşünce şöyle: buraya çağıran kişi ne isterse koyar. Böylece aynı iskelet farklı içeriklerle çalışır.

Slot, web bileşenlerinin ve şablonların esnekliğini sağlar. Bir kart iskeleti yazıp başlık kısmını slot yaparsan; her çağıran kendi başlığını koyar. Slot boşsa yedek içerik gösterilir.

slot name ile adlandırma

Bir şablonda birden çok <slot> koyabilirsin. Hangi içeriğin hangi slota gideceğini name özniteliği ile ayırırsın: <slot name="başlık">.

İsimsiz slota varsayılan slot denir ve kalan tüm içerik buraya dolar. İsimli slot ise yalnızca aynı isme sahip içerik parçasını kabul eder. Böylece başlık, görsel ve alt bilgi farklı yerlere oturur.

slot'a yedek içerik koymak

Slot'un içine yazdığın her şey, çağıran içerik gelmezse yedek olarak gösterilir. Örneğin <slot>Henüz yorum yok</slot> yazarsan, içerik yoksa bu metni görürsün.

Yedek içerik, tasarımı bozulmadan anlamlı bir çıktı sağlar. Bir liste boşsa yorum yapılmamış diyebilir, bir görsel yüklenmezse varsayılan bir ikon gösterebilirsin. Bu, boş bileşenlerin garip görünmesini engeller.

Uygulama slot içeren template yaz

Body içine bir <template> ekle. İçinde bir <h2> (metin: Kart Başlığı) ve bir <slot> olsun. Slot boşsa İçerik yok yedek metnini göstersin.

Örnek çözümü göster

<body>
  <template>
    <h2>Kart Başlığı</h2>
    <slot>İçerik yok</slot>
  </template>
</body>

Kendini test et

slot etiketinin en önemli özelliği nedir?
- İçeriği otomatik olarak kopyalar.
- Dışarıdan içerik yerleştirilecek yeri işaretler.
- Yalnızca metin kabul eder, etiket almaz.
- Sayfaya yüklenince gizlenir.
Cevabı göster

Dışarıdan içerik yerleştirilecek yeri işaretler. — Doğru. slot, çağıran kişinin içeriğini yerleştireceği yeri işaretler.

slot etiketini yaz

<template>
  <h2>Kart</h2>
  ____
</template>

Cevabı göster

<template>
  <h2>Kart</h2>
  <slot></slot>
</template>

slot terimlerini eşleştir

slot

içerik yerleştirme yeri
name

slota verilen isim
varsayılan slot

isimsiz slot
yedek içerik

slot boşken görünür

Sıradaki ders: Custom element isimleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler