HTML
Şablon ve slot
<template> ve <slot> ile yeniden kullanılabilir parça yazarsın.
<template> ile iskelet tanımla
<template> etiketi sayfada görünmeyen bir HTML iskeleti tutar. İçine yazdığımız etiketler render edilmez; biz bunu JavaScript ile kopyalayıp sayfaya yerleştiririz.
Bu sayede aynı widget iskeletini bir kere yazıp birçok kez kullanabiliriz. Örneğin satış panelinde her bölge için ayrı widget yazmak yerine tek bir <template> tanımlarız.
Template içine normal HTML yazarız; <article>, <header> gibi etiketler yer alabilir.
<slot> ile içerik yuvası
<slot>, template içindeki bir yer tutucudur. Kopyalama sırasında dışarıdan içerik buraya enjekte edilir.
Slot'a name özniteliği veririz; örneğin <slot name="content">. Eğer dışarıdan içerik gelmezse, slot'un içine yazdığımız fallback gösterilir.
Örnek: <slot name="content"><p>Veri bekleniyor</p></slot> — içerik gelene kadar 'Veri bekleniyor' yazar.
Uygulama Body'ye template ve slot ekle
Önceki dersin widget'ını al. </section>'dan sonra, </body>'den önce bir <template> ekle.
Template'e id="widget-template" özniteliği ver. İçine bir <article> koy; onun içine <header> ve <h2> (içeriği Yeni Satış Paneli) ekle. Header'dan sonra <slot name="content"> ekle ve içine fallback olarak <p>Veri bekleniyor</p> koy.
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Satış Paneli</title>
</head>
<body>
<section>
<header>
<h1>Satış Paneli</h1>
</header>
<main>
<article>
<figure>
<figcaption>Aylık ciro</figcaption>
<p>₺124.500</p>
</figure>
<table>
<thead>
<tr>
<th>Ürün</th>
<th>Satış</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pamuklu tişört</td>
<td>320</td>
</tr>
<tr>
<td>Keten pantolon</td>
<td>184</td>
</tr>
</tbody>
</table>
</article>
</main>
</section>
<template id="widget-template">
<article>
<header>
<h2>Yeni Satış Paneli</h2>
</header>
<slot name="content">
<p>Veri bekleniyor</p>
</slot>
</article>
</template>
</body>
</html>
Kendini test et
-
<template> etiketinin temel özelliği nedir?
- İçeriği anında ekrana basar
- İçeriği sayfa yüklendiğinde gizler
- Yalnızca CSS stilleri tanımlar
- İçeriği bir kere yazılır, sonra kopyalanır; doğrudan render edilmez
Cevabı göster
İçeriği bir kere yazılır, sonra kopyalanır; doğrudan render edilmez — Doğru! template içeriği render edilmez; kopyalanıp sayfaya yerleştirilir.
-
Slot adını tamamla
<slot name="____">
<p>Veri bekleniyor</p>
</slot>
Cevabı göster
<slot name="content">
<p>Veri bekleniyor</p>
</slot>
-
Şablon kavramlarını eşleştir
- template
- Yeniden kullanılabilir iskelet
- slot
- İçerik yuvası
- fallback
- Yuva boşsa gösterilen içerik
- article
- Bağımsız içerik birimi
Sıradaki ders: Proje sonu - Widget
