class

Существует два способа установить классы на элементах: атрибут class и директива class:.

Атрибуты

Примитивные значения обрабатываются как любые другие атрибуты:

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

Объекты и массивы

Начиная с Svelte 5.16, class может быть объектом или массивом и преобразуется в строку с помощью clsx.

Если значение является объектом, добавляются истинноподобные ключи:

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

<!-- если `cool` истинно, результат будет `class="cool"`,
     в противном случае - `class="lame"` -->
<div class={{ cool, lame: !cool }}>...</div>

Если значение является массивом, истинноподобные значения объединяются:

<!-- если `faded` и `large` оба истинны, результат будет
     `class="saturate-0 opacity-50 scale-200"` -->
<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>

Обратите внимание, что независимо от того, используем ли мы массив или объект, мы можем установить несколько классов одновременно с помощью одного условия, что особенно полезно, если вы используете такие вещи, как Tailwind.

Массивы могут содержать массивы и объекты, и clsx будет их объединять. Это полезно для комбинирования локальных классов с пропсами, например:

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

Пользователь этого компонента имеет такую же гибкость в использовании смеси объектов, массивов и строк:

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

<Button
  onclick={() => useTailwind = true}
  class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
>
  Принять неизбежность 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 }}
>
  Принять неизбежность Tailwind
</Button>

Svelte также предоставляет тип ClassValue, который является типом значения, принимаемого атрибутом class на элементах. Это полезно, если вы хотите использовать безопасное по типу имя класса в пропсах компонента:

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

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

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

Директива `class:`

До Svelte 5.16 директива class: была самым удобным способом установки классов на элементах по условию.

<!-- Эти выражения эквивалентны -->
<div class={{ cool, lame: !cool }}>...</div>
<div class:cool={cool} class:lame={!cool}>...</div>

Как и с другими директивами, мы можем использовать сокращённую запись, когда имя класса совпадает со значением:

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