site: clearer examples for <slot let:name> (#4125)

pull/4449/head
Matthew Dempsky 5 years ago committed by GitHub
parent 9a747e3b5a
commit a53da7e4b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1249,15 +1249,15 @@ The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}
```html
<!-- App.svelte -->
<FancyList {items} let:item={item}>
<div>{item.text}</div>
<FancyList {items} let:prop={thing}>
<div>{thing.text}</div>
</FancyList>
<!-- FancyList.svelte -->
<ul>
{#each items as item}
<li class="fancy">
<slot item={item}></slot>
<slot prop={item}></slot>
</li>
{/each}
</ul>
@ -1270,7 +1270,7 @@ Named slots can also expose values. The `let:` directive goes on the element wit
```html
<!-- App.svelte -->
<FancyList {items}>
<div slot="item" let:item={item}>{item.text}</div>
<div slot="item" let:item>{item.text}</div>
<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</FancyList>
@ -1278,7 +1278,7 @@ Named slots can also expose values. The `let:` directive goes on the element wit
<ul>
{#each items as item}
<li class="fancy">
<slot name="item" item={item}></slot>
<slot name="item" {item}></slot>
</li>
{/each}
</ul>

Loading…
Cancel
Save