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