Svelte Tutorial 13: Classes (English & Indonesia)

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>