Skip to main content

他の属性と同じように、JavaScriptの属性でクラスを指定することができます。

<button
	class="{current === 'foo' ? 'selected' : ''}"
	on:click="{() => current = 'foo'}"
>foo</button>

これはUI開発ではよくあるパターンで、Svelteにはこれを単純化するための特別なディレクティブが含まれています。

<button
	class:selected="{current === 'foo'}"
	on:click="{() => current = 'foo'}"
>foo</button>

selected クラスは、式の値が truthy の場合は要素に追加され、falsy の場合は削除されます。

We stand with Ukraine. Donate → We stand with Ukraine. Petition your leaders. Show your support.