Salah satu fungsi data-binding yang banyak dipake adalah untuk ngerubah stylesheet, bisa yang inline atau pake class. Di bagian ke-3 seri tutorial pengenalan VueJS ini, saya mau bahas tentang CSS dinamis.
Style Binding
Kita pake v-bind:style
untuk ngerubah nilai atribut style
.
See the Pen VueJS – Dynamic CSS – style binding by Anggie Bratadinata (@masputih) on CodePen.
Ganti warna kotak pake text-input di bawahnya.
Properti CSS yang mau kita ubah bisa ditulis dalam bentuk, 'nama-properti'
(pake tanda kutip tunggal) atau namaProperti
. Jadi dua cara di bawah ini bisa dipake:
//pake ini
v-bind:style="{backgroundColor:color}"
//atau ini
v-bind:style="{'background-color':color}"
Class Binding
Untuk styling sederhana, style-binding di atas mungkin udah cukup. Tapi untuk kasus yang lebih rumit, class-binding lebih enak dipake.
Sintaks dasarnya kayak di bawah ini. Kelas CSS hanya ditempelin ke elemen kalo kondisinya bernilai true
.
v-bind:class="{ nama_class: kondisi }"
Jadi kalo kita punya kelas .error
yang hanya kita pake kalo kondisi error, kita bisa tulis:
v-bind:class="{error:isError}"
Contohnya begini:
See the Pen VueJS – Dynamic CSS – class binding 01 by Anggie Bratadinata (@masputih) on CodePen.
Coba ganti status lewat text-input jadi “error” / “success” (tanpa tanda kutip).
Kelas .error
hanya dipasang ke elemen <p>
kalo nilai balik isError
adalah true
. Kelas .success
juga tergantung nilai balik isSuccess
.
Object
Alih-alih nulis objek {a:isA,b:isB }
langsung di atribut class/style-binding, kita bisa juga pake objek dari data model / computed-property. Ini berguna terutama kalo styling-nya panjang, kombinasi beberapa kelas.
See the Pen VueJS – Dynamic CSS – class binding 02 by Anggie Bratadinata (@masputih) on CodePen.
Array
Selain pake sintaks objek, kita juga bisa pake array. Kalo pake sintaks objek ada mapping antara setiap kelas dengan kondisional/syarat yang harus bernilai true
, kalo pake array
nggak perlu. Jadi bisa dipake untuk kelas yang semi-statis, tetep ditempelin ke satu elemen, tanpa syarat, nggak tergantung kondisi tertentu.
<p v-bind:class="showThumb">
<!-- binding pake array -->
<i v-bind:class="['fa','fa-thumbs-up']"></i>
{{ status }}
</p>
Kita bisa kombinasi sintaks objek & array untuk binding kelas semi-statis & dinamis.
See the Pen VueJS – Dynamic CSS – class binding 03 by Anggie Bratadinata (@masputih) on CodePen.
Dalam contoh di atas, kelas .fa
nggak tergantung kondisi tertentu tapi kelas di belakangnya bisa kelas .fa-thumbs-up
atau .fa-star
tergantung nilai app.like
.
Jadi itu sedikit tentang CSS dinamis. Mudah-mudahan bermanfaat. Silakan coba-coba sendiri pake contoh kode di Codepen.
Also in this category ...
- » Flexbox
- » Mengenal Hook di ReactJS
- » Rust 101: Hello Rust
- » JS : Pemrograman Asinkron
- » End-to-end Testing dengan The Intern