SvelteTemplate syntax

class

要素にクラスを設定する方法は2つあります: class 属性と class: ディレクティブです。

Attributes

プリミティブな値は他の属性と同じように扱われます:

<div class={large ? 'large' : 'small'}>...</div>

歴史的な理由により、falsy な値 (例えば false や NaN) は文字列化されます (class="false") が、class={undefined} (または null) の場合、属性が完全に省略されます。将来の Svelte バージョンでは、すべての falsy の値で class が省略されるようになります。

Objects and arrays

Svelte 5.16以降、class はオブジェクトや配列で指定でき、clsx で文字列に変換されます。

値がオブジェクトの場合、truthy なキーが追加されます:

<script>
	let { cool } = $props();
</script>

<!-- `cool` が truthy な場合は `class="cool"` になり、
 それ以外の場合は `class="lame"` となる -->
<div class={{ cool, lame: !cool }}>...</div>

値が配列の場合、truthy な値が結合されます:

<!-- `faded` と `large` がどちらも truthy な場合、
	 `class="saturate-0 opacity-50 scale-200"` となる -->
<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>

配列形式でもオブジェクト形式でも、1つの条件で複数のクラスを同時に設定できます。これは、Tailwind のようなものを使用している場合に特に便利です。

配列は配列やオブジェクトを含むことができ、clsx がそれらをフラットにします。例えば、ローカルクラスと props を組み合わせる際に便利です:

Button

<script>
	let props = $props();
</script>

<button {...props} class={['cool-button', props.class]}>
	{@render props.children?.()}
</button>

<script lang="ts">
	let props = $props();
</script>

<button {...props} class={['cool-button', props.class]}>
	{@render props.children?.()}
</button>

このコンポーネントのユーザーは、オブジェクト、配列、文字列を混在させる柔軟性を得ることができます:

App

<script>
	import Button from './Button.svelte';
	let useTailwind = $state(false);
</script>

<Button
	onclick={() => useTailwind = true}
	class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
>
	Accept the inevitability of Tailwind
</Button>

<script lang="ts">
	import Button from './Button.svelte';
	let useTailwind = $state(false);
</script>

<Button
	onclick={() => useTailwind = true}
	class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
>
	Accept the inevitability of Tailwind
</Button>

Svelte はまた、要素の class 属性が受け入れる値の型である ClassValue 型を公開しています。これは、コンポーネントの props に型安全なクラス名を使用したい場合に便利です:

<script lang="ts">
	import type { ClassValue } from 'svelte/elements';

	const props: { class: ClassValue } = $props();
</script>

<div class={['original', props.class]}>...</div>

The class: directive

Svelte 5.16以前では、class: ディレクティブは条件付きで要素にクラスを設定する最も便利な方法でした。

<!-- These are equivalent -->
<div class={{ cool, lame: !cool }}>...</div>
<div class:cool={cool} class:lame={!cool}>...</div>

他のディレクティブと同様に、クラス名が値と一致する場合は短縮形を使用できます:

<div class:cool class:lame={!cool}>...</div>

古いバージョンの Svelte を使用していない限り、class: を避けることを検討してください。属性の方がより強力でコンポーザブル (composable) だからです。

Edit this page on GitHub

previous next

style: Scoped styles