docs: add conditional slot example (#5383)

pull/5704/head
Kevin Åberg Kultalahti 4 years ago committed by GitHub
parent ddd79e3f9d
commit daec25604f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -0,0 +1,13 @@
<script>
import Profile from "./Profile.svelte";
</script>
<Profile>
<span slot="name">Bob</span>
<span slot="email">bob@email.com</span>
</Profile>
<Profile>
<span slot="name">Alice</span>
<span slot="phone">12345678</span>
</Profile>

@ -0,0 +1,24 @@
<style>
section {
width: 200px;
display: grid;
grid-template-columns: 1fr 1fr;
padding: 16px;
box-shadow: 2px 2px 4px #dedede;
border: 1px solid #888;
margin-bottom: 16px;
}
</style>
<section>
<div>Name</div>
<slot name="name" />
{#if $$slots.email}
<div>Email</div>
<slot name="email" />
{/if}
{#if $$slots.phone}
<div>Phone</div>
<slot name="phone" />
{/if}
</section>
Loading…
Cancel
Save