DEV Community

Cover image for รู้จักกับ slot fallback ใน svelte3
thinny
thinny

Posted on • Updated on

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

บทที่แล้วเราได้ทำความรู้จักกับ slot ไปแล้ว บทนี้เรามาเรียนรู้ในการใช้ slot เพิ่มมากขึ้นไปอีกนิดนึงกัน

บทนี้จะอธิบายถึงว่า ถ้ามีการเรียกใช่้งาน slot element แล้วเราไมไ่ด้มี custom content ให้ slot แล้วให้ slot default content ให้ เราวามารถทำได้อย่างไรได้บ้าง

ตัวอย่างประกอบ

Alt Text

ถ้าเรามีใช้งาน slot แล้วมีการทำ custom content ให้ slot ก็จะแสดงผลปกติแต่ถ้า ไม่มีการ custom content ไปให้ slot ตัว slot เองจะมีการทำ default content หรือที่เราเรียกว่า. slot fallbacks ให้เราแบบนี้เลย

เตรียม component กันก่อนนะครับ

/** App.svelte */

<script>
    import Box from './Box.svelte';
</script>

Enter fullscreen mode Exit fullscreen mode
/** 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>
Enter fullscreen mode Exit fullscreen mode

ถ้าเรามีการทำ 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>
Enter fullscreen mode Exit fullscreen mode

Alt Text

ถ้าเราไม่ได้ pass custom content เข้าไปจะได้แบบนี้

/* App.svelte */
<script>
    import Box from './Box.svelte';
</script>

<Box />
Enter fullscreen mode Exit fullscreen mode

Alt Text

จะเห็นว่ามันได้กล่องปล่าวมาแบบนี้ ถ้าเราต้องการให้มีค่า defualt content ละแทนที่จะเป็นกล่องปล่าว ทำงี้ครับ

/* Box.svelte */

<div class="box">
  <slot>
    <em>no content was provided</em>
  </slot>
</div>
Enter fullscreen mode Exit fullscreen mode

ใน 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/>

Enter fullscreen mode Exit fullscreen mode

Alt Text

เพียงเท่านี้เราก็มี fallback content ใน slot เรียบร้อยแล้วครับ

ศึกษาเพิ่มเติมเรื่อง slot tag ได้ที่ slot tag

หากสนใจ svelte สามารถเรียนรู้การใช้งาน svelte แบบ step by step ได้ที่
Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก

ขอบคุณทุกท่านที่อ่านมาถึงตรงนี้ ถ้าอ่านแล้วรู้มีประโยชน์ ฝากกด Subscribe หรือ share link ให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ

Discussion (2)

Collapse
tanangular profile image
tanangular

/** Box.svelte */

<div class="box">
   <slot>
</div>
Enter fullscreen mode Exit fullscreen mode

ขอแก้ หน่อยนึงนะครับ
ถ้าจะเป็น HTML Self-Closing Tags ให้ใส่เป็น "<slot />"
หรือ "<slot></slot>"

ถ้า "<slot>" เฉยๆ มันจะไม่ ทำงานครับ

Collapse
sutin1234 profile image
thinny Author

แก้ให้แล้วนะครับ ขอบคุณครับ