บทที่แล้วเราได้ทำความรู้จักกับ slot ไปแล้ว บทนี้เรามาเรียนรู้ในการใช้ slot เพิ่มมากขึ้นไปอีกนิดนึงกัน
บทนี้จะอธิบายถึงว่า ถ้ามีการเรียกใช่้งาน slot element แล้วเราไมไ่ด้มี custom content ให้ slot แล้วให้ slot default content ให้ เราวามารถทำได้อย่างไรได้บ้าง
ตัวอย่างประกอบ
ถ้าเรามีใช้งาน slot แล้วมีการทำ custom content ให้ slot ก็จะแสดงผลปกติแต่ถ้า ไม่มีการ custom content ไปให้ slot ตัว slot เองจะมีการทำ default content หรือที่เราเรียกว่า. slot fallbacks ให้เราแบบนี้เลย
เตรียม component กันก่อนนะครับ
/** App.svelte */
<script>
import Box from './Box.svelte';
</script>
/** Box.svelte */
<style>
.box {
width: 300px;
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
padding: 1em;
margin: 0 0 1em 0;
}
</style>
<div class="box">
<slot />
</div>
ถ้าเรามีการทำ custom content ให้ slot ก็ได้แบบนี้
/* App.svelte */
<script>
import Box from './Box.svelte';
</script>
<Box>
<h2>Hello!</h2>
<p>This is a box. It can contain anything.</p>
</Box>
ถ้าเราไม่ได้ pass custom content เข้าไปจะได้แบบนี้
/* App.svelte */
<script>
import Box from './Box.svelte';
</script>
<Box />
จะเห็นว่ามันได้กล่องปล่าวมาแบบนี้ ถ้าเราต้องการให้มีค่า defualt content ละแทนที่จะเป็นกล่องปล่าว ทำงี้ครับ
/* Box.svelte */
<div class="box">
<slot>
<em>no content was provided</em>
</slot>
</div>
ใน slot element เราสามารถใส่ content ลงไปได้เพื่อให้เป็น default content เพียงเท่านี้เราจะก็มี content fallback มาแล้วครับ ดีกว่าเป็นกล่องปล่าวๆ
/* App.svelte */
<script>
import Box from './Box.svelte';
</script>
<Box>
<h2>Hello!</h2>
<p>This is a box. It can contain anything.</p>
</Box>
<Box/>
เพียงเท่านี้เราก็มี fallback content ใน slot เรียบร้อยแล้วครับ
ศึกษาเพิ่มเติมเรื่อง slot tag ได้ที่ slot tag
หากสนใจ svelte สามารถเรียนรู้การใช้งาน svelte แบบ step by step ได้ที่
Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก
ขอบคุณทุกท่านที่อ่านมาถึงตรงนี้ ถ้าอ่านแล้วรู้มีประโยชน์ ฝากกด Subscribe หรือ share link ให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ
Top comments (2)
/** Box.svelte */
ขอแก้ หน่อยนึงนะครับ
ถ้าจะเป็น HTML Self-Closing Tags ให้ใส่เป็น "<slot />"
หรือ "<slot></slot>"
ถ้า "<slot>" เฉยๆ มันจะไม่ ทำงานครับ
แก้ให้แล้วนะครับ ขอบคุณครับ