svelte - 6. slot

slot으로 UI파트 재사용

• card.svelte

<style>
.contact-card {
        width: 300px;
        border: 1px solid #aaa;
        border-radius: 2px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        padding: 1em;
    }

    h2 {
        padding: 0 0 0.2em 0;
        margin: 0 0 1em 0;
        border-bottom: 1px solid #ff3e00
    }

    .address, .email {
        padding: 0 0 0 1.5em;
        background:  0 50% no-repeat;
        background-size: 1em 1em;
        margin: 0 0 0.5em 0;
        line-height: 1.2;
    }

    .address { background-image: url(tutorial/icons/map-marker.svg) }
    .email   { background-image: url(tutorial/icons/email.svg) }
    .missing { color: #999 }

    .hovering { background-color: #006699;}
</style>

<script>
    let hovering = false;
    const enter = () => hovering = true;
    const leave = () => hovering = false;
</script>

<article class="contact-card" class:hovering on:mouseenter={enter} on:mouseleave={leave}>   
    <h2>
        <slot name="name">
            <span class="missing">이름을 입력하세요!</span>
        </slot>
    </h2>

    <div class="address">
        <slot name="address">
            <span class="missing">주소를 입력하세요</span>
        </slot>
    </div>

    {#if $$slots.email}     
        <div class="email">
            <hr/>
            <slot name="email">                
            </slot>
        </div>
    {/if}
</article>

• App.svelte

<script>
  import Card from './card.svelte';

</script>

<Card>
  <span slot="name">wclee </span>
  <span slot="address">369길 49</span>
</Card>
<br/>

<Card>
  <span slot="name">pucca </span>
  <span slot="address">서울시</span>
  <span slot="email">pucca@gmail.com</span>
</Card>