Svelte 入門: 動的に class 属性を off/on する

<script lang="ts">
	let active = false; // ランプの On/Off 状態
	function toggle() { active = !active; }
</script>

<div class="container">
	<div class="lamp {active ? 'active' : ''}" />
	<button on:click={toggle}>
		{#if active}OFF{:else}ON{/if}
	</button>
</div>

<style>
	.container {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.lamp {
		display: inline-block;
		width: 30px;
		height: 30px;
		box-sizing: border-box;
		border: 4px ridge rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		background: gray;
	}

	.active {
		background: lightgreen;
	}
</style>