javascript / beginner
Snippet
Bedingte Klassen mit class:name
Die class:name-Direktive bietet eine saubere Möglichkeit, CSS-Klassen basierend auf einer Bedingung umzuschalten. Wenn der Ausdruck in den Klammern 'truthy' ist, wird die Klasse hinzugefügt; andernfalls wird sie entfernt.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>let active = false;</script><buttonclass:active={active}on:click={() => active = !active}>Toggle Status</button><style>.active { color: red; font-weight: bold; }</style>
svelte
Erklärung
1
class:active={active}
Wendet die CSS-Klasse 'active' nur an, wenn die Variable 'active' wahr ist.