Skip to content

update slot tutorial content to snippets #404

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

update slot tutorial content to snippets #404

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 ...01-slots/+assets/app-a/src/lib/App.svelte → ...snippets/+assets/app-a/src/lib/App.svelte
View file
Open in desktop
File renamed without changes.
0 ...1-slots/+assets/app-a/src/lib/Card.svelte → ...nippets/+assets/app-a/src/lib/Card.svelte
View file
Open in desktop
File renamed without changes.
0 .../01-slots/+assets/app-a/src/lib/paper.svg → ...-snippets/+assets/app-a/src/lib/paper.svg
View file
Open in desktop
File renamed without changes
0 ...n/01-slots/+assets/app-a/src/lib/wood.svg → ...1-snippets/+assets/app-a/src/lib/wood.svg
View file
Open in desktop
File renamed without changes
0 ...01-slots/+assets/app-b/src/lib/App.svelte → ...snippets/+assets/app-b/src/lib/App.svelte
View file
Open in desktop
File renamed without changes.
6 changes: 5 additions & 1 deletion ...1-slots/+assets/app-b/src/lib/Card.svelte → ...nippets/+assets/app-b/src/lib/Card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<script>
const { children } = $props();
</script>

<div class="card">
<slot />
{@render children()}
</div>

<style>
Expand Down
9 changes: 6 additions & 3 deletions ...d-svelte/07-composition/01-slots/index.md → ...velte/07-composition/01-snippets/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Slots
title: Snippets
---

Just like elements can have children...
Expand All @@ -11,12 +11,15 @@ Just like elements can have children...
</div>
```

...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `<slot>` element. Put this inside `Card.svelte`:
...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `children` prop and the render tag `{@render children()}` – which is a bit like a function call. Put this inside `Card.svelte`:

```svelte
/// file: Card.svelte
+++<script>+++
+++ const { children } = $props();+++
+++</script>+++
<div class="card">
+++<slot></slot>+++
+++{@render children()}+++
</div>
```

Expand Down
28 changes: 0 additions & 28 deletions ...utorial/02-advanced-svelte/07-composition/02-named-slots/+assets/app-a/src/lib/App.svelte
View file
Open in desktop

This file was deleted.

34 changes: 34 additions & 0 deletions ...rial/02-advanced-svelte/07-composition/02-named-snippets/+assets/app-a/src/lib/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<script>
import Card from './Card.svelte';
</script>

<main>
<Card>
<span>Patrick BATEMAN</span>
<span>Vice President</span>

{#snippet telephone()}
<span>212 555 6342</span>
{/snippet}

{#snippet company()}
<span>
Pierce &amp; Pierce
<small>Mergers and Aquisitions</small>
</span>
{/snippet}

{#snippet address()}
<span>358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534</span>
{/snippet}
</Card>
</main>

<style>
main {
display: grid;
place-items: center;
height: 100%;
background: url(./wood.svg);
}
</style>
6 changes: 5 additions & 1 deletion ...d-slots/+assets/app-a/src/lib/Card.svelte → ...nippets/+assets/app-a/src/lib/Card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<script>
const { children } = $props();
</script>

<div class="card">
<slot />
{@render children()}
</div>

<style>
Expand Down
0 ...med-slots/+assets/app-a/src/lib/paper.svg → ...-snippets/+assets/app-a/src/lib/paper.svg
View file
Open in desktop
File renamed without changes
0 ...amed-slots/+assets/app-a/src/lib/wood.svg → ...d-snippets/+assets/app-a/src/lib/wood.svg
View file
Open in desktop
File renamed without changes
22 changes: 14 additions & 8 deletions ...ed-slots/+assets/app-b/src/lib/App.svelte → ...snippets/+assets/app-b/src/lib/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,20 @@
<span>Patrick BATEMAN</span>
<span>Vice President</span>

<span slot="telephone">212 555 6342</span>
{#snippet telephone()}
<span>212 555 6342</span>
{/snippet}

<span slot="company">
Pierce &amp; Pierce
<small>Mergers and Aquisitions</small>
</span>

<span slot="address">358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534</span>
{#snippet company()}
<span>
Pierce &amp; Pierce
<small>Mergers and Aquisitions</small>
</span>
{/snippet}

{#snippet address()}
<span>358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534</span>
{/snippet}
</Card>
</main>

Expand All @@ -31,4 +37,4 @@
font-size: 0.6em;
text-align: right;
}
</style>
</style>
14 changes: 9 additions & 5 deletions ...d-slots/+assets/app-b/src/lib/Card.svelte → ...nippets/+assets/app-b/src/lib/Card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
<script>
const { children, address, company, telephone } = $props();
</script>

<div class="card">
<header>
<slot name="telephone" />
<slot name="company" />
{@render telephone()}
{@render company()}
</header>

<slot />
{@render children()}

<footer>
<slot name="address" />
{@render address()}
</footer>
</div>

Expand Down
18 changes: 11 additions & 7 deletions ...te/07-composition/02-named-slots/index.md → ...07-composition/02-named-snippets/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
---
title: Named slots
title: Named snippets
---

The previous example contained a _default slot_, which renders the direct children of a component. Sometimes you will need more control over placement. In those cases, we can use _named slots_.
The previous example contained a _default snippet_, which renders the direct children of a component. Sometimes you will need more control over placement. In those cases, we can use _named snippets_.

Inside `App.svelte`, we're rendering a `<Card>` component that contains `<span slot="telephone">` and others for `company` and `address`. Let's add the corresponding named slots in `Card.svelte`:
Inside `App.svelte`, we're rendering a `<Card>` component that contains `{#snippet telephone()}` and others for `company` and `address`. Let's add the corresponding named snippets in `Card.svelte`:

```svelte
/// file: Card.svelte
<script>
const { children+++, address, company, telephone+++ } = $props();
</script>

<div class="card">
+++ <header>
<slot name="telephone"></slot>
<slot name="company"></slot>
{@render telephone()}
{@render company()}
</header>+++

<slot></slot>
{@render children()}

+++ <footer>
<slot name="address"></slot>
{@render address()}
</footer>+++
</div>
```
Expand Down
Loading