javascript / beginner
Snippet
Dynamisches Umschalten von Klassen
Svelte bietet eine Kurzschreibweise zum Umschalten von CSS-Klassen. Anstatt den Klassen-String manuell zu manipulieren, kannst du 'class:name={bedingung}' verwenden, um eine Klasse basierend auf einem booleschen Wert hinzuzufügen oder zu entfernen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
<script>let active = false;</script><button on:click={() => active = !active}>Toggle State</button><div class:active={active}>Status: {active ? 'Active' : 'Inactive'}</div>
svelte
Erklärung
1
class:active={active}
Wendet die CSS-Klasse 'active' nur an, wenn die Variable 'active' wahr ist.
2
active = !active
Schaltet den booleschen Wert zwischen wahr und falsch um.