Skip to content

Commit 3c6a656

Browse files
author
Rich Harris
committed
nicer slot exercises
1 parent c34a754 commit 3c6a656

File tree

31 files changed

+613
-270
lines changed

31 files changed

+613
-270
lines changed

‎content/tutorial/03-advanced-svelte/07-composition/01-slots/README.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,21 @@ Just like elements can have children...
1111
</div>
1212
```
1313

14-
...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `<slot>` element. Put this inside `Box.svelte`:
14+
...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `<slot>` element. Put this inside `Card.svelte`:
1515

1616
```svelte
17-
/// file: Box.svelte
18-
<div class="box">
17+
/// file: Card.svelte
18+
<div class="card ">
1919
+++<slot />+++
2020
</div>
2121
```
2222

23-
You can now put things in the box:
23+
You can now put things on the card:
2424

2525
```svelte
2626
/// file: App.svelte
27-
<Box>
28-
+++<h2>Hello!</h2>+++
29-
+++<p>This is a box. It can contain anything.</p>+++
30-
</Box>
27+
<Card>
28+
+++<span>Patrick BATEMAN</span>+++
29+
+++<span>Vice President</span>+++
30+
</Card>
3131
```

‎content/tutorial/03-advanced-svelte/07-composition/01-slots/app-a/src/lib/App.svelte

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
<script>
2-
import Box from './Box.svelte';
2+
import Card from './Card.svelte';
33
</script>
44

5-
<Box>
6-
<!-- put content here -->
7-
</Box>
5+
<main>
6+
<Card>
7+
<!-- content goes here -->
8+
</Card>
9+
</main>
10+
11+
<style>
12+
main {
13+
display: grid;
14+
place-items: center;
15+
height: 100%;
16+
background: url(./wood.svg);
17+
}
18+
</style>

‎content/tutorial/03-advanced-svelte/07-composition/01-slots/app-a/src/lib/Box.svelte

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎content/tutorial/03-advanced-svelte/07-composition/01-slots/app-a/src/lib/Card.svelte

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<div class="card">
2+
<!-- slot goes here -->
3+
</div>
4+
5+
<style>
6+
@font-face {
7+
src: url('/Garamond Classico SC Regular.woff2') format('woff2');
8+
font-family: 'Silian Rail';
9+
font-style: normal;
10+
font-weight: 400;
11+
}
12+
13+
.card {
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
font-size: min(2vw, 3.5vh, 1.5rem);
19+
font-family: 'Silian Rail';
20+
width: 24em;
21+
aspect-ratio: 3.5 / 2.0;
22+
background: url(./paper.svg);
23+
border-radius: 2px;
24+
filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2));
25+
padding: 1.5em 1em 1em 1em;
26+
font-variant: small-caps;
27+
text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.2), 1px 1px 2px white;
28+
color: hsl(50, 20%, 35%);
29+
line-height: 1.2;
30+
}
31+
32+
header, footer {
33+
width: 100%;
34+
display: flex;
35+
flex: 1;
36+
}
37+
38+
header {
39+
justify-content: space-between;
40+
}
41+
42+
footer {
43+
font-size: 0.7em;
44+
justify-content: center;
45+
align-items: end;
46+
}
47+
</style>

‎content/tutorial/03-advanced-svelte/07-composition/01-slots/app-a/src/lib/paper.svg

Lines changed: 10 additions & 0 deletions
Loading

‎content/tutorial/03-advanced-svelte/07-composition/01-slots/app-a/src/lib/wood.svg

Lines changed: 10 additions & 0 deletions
Loading

‎content/tutorial/03-advanced-svelte/07-composition/01-slots/app-a/static/Garamond Classico SC Regular.woff2

30.7 KB
Binary file not shown.

‎content/tutorial/03-advanced-svelte/07-composition/01-slots/app-b/src/lib/App.svelte

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
<script>
2-
import Box from './Box.svelte';
2+
import Card from './Card.svelte';
33
</script>
44

5-
<Box>
6-
<h2>Hello!</h2>
7-
<p>This is a box. It can contain anything.</p>
8-
</Box>
5+
<main>
6+
<Card>
7+
<span>Patrick BATEMAN</span>
8+
<span>Vice President</span>
9+
</Card>
10+
</main>
11+
12+
<style>
13+
main {
14+
display: grid;
15+
place-items: center;
16+
height: 100%;
17+
background: url(./wood.svg);
18+
}
19+
</style>

‎content/tutorial/03-advanced-svelte/07-composition/01-slots/app-b/src/lib/Box.svelte

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎content/tutorial/03-advanced-svelte/07-composition/01-slots/app-b/src/lib/Card.svelte

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<div class="card">
2+
<slot />
3+
</div>
4+
5+
<style>
6+
@font-face {
7+
src: url('/Garamond Classico SC Regular.woff2') format('woff2');
8+
font-family: 'Silian Rail';
9+
font-style: normal;
10+
font-weight: 400;
11+
}
12+
13+
.card {
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
font-size: min(2vw, 3.5vh, 1.5rem);
19+
font-family: 'Silian Rail';
20+
width: 24em;
21+
aspect-ratio: 3.5 / 2.0;
22+
background: url(./paper.svg);
23+
border-radius: 2px;
24+
filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2));
25+
padding: 1.5em 1em 1em 1em;
26+
font-variant: small-caps;
27+
text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.2), 1px 1px 2px white;
28+
color: hsl(50, 20%, 35%);
29+
line-height: 1.2;
30+
}
31+
32+
header, footer {
33+
width: 100%;
34+
display: flex;
35+
flex: 1;
36+
}
37+
38+
header {
39+
justify-content: space-between;
40+
}
41+
42+
footer {
43+
font-size: 0.7em;
44+
justify-content: center;
45+
align-items: end;
46+
}
47+
</style>

‎content/tutorial/03-advanced-svelte/07-composition/02-named-slots/README.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: Named slots
3+
---
4+
5+
The previous example contained a _default slot_, which renders the direct children of a component. Sometimes you will need more control over placement. In those cases, we can use _named slots_.
6+
7+
Inside the `<Card>` element, we've got `<span slot="telephone">` and others for `company` and `address`. Let's add the corresponding named slots in `Card.svelte`:
8+
9+
```svelte
10+
/// file: Card.svelte
11+
<div class="card">
12+
+++ <header>
13+
<slot name="telephone" />
14+
<slot name="company" />
15+
</header>+++
16+
17+
<slot />
18+
19+
+++ <footer>
20+
<slot name="address" />
21+
</footer>+++
22+
</div>
23+
```
24+
25+
We need to add some styles to the `<small>` element so that it occupies its own line. The contents of `<Card>` inherit styles from `Card.svelte`, such as `font-family` (the lettering is something called ['Silian Rail'](https://www.youtube.com/watch?v=aZVkW9p-cCU)), but normal scoping rules apply — we need to add the styles to `App.svelte` because that's where the element is:
26+
27+
```svelte
28+
/// file: App.svelte
29+
<style>
30+
main {
31+
display: grid;
32+
place-items: center;
33+
height: 100%;
34+
background: url(http://github.com/wood.svg);
35+
}
36+
37+
+++ small {
38+
display: block;
39+
font-size: 0.6em;
40+
text-align: right;
41+
}+++
42+
</style>
43+
```
44+
45+
Alternatively, we could use the `:global` modifier inside `Card.svelte` to target all `small` elements inside `.card`:
46+
47+
```svelte
48+
/// file: Card.svelte
49+
<style>
50+
/* ... */
51+
52+
+++.card :global(small) {
53+
display: block;
54+
font-size: 0.6em;
55+
text-align: right;
56+
}+++
57+
</style>
58+
```

‎content/tutorial/03-advanced-svelte/07-composition/02-named-slots/app-a/src/lib/App.svelte

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script>
2+
import Card from './Card.svelte';
3+
</script>
4+
5+
<main>
6+
<Card>
7+
<span>Patrick BATEMAN</span>
8+
<span>Vice President</span>
9+
10+
<span slot="telephone">212 555 6342</span>
11+
12+
<span slot="company">
13+
Pierce &amp; Pierce
14+
<small>Mergers and Acquisitions</small>
15+
</span>
16+
17+
<span slot="address">358 Exchange Place, New York, N.Y. 100099 fax 212 555 6390 telex 10 4534</span>
18+
</Card>
19+
</main>
20+
21+
<style>
22+
main {
23+
display: grid;
24+
place-items: center;
25+
height: 100%;
26+
background: url(./wood.svg);
27+
}
28+
</style>

‎content/tutorial/03-advanced-svelte/07-composition/02-named-slots/app-a/src/lib/Card.svelte

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<div class="card">
2+
<slot />
3+
</div>
4+
5+
<style>
6+
@font-face {
7+
src: url('/Garamond Classico SC Regular.woff2') format('woff2');
8+
font-family: 'Silian Rail';
9+
font-style: normal;
10+
font-weight: 400;
11+
}
12+
13+
.card {
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
font-size: min(2vw, 3.5vh, 1.5rem);
19+
font-family: 'Silian Rail';
20+
width: 24em;
21+
aspect-ratio: 3.5 / 2.0;
22+
background: url(./paper.svg);
23+
border-radius: 2px;
24+
filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2));
25+
padding: 1.5em 1em 1em 1em;
26+
font-variant: small-caps;
27+
text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.2), 1px 1px 2px white;
28+
color: hsl(50, 20%, 35%);
29+
line-height: 1.2;
30+
}
31+
32+
header, footer {
33+
width: 100%;
34+
display: flex;
35+
flex: 1;
36+
}
37+
38+
header {
39+
justify-content: space-between;
40+
}
41+
42+
footer {
43+
font-size: 0.7em;
44+
justify-content: center;
45+
align-items: end;
46+
}
47+
</style>

‎content/tutorial/03-advanced-svelte/07-composition/02-named-slots/app-a/src/lib/paper.svg

Lines changed: 10 additions & 0 deletions
Loading

‎content/tutorial/03-advanced-svelte/07-composition/02-named-slots/app-a/src/lib/wood.svg

Lines changed: 10 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)