Clases y estilos

El atributo class

Al igual que con cualquier otro atributo se pueden agregar clases de forma dinámica con JS

App.svelte

<script>
  let flipped = $state(false);
</script>

<button
  class="card {flipped ? 'flipped' : ''}"
  onclick={() => flipped = !flipped}
>
  Clic
</button>
  
<p>State: {flipped}</p>

Agregar o eliminar una clase en función de alguna condición es un patrón tan común en el desarrollo de interfaces de usuario que Svelte permite pasar un objeto o array que clsx convierte en un string

App.svelte

<script>
  let flipped = $state(false);
  let otherState = $state(false);
</script>

<button
  class={["card", { flipped, "other-class": otherState }]}
  onclick={() => flipped = !flipped}
>
Clic
</button>

<p>State: {flipped}</p>

Esto significa

• Añadir siempre la clase card
• Añadir la clase flipped siempre que flipped sea verdadero (abreviado de flipped: flipped)

La directiva style

• Al igual que con class, se pueden escribir los atributos styleinline

App.svelte

<script>
	let flipped = $state(false);
</script>

<button
	class="card"
	style="transform: {flipped ? 'rotateY(0)' : ''}; --bg-1: palegoldenrod; --bg-2: black; --bg-3: goldenrod"
	onclick={() => flipped = !flipped}
>

• Cuando se tienen muchos estilos, es mejor utilizar la directiva style: para tener un mejor orden
• La diferencia es pasar de style= a style:

App.svelte

<script>
	let flipped = $state(false);
</script>

<button
	class="card"
	style:transform={flipped ? 'rotateY(0)' : ''}
	style:--bg-1="palegoldenrod"
	style:--bg-2="black"
	style:--bg-3="goldenrod"
	onclick={() => flipped = !flipped}
>
Clic
</button>

Estilos en componentes

• El componente recibe los valores como si fuesen atributos
• Sin props

Box.svelte

<div class="box"></div>

<style>
	.box {
		width: 5em;
		height: 5em;
		border-radius: 0.5em;
		margin: 0 0 1em 0;
		background-color: var(--color, #ddd);
	}
</style>

• Se pasan los valores como si fuese un atributo del elemento

App.svelte

<script>
	import Box from './Box.svelte';
</script>

<div class="boxes">
	<Box --color="red" />
	<Box --color="green" />
	<Box --color="blue" />
</div>

Esta función opera envolviendo cada componente en un elemento con display: contents, donde sea necesario, y aplicándole las propiedades personalizadas.

display: contents no afectará el diseño, pero el elemento adicional puede afectar a selectores como .parent > .child.