Style di Vue JS

Kali ini aku akan membahas tentang style di Vue JS. Vue memiliki cara yang unik untuk menambahkan style pada template. Kita bisa menambahkan template dengan object dan boolean–lho, kok bisa? 🤔 Bagaimana sih melakukan itu? Yuk, kita kupas bersama.😁

Pertama kita akan bahas cara menambahkan style menggunakan boolean. Sebenarnya boolean tidak dijadikan sebagai style, tapi sebagai penanda apakah style aktif atau tidak aktif. Untuk lebih jelasnya perhatikan source code dari komponen berikut ini:

<script setup lang="ts">
  import {ref} from "vue";

  const isBlue = ref(false);
  const isLined = ref(false);
  const captionBlue = ref("Turn On Blue");
  const captionLined = ref("Add Line");

  function toggleBlue() {
    if (isBlue.value) {
      isBlue.value = false;
      captionBlue.value = "Turn On Blue";
    } else {
      isBlue.value = true;
      captionBlue.value = "Turn Off Blue";
    }
  }

  function toggleLine() {
    if (isLined.value) {
      isLined.value = false;
      captionLined.value = "Remove Line";
    } else {
      isLined.value = true;
      captionLined.value = "Add Line";
    }
  }

</script>

<template>
  <h1 :class="{blue: isBlue, lined: isLined}">This is Title</h1>
  <button @click="toggleBlue">{{captionBlue}}</button>
  <button @click="toggleLine">{{captionLined}}</button>
</template>

<style scoped>
.blue {
  color: blue;
}

.lined {
  text-decoration: line-through;
}
</style>

Nah, pada bagian script, kita punya 4 buah state yang bisa berubah-ubah, yaitu isBlue, isLined, captionBlue dan captionLined. State isBlue dan isLined digunakan pada template, yaitu pada :class=”{blue: isBlue, lined: isLined}”. blue dan lined mengacu pada selector .blue dan .lined pada <style>. Pada contoh di atas captionBlue dan captionLined adalah text yang digunakan pada button. Hasil dari contoh di atas adalah seperti berikut ini:

Pada tampilan di atas, ketika kita klik tombol “Turn On Blue”, maka tulisan This is Title akan berubah warna menjadi biru dan tombolnya akan berganti juga dengan tulisan Turn Off Blue. Begitu juga saat kita klik tombol Add Line, maka tulisannya akan bergaris dan tombolnya berubah menjadi Remove Line.

Menggunakan Array untuk Style di Vue JS

Selain cara sebelumnya, kita bisa menggunakan array untuk mengisi attribute :class. Perlu diperhatikan elemen dari array adalah nama selector yang ada pada style. Untuk lebih jelasnya mari kita lihat contoh berikut ini.

<script setup lang="ts"></script>

<template>
  <h1>Example 2</h1>
  <h2 :class="['blue', 'lined']">This is Second Example</h2>
</template>

<style scoped>
.blue {
  color: blue;
}

.lined {
  text-decoration: line-through;
}
</style>

Pada contoh di atas, kita menggunakan array [‘blue’, ‘lined’] mengacu pada .blue dan .lined yang ada pada style. Mungkin teman-teman berfikir apakah bisa array tersebut disimpan dalam state? tentu saja bisa, untuk melakukan itu, kita harus membuat dulu statenya di script, lalu kita panggil saja dengan :class=”arrayStyle”. Codingnya bagaimana sih? teman-teman coba sendiri ya. 😉

Menambahkan Style dengan Object

Selain 2 cara sebelumnya, kita bisa lho menambahkan style menggunakan object. Jadi, attribute object yang kita buat nanti merepresentasikan blok deklarasi style. Misalnya kita punya style seperti ini:

.redUppercase {
  color: red;
  text-transform: uppercase;
}

Maka untuk object typescript-nya kita buat seperti ini.

const redUppercase: {color: string, textTransform: string} = reactive({
  color: "red",
  textTransform: "uppercase"
});

Perlu diperhatikan nama property yang menggunakan tanda (-) harus kita ubah menjadi bentuk camel case, contohnya adalah text-transform diubah menjadi textTransform. Lalu gimana caranya menggunakan di template? 🤔 Tenang saja, caranya mudah kok. Kita tinggal memasukkannya ke :style. Sekali lagi, dimasukkan ke :style ya, bukan ke :class. Perhatikan contoh berikut.

<script setup lang="ts">
import {reactive} from "vue";

const redUppercase: {color: string, textTransform: string} = reactive({
  color: "red",
  textTransform: "uppercase"
});

const italicUnderlined: {fontStyle: string, textDecoration: string} = reactive({
  fontStyle: "italic",
  textDecoration: "underline"
});
</script>

<template>
  <h1>Example 3</h1>
  <h2 :style="redUppercase">This is Third Example</h2>
  <h2 :style="[redUppercase, italicUnderlined]">This is Third Example</h2>
</template>

<style scoped>
</style>

Jika hanya menggunakan 1 object style maka kita bisa langsung menggunakan :style=”redUppercase”. Namun, jika lebih dari 1 object style, kita harus memasukkan array ke dalam :style.

Menggunakan style di Vue JS cukup mudah dan menarik kan? 😁. Aku sebenarnya ingin membahas lebih banyak lagi, tapi tulisan ini sudah kepanjangan. Aku takut nanti teman-teman menjadi bosan membaca tulisan yang terlalu panjang. 😅 Lain kali akan aku sambung dengan materi lain tentang Vue JS. Tunggu ya.