javascript / intermediate
Snippet
Bedingtes Styling mit Klassen-Direktiven
Die class:name={value} Direktive ist eine Kurzform für das Umschalten von CSS-Klassen basierend auf einem booleschen Ausdruck. Wenn der Variablenname dem Klassennamen entspricht, kann die noch kürzere Syntax class:active verwendet werden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>let isAdmin = true;let isEnabled = false;</script><div class:active={isEnabled} class:admin={isAdmin}>User Profile</div><style>.active { color: green; }.admin { font-weight: bold; }</style>
svelte
Erklärung
1
class:active={isEnabled}
Wendet die Klasse 'active' nur an, wenn isEnabled wahr ist.
2
class:admin={isAdmin}
Wendet die Klasse 'admin' basierend auf dem booleschen Wert isAdmin an.