|
|
@ -6,7 +6,7 @@ Like any other attribute, you can specify classes with a JavaScript attribute, s
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
```html
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
class="{current === 'foo' ? 'active' : ''}"
|
|
|
|
class="{current === 'foo' ? 'selected' : ''}"
|
|
|
|
on:click="{() => current = 'foo'}"
|
|
|
|
on:click="{() => current = 'foo'}"
|
|
|
|
>foo</button>
|
|
|
|
>foo</button>
|
|
|
|
```
|
|
|
|
```
|
|
|
@ -15,9 +15,9 @@ This is such a common pattern in UI development that Svelte includes a special d
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
```html
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
class:active="{current === 'foo'}"
|
|
|
|
class:selected="{current === 'foo'}"
|
|
|
|
on:click="{() => current = 'foo'}"
|
|
|
|
on:click="{() => current = 'foo'}"
|
|
|
|
>foo</button>
|
|
|
|
>foo</button>
|
|
|
|
```
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
The `active` class is added to the element whenever the value of the expression is truthy, and removed when it's falsy.
|
|
|
|
The `selected` class is added to the element whenever the value of the expression is truthy, and removed when it's falsy.
|
|
|
|