Estilos

Veremos nessa página como adicionar estilos de forma dinâmica aos nossos componentes.

Diretiva class

A diretiva class é usada para alternar uma classe em um componente. Por exemplo: Se eu quiser adicionar uma classe quando uma variável tiver um valor verdadeiro, posso fazer assim:

Modo convencional:

<script>
	let isActive = true;
</script>

<!-- Quando "isActive" for false, o atributo class ficará assim: class="".  -->
<h1 class="{isActive === true ? 'active' : ''}">Título</h1>

<style>
	.active {
		color: green;
	}
</style>

Modo svelte:

<script>
	let isActive = true;
</script>

<h1 class:isActive>Título</h1>

<style>
	.isActive {
		color: green;
	}
</style>

No caso acima, não esqueça de mudar o nome da classe para “.isActive”. Ou então faça assim:

<h1 class:active={isActive}>Título</h1>

Dessa forma, o atributo “class” vai ser removido do elemento quando seu valor for falso. Muito melhor. Não faz sentido ter um atributo com valor vazio.

Podemos colocar várias diretivas class em um elemento.

<div class:isActive class:isSelected class:isExpanded>...</div>

Vamos ver um exemplo bem básico.

<script>
	let isActive = true;
</script>

<h1 class:isActive>Título</h1>
<label>
	<input type="checkbox" bind:checked={isActive} />
	Cor verde
</label>

<style>
	.isActive {
		color: green;
	}
</style>

Diretiva style

A diretiva style é similar à diretiva class, com a diferença que os nomes são propriedades do css.

<script>
	let isActive = true;
</script>

<h1 style:color="{isActive ? 'green' : ''}">Título</h1>
<label>
	<input type="checkbox" bind:checked={isActive} />
	Cor verde
</label>

Vocẽ pode pensar que, observando este exemplo, é melhor usar classes pois você pode utilizar o css e organizar melhor o código sem ter que escrever estilos diretamente no elemento. Bom, é verdade, mas há casos em que você não consegue fazer só com classes. Por exemplo, com valores dinâmicos.

Observe:

<script>
	let size = 1
</script>

<label for="size">Selecione o tamanho da fonte</label>
<input id="size" type="range" bind:value={size} min={1} max={3} step={0.25} />
<h1 style:font-size="{size}rem">Título</h1>

Imagina você ter que criar várias classes baseado no tamanho que foi definido em um input do tipo range? Tipo assim:

<style>
	.size1 {font-size: 1rem}
	.size1-25 {font-size: 1.25rem}
	.size1-50 {font-size: 1.5rem}
	.size1-75 {font-size: 1.75rem}
	.size2 {font-size: 2rem}
</style>

Muito código pra escrever. Por isso cada função do svelte tem um caso de uso.

Poderíamos ter usado o estilo inline dos elementos, funcionaria da mesma maneira.

<!-- São equivalentes -->
<h1 style:font-size="{size}rem">Título</h1>
<h1 style="font-size: {size}rem">Título</h1>

A diretiva style tem precedência sobre o atributo “style”. Então, se você fizer:

<div style:color="red" style="color: blue;">Text</div>

O texto será vermelho.

Podemos usar a diretiva style com variáveis css.

<script>
	let size = '8rem'
</script>

<h1 style:color="red" style:--size={size}>Título</h1>

<style>
	h1 {
		font-size: var(--size)
	}
</style>

E também é possível marcar um estilo como important.

<h1 style:color|important="red">Text</h1>

Mas é importante saber que se tiver duas diretivas de estilo com a mesma propriedade, a que tiver marcada como important, não terá precedência sobre a outra.

O texto abaixo será azul, pois a propriedade que define essa cor foi colocada depois da cor vermelha, ou seja, a cor azul sobrescreveu a vermelha.

Fique atento à ordem de definição das propriedades.

<h1 style:color|important="red" style:color="blue">Text</h1>