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

pull/5380/head
Cam Jackson 5 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; display: block;
} }
.active { .selected {
background-color: #ff3e00; background-color: #ff3e00;
color: white; color: white;
} }
</style> </style>
<button <button
class="{current === 'foo' ? 'active' : ''}" class="{current === 'foo' ? 'selected' : ''}"
on:click="{() => current = 'foo'}" on:click="{() => current = 'foo'}"
>foo</button> >foo</button>
<button <button
class="{current === 'bar' ? 'active' : ''}" class="{current === 'bar' ? 'selected' : ''}"
on:click="{() => current = 'bar'}" on:click="{() => current = 'bar'}"
>bar</button> >bar</button>
<button <button
class="{current === 'baz' ? 'active' : ''}" class="{current === 'baz' ? 'selected' : ''}"
on:click="{() => current = 'baz'}" on:click="{() => current = 'baz'}"
>baz</button> >baz</button>

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

@ -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.

Loading…
Cancel
Save