Svelte クラス付け替え

Svelteでクラスをつけたり外したりしたい

このボタンをクリックすると、変数activeのtrue falseが切り替わる。
変数activeがtrueのときだけactiveクラスをこのボタンにつけることができる

   <button
		class="card {active ? 'active' : ''}"
		on:click={() => active = !active}
	>

↓
省略記法

   <button
   	class="card"
   	class:active={active}
   	on:click={() => active = !active}
   >

↓
クラス名が、依存する変数名と一致する場合、
さらに省略記法

    <button
		class="card"
		class:active
		on:click={() => active = !active}
	>

スタイルもつけたり外したり

    <button
		class="card"
		class:active
		on:click={() => active = !active}
		style:background-color={active ? 'red' : ''}
	>