site: Replace "active" with "selected" as an example class name (#5309)

pull/5380/head
Cam Jackson 4 years ago committed by GitHub
parent 8a28d1bb38
commit 80e474a244
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -7,23 +7,23 @@
display: block;
}
.active {
.selected {
background-color: #ff3e00;
color: white;
}
</style>
<button
class="{current === 'foo' ? 'active' : ''}"
class="{current === 'foo' ? 'selected' : ''}"
on:click="{() => current = 'foo'}"
>foo</button>
<button
class="{current === 'bar' ? 'active' : ''}"
class="{current === 'bar' ? 'selected' : ''}"
on:click="{() => current = 'bar'}"
>bar</button>
<button
class="{current === 'baz' ? 'active' : ''}"
class="{current === 'baz' ? 'selected' : ''}"
on:click="{() => current = 'baz'}"
>baz</button>

@ -7,23 +7,23 @@
display: block;
}
.active {
.selected {
background-color: #ff3e00;
color: white;
}
</style>
<button
class:active="{current === 'foo'}"
class:selected="{current === 'foo'}"
on:click="{() => current = 'foo'}"
>foo</button>
<button
class:active="{current === 'bar'}"
class:selected="{current === 'bar'}"
on:click="{() => current = 'bar'}"
>bar</button>
<button
class:active="{current === 'baz'}"
class:selected="{current === 'baz'}"
on:click="{() => current = 'baz'}"
>baz</button>

@ -6,7 +6,7 @@ Like any other attribute, you can specify classes with a JavaScript attribute, s
```html
<button
class="{current === 'foo' ? 'active' : ''}"
class="{current === 'foo' ? 'selected' : ''}"
on:click="{() => current = 'foo'}"
>foo</button>
```
@ -15,9 +15,9 @@ This is such a common pattern in UI development that Svelte includes a special d
```html
<button
class:active="{current === 'foo'}"
class:selected="{current === 'foo'}"
on:click="{() => current = 'foo'}"
>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.

Loading…
Cancel
Save