mirror of https://github.com/sveltejs/svelte
docs: add conditional slot example (#5383)
parent
ddd79e3f9d
commit
daec25604f
@ -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>
|
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Conditional Slots"
|
||||||
|
}
|
Loading…
Reference in new issue