รู้จักกับ slot fallback ใน svelte3

#slot #webcomponents #svelte #slotfallback

บทที่แล้วเราได้ทำความรู้จักกับ 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/>