You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/site/content/tutorial/13-classes/01-classes/text.md

575 B

title
The class directive

Like any other attribute, you can specify classes with a JavaScript attribute, seen here:

<button
	class="{current === 'foo' ? 'active' : ''}"
	on:click="{() => current = 'foo'}"
>foo</button>

This is such a common pattern in UI development that Svelte includes a special directive to simplify it:

<button
	class:active="{current === 'foo'}"
	on:click="{() => current = 'foo'}"
>foo</button>

The active class is added to the element whenever the value of the expression is truthy, and removed when it's falsy.