Basic Svelte
Bindings
Classes and styles
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
トランジションとアニメーションと同じように、action は引数を取ることができます。その引数と、action 関数自身が属する要素を以って、action 関数は呼び出されます。
この演習では、Tippy.js ライブラリを使って <button> にツールチップを追加したいと思います。action はすでに use:tooltip によって紐付けられていますが、ボタンをホバーしても (キーボードでフォーカスしても) ツールチップには何も表示されません。
最初に、action でオプションを受け取り、それを Tippy に渡さなければなりません:
App
function tooltip(node, fn) {
$effect(() => {
const tooltip = tippy(node, fn());
return tooltip.destroy;
});
}オプションそのものではなく関数を渡していますが、これは、
tooltip関数はオプションが変更されたときに再実行しないからです。
それから、オプションを action に渡します:
App
<button use:tooltip={() => ({ content })}>
Hover me
</button>Svelte 4 では、action は
updateメソッドとdestroyメソッドをもったオブジェクトを返していました。これはまだ動作しますが、代わりに$effectを使用することをおすすめします。そのほうがより柔軟できめ細やかだからです。
previous next
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
<script>
import tippy from 'tippy.js';
let content = $state('Hello!'); function tooltip(node) { $effect(() => {const tooltip = tippy(node);
return tooltip.destroy;
});
}
</script>
<input bind:value={content} /><button use:tooltip>
Hover me
</button>
<style>
:global { [data-tippy-root] {--bg: #666;
background-color: var(--bg);
color: white;
border-radius: 0.2rem;
padding: 0.2rem 0.6rem;
filter: drop-shadow(1px 1px 3px rgb(0 0 0 / 0.1));
* {transition: none;
}
}
[data-tippy-root]::before {--size: 0.4rem;
content: '';
position: absolute;
left: calc(50% - var(--size));
top: calc(-2 * var(--size) + 1px);
border: var(--size) solid transparent;
border-bottom-color: var(--bg);
}
}
</style>