mirrors/svelte
mirrors/svelte
0
0
Fork 0
mirror of https://github.com/sveltejs/svelte.git synced 2024-12-01 17:30:59 +01:00
Code Issues Releases Wiki Activity

Add documentation and tutorial for svelte:fragment (#6097)

Browse Source
This commit is contained in:
Stephane 2021-03-29 23:01:29 +02:00 committed by GitHub
parent ddfe920ede
commit 47e1eeed56
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 139 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
site/content/docs/02-template-syntax.md
View File

@ -1328,6 +1328,28 @@ Named slots allow consumers to target specific areas. They can also have fallbac
</Widget>
```
Components can be placed in a named slot using the syntax `<Component slot="name" />`.
In order to place content in a slot without using a wrapper element, you can use the special element `<svelte:fragment>`.
```sv
<!-- Widget.svelte -->
<div>
<slot name="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slot name="footer"></slot>
</div>
<!-- App.svelte -->
<Widget>
<HeaderComponent slot="header" />
<svelte:fragment slot="footer">
<p>All rights reserved.</p>
<p>Copyright (c) 2019 Svelte Industries</p>
</svelte:fragment>
</Widget>
```
#### [`$$slots`](slots_object)
---
@ -1537,3 +1559,25 @@ The `<svelte:options>` element provides a place to specify per-component compile
```sv
<svelte:options tag="my-custom-element"/>
```
### `<svelte:fragment>`
The `<svelte:fragment>` element allows you to place content in a [named slot](docs#slot_name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
```sv
<!-- Widget.svelte -->
<div>
<slot name="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slot name="footer"></slot>
</div>
<!-- App.svelte -->
<Widget>
<h1 slot="header">Hello</h1>
<svelte:fragment slot="footer">
<p>All rights reserved.</p>
<p>Copyright (c) 2019 Svelte Industries</p>
</svelte:fragment>
</Widget>
```

10
site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte Normal file
View File

@ -0,0 +1,10 @@
<script>
import Box from './Box.svelte'
</script>
<Box>
<div slot="footer">
<p>All rights reserved.</p>
<p>Copyright (c) 2019 Svelte Industries</p>
</div>
</Box>

20
site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte Normal file
View File

@ -0,0 +1,20 @@
<style>
.box {
width: 300px;
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
padding: 1em;
margin: 0 0 1em 0;
display: flex;
flex-direction: column;
gap: 1em;
}
</style>
<div class="box">
<slot name="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slot name="footer"></slot>
</div>

10
site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte Normal file
View File

@ -0,0 +1,10 @@
<script>
import Box from './Box.svelte'
</script>
<Box>
<svelte:fragment slot="footer">
<p>All rights reserved.</p>
<p>Copyright (c) 2019 Svelte Industries</p>
</svelte:fragment>
</Box>

20
site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte Normal file
View File

@ -0,0 +1,20 @@
<style>
.box {
width: 300px;
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
padding: 1em;
margin: 0 0 1em 0;
display: flex;
flex-direction: column;
gap: 1em;
}
</style>
<div class="box">
<slot name="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slot name="footer"></slot>
</div>

35
site/content/tutorial/16-special-elements/08-svelte-fragment/text.md Normal file
View File

@ -0,0 +1,35 @@
---
title: <svelte:fragment>
---
The `<svelte:fragment>` element allows you to place content in a named slot without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
In the example notice how we applied a flex layout with a gap of `1em` to the box.
```sv
<!-- Box.svelte -->
<style>
.box {
display: flex;
flex-direction: column;
gap: 1em;
}
</style>
<div class="box">
<slot name="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slot name="footer"></slot>
</div>
```
However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout.
We can solve this by changing `<div slot="footer">` in the `App` component. Replace the `<div>` with `<svelte:fragment>`:
```sv
<svelte:fragment slot="footer">
<p>All rights reserved.</p>
<p>Copyright (c) 2019 Svelte Industries</p>
</svelte:fragment>
```