msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Add documentation and tutorial for svelte:fragment

Browse Source
pull/6097/head
stephane-vanraes 6 years ago
parent ce3a579125
commit 2466f8414e
6 changed files with 149 additions and 0 deletions
Show Stats Download Patch File Download Diff File

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

@ -1328,6 +1328,28 @@ Named slots allow consumers to target specific areas. They can also have fallbac
</Widget>
```
Named slots can also be used with components `<Component slot="name" />`.
In order to place content in a slot without losing the flow layout (ie: 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>` allows you to place content in a named [docs](docs#slot_name) without wrapping it in a container, this allows to keep intact the flow layout of your document.
```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>
```

11
site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
Unescape View File

@ -0,0 +1,11 @@
<script>
import Box from './Box.svelte'
</script>
<!-- App.svelte -->
<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
Unescape 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>

11
site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
Unescape View File

@ -0,0 +1,11 @@
<script>
import Box from './Box.svelte'
</script>
<!-- App.svelte -->
<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
Unescape 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>

43
site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
Unescape View File

@ -0,0 +1,43 @@
---
title: <svelte:fragment>
---
The `<svelte:fragment>` element allows you to add content to a named slot without breaking the document's flow layout.
In the example notice how we applied a flex layout with a gap of 2em to the box.
```sv
<!-- Box.svelte -->
<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>
```
The content in the footer however is not spaced out according to this rythm because wrapping it in a div created a new flow layout.
We can solve this by changing `<div slot="footer">` in the `App` component:
```sv
<svelte:fragment slot="footer">
<p>All rights reserved.</p>
<p>Copyright (c) 2019 Svelte Industries</p>
</svelte:fragment>
```
Write Preview
Loading…
Cancel
Save