mirror of https://github.com/sveltejs/svelte
Conduitry
5 years ago
commit
9a0e0313a3
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
```
|
||||
@ -0,0 +1,33 @@
|
||||
// adapted from klona v2.0.4 - https://github.com/lukeed/klona
|
||||
// (c) Luke Edwards, under MIT License
|
||||
|
||||
// The sole modification is to skip function values in objects when cloning, so we don't break tests.
|
||||
|
||||
export function clone(val) {
|
||||
let k, out, tmp;
|
||||
|
||||
if (Array.isArray(val)) {
|
||||
out = Array(k=val.length);
|
||||
while (k--) out[k] = (tmp=val[k]) && typeof tmp === 'object' ? clone(tmp) : tmp;
|
||||
return out;
|
||||
}
|
||||
|
||||
if (Object.prototype.toString.call(val) === '[object Object]') {
|
||||
out = {}; // null
|
||||
for (k in val) {
|
||||
if (k === '__proto__') {
|
||||
Object.defineProperty(out, k, {
|
||||
value: clone(val[k]),
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
writable: true
|
||||
});
|
||||
} else if (typeof val[k] !== 'function') { // MODIFICATION: skip functions
|
||||
out[k] = (tmp=val[k]) && typeof tmp === 'object' ? clone(tmp) : tmp;
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
return val;
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<Component><div slot='foo'></div></Component>
|
||||
@ -0,0 +1,42 @@
|
||||
{
|
||||
"html": {
|
||||
"start": 0,
|
||||
"end": 45,
|
||||
"type": "Fragment",
|
||||
"children": [
|
||||
{
|
||||
"start": 0,
|
||||
"end": 45,
|
||||
"type": "InlineComponent",
|
||||
"name": "Component",
|
||||
"attributes": [],
|
||||
"children": [
|
||||
{
|
||||
"start": 11,
|
||||
"end": 33,
|
||||
"type": "Element",
|
||||
"name": "div",
|
||||
"attributes": [
|
||||
{
|
||||
"start": 16,
|
||||
"end": 26,
|
||||
"type": "Attribute",
|
||||
"name": "slot",
|
||||
"value": [
|
||||
{
|
||||
"start": 22,
|
||||
"end": 25,
|
||||
"type": "Text",
|
||||
"raw": "foo",
|
||||
"data": "foo"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue