Skip to main content

Trong một số trường hợp, bạn có thể muốn kiểm soát các phần của thành phần dựa trên việc liệu nội dung được đặt vào thông qua slot hay không. Ví dụ, nếu chúng ta xóa <header> từ App.svelte...

App.svelte
<header slot="header" class="row">
	<span class="color"></span>
	<span class="name">name</span>
	<span class="hex">hex</span>
	<span class="rgb">rgb</span>
	<span class="hsl">hsl</span>
</header>

<div class="row">
	<span class="color" style="background-color: {row.hex}" />
	<span class="name">{row.name}</span>
	<span class="hex">{row.hex}</span>
	<span class="rgb">{row.rgb}</span>
	<span class="hsl">{row.hsl}</span>
</div>

...chúng ta sẽ có một đường viền kép xấu xí vì FilterableList.svelte vẫn đang hiển thị <div class="header">.

Chúng ta có thể sửa điều đó bằng cách sử dụng biến đặc biệt $$slots trong FilterableList.svelte:

FilterableList.svelte
{#if $$slots.header}
	<div class="header">
		<slot name="header"></slot>
	</div>
{/if}

Tiếp theo: Context API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<script>
	import FilterableList from './FilterableList.svelte';
	import { colors } from './colors.js';
</script>
 
<FilterableList
	data={colors}
	field="name"
	let:item={row}
>
	<header slot="header" class="row">
		<span class="color"></span>
		<span class="name">name</span>
		<span class="hex">hex</span>
		<span class="rgb">rgb</span>
		<span class="hsl">hsl</span>
	</header>
 
	<div class="row">
		<span class="color" style="background-color: {row.hex}"></span>
		<span class="name">{row.name}</span>
		<span class="hex">{row.hex}</span>
		<span class="rgb">{row.rgb}</span>
		<span class="hsl">{row.hsl}</span>
	</div>
</FilterableList>
 
<style>
	.row {
		display: grid;
		align-items: center;
		grid-template-columns: 2em 4fr 3fr;
		gap: 1em;
		padding: 0.1em;
		background: var(--bg-1);
		border-radius: 0.2em;
	}
 
	header {
		font-weight: bold;
	}
 
	.row:not(header):hover {
		background: var(--bg-2);
	}
 
	.row:hover {
		background: var(--bg-2);
	}
 
	.color {
		aspect-ratio: 1;
		height: 100%;
		border-radius: 0.1em;
	}
 
	.rgb, .hsl {
		display: none;
	}
 
	@media (min-width: 40rem) {
		.row {
			grid-template-columns: 2em 4fr 3fr 3fr;
		}
 
		.rgb {
			display: block;
		}
	}
 
	@media (min-width: 60rem) {
		.row {
			grid-template-columns: 2em 4fr 3fr 3fr 3fr;
		}
 
		.hsl {
			display: block;
		}
	}
</style>
initialising