English
The Class Directive
Like any other attribute, you can specify classes with a JavaScript attribute, seen here:
<button
class="{current === 'foo' ? 'active' : ''}"
on:click="{() => current = 'foo'}"
>foo</button>
This is such a common pattern in UI development that Svelte includes a special directive to simplify it:
<button
class:active="{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. So as you can see in the example below, once class is set to active, the button will change color according to what css is set to, in this case, to color orange.
<script>
let current = 'foo';
</script>
<style>
button {
display: block;
}
.active {
background-color: #ff3e00;
color: white;
}
</style>
<button
class:active="{current === 'foo'}"
on:click="{() => current = 'foo'}"
>foo</button>
<button
class:active="{current === 'bar'}"
on:click="{() => current = 'bar'}"
>bar</button>
<button
class:active="{current === 'baz'}"
on:click="{() => current = 'baz'}"
>baz</button>
Shorthand Class Directive
Often, the name of the class will be the same as the name of the value it depends on:
<div class:big={big}>
<!-- ... -->
</div>
In those cases we can use a shorthand form:
<div class:big>
<!-- ... -->
</div>
Here is full example when variable big is set to true as the checkbox is checked, the class of div also change to big, so the font also get bigger as it's set in the css.
<script>
let big = false;
</script>
<style>
.big {
font-size: 4em;
}
</style>
<label>
<input type=checkbox bind:checked={big}> big
</label>
<div class:big>
some {big ? 'big' : 'small'} text
</div>
Indonesia
The Class Directive
Seperti atribut yang lain, kita juga bisa menentukan class dengan atribut JavaScript, seperti berikut:
<button
class="{current === 'foo' ? 'active' : ''}"
on:click="{() => current = 'foo'}"
>foo</button>
Karena begitu seringnya digunakan dalam pembuatan UI, maka Svelte memasukkan direktiv spesial untuk membuat proses ini lebih mudah:
<button
class:active="{current === 'foo'}"
on:click="{() => current = 'foo'}"
>foo</button>
Class active akan ditambahkan pada elemen kapanpun hasil dari ekspresi adalah benar, dan dihilangkan jika hasilnya salah. Jadi seperti yang bisa dilihat pada contoh di atas, begitu class sudah diset menjadi active, tombol akan berubah warna sesuai dengan yang sudah diatur di dalam css, dalam hal ini menjadi warna oranye.
<script>
let current = 'foo';
</script>
<style>
button {
display: block;
}
.active {
background-color: #ff3e00;
color: white;
}
</style>
<button
class:active="{current === 'foo'}"
on:click="{() => current = 'foo'}"
>foo</button>
<button
class:active="{current === 'bar'}"
on:click="{() => current = 'bar'}"
>bar</button>
<button
class:active="{current === 'baz'}"
on:click="{() => current = 'baz'}"
>baz</button>
Shorthand Class Directive
Seringkali, nama dari class akan sama dengan nama variabel yang menentukan class tersebut:
<div class:big={big}>
<!-- ... -->
</div>
Pada kasus seperti itu kita bisa menggunakan bentuk singkat:
<div class:big>
<!-- ... -->
</div>
Berikut adalah contoh ketika variabel big diset true saat checkbox dicentang, maka class dari div juga akan berubah menjadi big, jadi ukuran font juga akan menjadi lebih besar seperti seting di css.
<script>
let big = false;
</script>
<style>
.big {
font-size: 4em;
}
</style>
<label>
<input type=checkbox bind:checked={big}> big
</label>
<div class:big>
some {big ? 'big' : 'small'} text
</div>