svelte class tag

在說明完svelte的動態後，今天來分享一下html上常會用到的class標籤在svelte上的應用。

本文同步放置於此

要如何動態更新class標籤

變更class標籤的內容其實很簡單，下面有個例子可以給大家參考。

<script>
	let current = 'foo';
</script>

<style>
	button {
		display: block;
	}

	.active {
		background-color: #ff3e00;
		color: white;
	}
</style>

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

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

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

不過今天分享的這一篇這樣就講完了嗎?當然沒有那麼快，其實有更簡潔更容易了解的方式來處理class標籤，接下來正式的開始說明一下svelte的class標籤處理方式。

svelte class tag

其實可以把class標籤的內容視為一個屬性，透過true或false決定class標籤內的這個屬性是否存在於class內，下面就由改寫之前的例子來說明在svelte如何更新class標籤。

<script>
	let current = 'foo';
</script>

<style>
	button {
		display: block;
	}

	.active {
		background-color: #ff3e00;
		color: white;
	}
</style>

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

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

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

是不是這樣修改後比較容易閱讀呢，不只這樣，之前屬性綁定時的簡化的概念也可以套用在class標籤上喔，大家可以看看下面的例子。

<script>
	let big = false;
</script>

<style>
	.big {
		font-size: 4em;
	}
</style>

<label>
	<input type=checkbox bind:checked={big}>
	big
</label>

<div class:big>
	some {big ? 'big' : 'small'} text
</div>

簡單說明一下就是當變數名稱與class標籤的內容同名時就可以省略賦值的部分了。

小結

今天跟大家分享一個簡單又常用到的部分就是class標籤在svelte上的處理，了解這個後對於svelte開發上又更容易一些了