DEV.log

classes 본문

Svelte/tutorial

classes

magnae2016 2022. 2. 1. 12:06
<script>
	let current = 'foo';
</script>

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

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

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

<style>
	button {
		display: block;
	}

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

 

https://svelte.dev/tutorial/classes

 

Classes / The class directive • Svelte Tutorial

Classes / The class directive a. Basicsb. Adding datac. Dynamic attributesd. Stylinge. Nested componentsf. HTML tagsg. Making an appa. Assignmentsb. Declarationsc. Statementsd. Updating arrays and objectsa. Declaring propsb. Default valuesc. Spread propsa.

svelte.dev

'Svelte > tutorial' 카테고리의 다른 글

named-slots  (0) 2022.02.01
slots  (0) 2022.02.01
classes  (0) 2022.02.01
custom-stores  (0) 2022.02.01
derived-stores  (0) 2022.02.01
readable-stores  (0) 2022.02.01
0 Comments
댓글쓰기 폼