mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
parent
46fc0dec0b
commit
6c4ccbbc1a
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Box from './Box.svelte';
|
||||
</script>
|
||||
|
||||
<Box>
|
||||
<h2>Hello!</h2>
|
||||
<p>This is a box. It can contain anything.</p>
|
||||
</Box>
|
||||
@ -0,0 +1,14 @@
|
||||
<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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box">
|
||||
<slot></slot>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import Box from './Box.svelte';
|
||||
</script>
|
||||
|
||||
<Box>
|
||||
<h2>Hello!</h2>
|
||||
<p>This is a box. It can contain anything.</p>
|
||||
</Box>
|
||||
|
||||
<Box/>
|
||||
@ -0,0 +1,16 @@
|
||||
<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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box">
|
||||
<slot>
|
||||
<em>no content was provided</em>
|
||||
</slot>
|
||||
</div>
|
||||
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Slot fallbacks
|
||||
---
|
||||
|
||||
A component can specify *fallbacks* for any slots that are left empty, by putting content inside the `<slot>` element:
|
||||
|
||||
```html
|
||||
<div class="box">
|
||||
<slot>
|
||||
<em>no content was provided</em>
|
||||
</slot>
|
||||
</div>
|
||||
```
|
||||
|
||||
We can now create instances of `<Box>` eithout any children:
|
||||
|
||||
```html
|
||||
<Box>
|
||||
<h2>Hello!</h2>
|
||||
<p>This is a box. It can contain anything.</p>
|
||||
</Box>
|
||||
|
||||
<Box/>
|
||||
```
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import ContactCard from './ContactCard.html';
|
||||
</script>
|
||||
|
||||
<ContactCard>
|
||||
<!-- contact details go here -->
|
||||
</ContactCard>
|
||||
@ -0,0 +1,47 @@
|
||||
<style>
|
||||
.contact-card {
|
||||
width: 300px;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 2px;
|
||||
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 0 0 0.2em 0;
|
||||
margin: 0 0 1em 0;
|
||||
border-bottom: 1px solid #ff3e00
|
||||
}
|
||||
|
||||
.address, .email {
|
||||
padding: 0 0 0 1.5em;
|
||||
background: 0 50% no-repeat;
|
||||
background-size: 1em 1em;
|
||||
margin: 0 0 0.5em 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.address { background-image: url(tutorial/icons/map-marker.svg) }
|
||||
.email { background-image: url(tutorial/icons/email.svg) }
|
||||
.missing { color: #999 }
|
||||
</style>
|
||||
|
||||
<article class="contact-card">
|
||||
<h2>
|
||||
<slot>
|
||||
<span class="missing">Unknown name</span>
|
||||
</slot>
|
||||
</h2>
|
||||
|
||||
<div class="address">
|
||||
<slot>
|
||||
<span class="missing">Unknown address</span>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div class="email">
|
||||
<slot>
|
||||
<span class="missing">Unknown email</span>
|
||||
</slot>
|
||||
</div>
|
||||
</article>
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
import ContactCard from './ContactCard.html';
|
||||
</script>
|
||||
|
||||
<ContactCard>
|
||||
<span slot="name">
|
||||
P. Sherman
|
||||
</span>
|
||||
|
||||
<span slot="address">
|
||||
42 Wallaby Way<br>
|
||||
Sydney
|
||||
</span>
|
||||
</ContactCard>
|
||||
@ -0,0 +1,47 @@
|
||||
<style>
|
||||
.contact-card {
|
||||
width: 300px;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 2px;
|
||||
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 0 0 0.2em 0;
|
||||
margin: 0 0 1em 0;
|
||||
border-bottom: 1px solid #ff3e00
|
||||
}
|
||||
|
||||
.address, .email {
|
||||
padding: 0 0 0 1.5em;
|
||||
background: 0 0 no-repeat;
|
||||
background-size: 20px 20px;
|
||||
margin: 0 0 0.5em 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.address { background-image: url(tutorial/icons/map-marker.svg) }
|
||||
.email { background-image: url(tutorial/icons/email.svg) }
|
||||
.missing { color: #999 }
|
||||
</style>
|
||||
|
||||
<article class="contact-card">
|
||||
<h2>
|
||||
<slot name="name">
|
||||
<span class="missing">Unknown name</span>
|
||||
</slot>
|
||||
</h2>
|
||||
|
||||
<div class="address">
|
||||
<slot name="address">
|
||||
<span class="missing">Unknown address</span>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div class="email">
|
||||
<slot name="email">
|
||||
<span class="missing">Unknown email</span>
|
||||
</slot>
|
||||
</div>
|
||||
</article>
|
||||
@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Named slots
|
||||
---
|
||||
|
||||
The previous example contained a *default slot*, which renders the direct children of a component. Sometimes you will need more control over placement, such as with this `<ContactCard>`. In those cases, we can use *named slots*.
|
||||
|
||||
In `ContactCard.svelte`, add a `name` attribute to each slot:
|
||||
|
||||
```html
|
||||
<article class="contact-card">
|
||||
<h2>
|
||||
<slot name="name">
|
||||
<span class="missing">Unknown name</span>
|
||||
</slot>
|
||||
</h2>
|
||||
|
||||
<div class="address">
|
||||
<slot name="address">
|
||||
<span class="missing">Unknown address</span>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div class="email">
|
||||
<slot name="email">
|
||||
<span class="missing">Unknown email</span>
|
||||
</slot>
|
||||
</div>
|
||||
</article>
|
||||
```
|
||||
|
||||
Then, add elements with corresponding `slot="..."` attributes inside the `<ContactCard>` component:
|
||||
|
||||
```html
|
||||
<ContactCard>
|
||||
<span slot="name">
|
||||
P. Sherman
|
||||
</span>
|
||||
|
||||
<span slot="address">
|
||||
42 Wallaby Way<br>
|
||||
Sydney
|
||||
</span>
|
||||
</ContactCard>
|
||||
```
|
||||
|
After Width: | Height: | Size: 280 B |
|
After Width: | Height: | Size: 334 B |
Loading…
Reference in new issue