Skip to content

Commit daec256

Browse files
authored
docs: add conditional slot example (#5383)
1 parent ddd79e3 commit daec256

File tree

6 files changed

+40
-0
lines changed

6 files changed

+40
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script>
2+
import Profile from "./Profile.svelte";
3+
</script>
4+
5+
<Profile>
6+
<span slot="name">Bob</span>
7+
<span slot="email">[email protected]</span>
8+
</Profile>
9+
10+
<Profile>
11+
<span slot="name">Alice</span>
12+
<span slot="phone">12345678</span>
13+
</Profile>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<style>
2+
section {
3+
width: 200px;
4+
display: grid;
5+
grid-template-columns: 1fr 1fr;
6+
padding: 16px;
7+
box-shadow: 2px 2px 4px #dedede;
8+
border: 1px solid #888;
9+
margin-bottom: 16px;
10+
}
11+
</style>
12+
13+
<section>
14+
<div>Name</div>
15+
<slot name="name" />
16+
{#if $$slots.email}
17+
<div>Email</div>
18+
<slot name="email" />
19+
{/if}
20+
{#if $$slots.phone}
21+
<div>Phone</div>
22+
<slot name="phone" />
23+
{/if}
24+
</section>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"title": "Conditional Slots"
3+
}

0 commit comments

Comments
 (0)