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