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

Loading…
Cancel
Save