class

有两种在元素上设置类的方式：class 属性和 class: 指令。

¥There are two ways to set classes on elements: the class attribute, and the class: directive.

属性(Attributes)

¥Attributes

原始值与其他任何属性一样处理：

¥Primitive values are treated like any other attribute:

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

由于历史原因，虚假值（如 false 和 NaN）被字符串化（class="false"），但 class={undefined}（或 null）会导致属性被完全省略。在未来版本的 Svelte 中，所有假值都会导致 class 被省略。

¥[!NOTE] For historical reasons, falsy values (like false and NaN) are stringified (class="false"), though class={undefined} (or null) cause the attribute to be omitted altogether. In a future version of Svelte, all falsy values will cause class to be omitted.

对象和数组(Objects and arrays)

¥Objects and arrays

自 Svelte 5.16 起，class 可以是对象或数组，并使用 clsx 转换为字符串。

¥Since Svelte 5.16, class can be an object or array, and is converted to a string using clsx.

如果值是对象，则添加真值键：

¥If the value is an object, the truthy keys are added:

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

<!-- results in `class="cool"` if `cool` is truthy,
	 `class="lame"` otherwise -->
<div class={{ cool, lame: !cool }}>...</div>

如果值是数组，则将真值组合在一起：

¥If the value is an array, the truthy values are combined:

<!-- if `faded` and `large` are both truthy, results in
	 `class="saturate-0 opacity-50 scale-200"` -->
<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>

请注意，无论我们使用数组还是对象形式，我们都可以使用单个条件同时设置多个类，这在使用 Tailwind 之类的东西时特别有用。

¥Note that whether we’re using the array or object form, we can set multiple classes simultaneously with a single condition, which is particularly useful if you’re using things like Tailwind.

数组可以包含数组和对象，clsx 会展平它们。这对于将本地类与 props 组合很有用，例如：

¥Arrays can contain arrays and objects, and clsx will flatten them. This is useful for combining local classes with props, for example:

<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>

此组件的用户具有相同的灵活性，可以使用对象、数组和字符串的混合：

¥The user of this component has the same flexibility to use a mixture of objects, arrays and strings:

<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>

class: 指令(The class: directive)

¥The class: directive

在 Svelte 5.16 之前，class: 指令是在元素上有条件地设置类的最方便的方法。

¥Prior to Svelte 5.16, the class: directive was the most convenient way to set classes on elements conditionally.

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

与其他指令一样，当类的名称与值一致时，我们可以使用简写：

¥As with other directives, we can use a shorthand when the name of the class coincides with the value:

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

除非你使用的是旧版本的 Svelte，否则请考虑避免使用 class:，因为该属性更强大且可组合。

¥[!NOTE] Unless you’re using an older version of Svelte, consider avoiding class:, since the attribute is more powerful and composable.