Halo teman-teman semuanya, di artikel sebelumnya kita sudah belajar tentang x-for untuk melakukan perulangan data. Sekarang kita akan masuk ke pembahasan yang nggak kalah penting, yaitu bagaimana cara mengubah tampilan elemen secara dinamis menggunakan Class dan Style Binding di Alpine.js.
Dengan binding class dan style, kita bisa menyesuaikan tampilan elemen berdasarkan kondisi atau data yang ada di dalam komponen Alpine.
Class Binding dengan :class
Kita bisa menggunakan directive :class (atau x-bind:class) untuk mengatur class CSS berdasarkan kondisi tertentu.
-
Contoh Sederhana
<div x-data="{ aktif: true }">
<button @click="aktif = !aktif">Toggle</button>
<p :class="aktif ? 'text-green-600' : 'text-red-600'">Status: <span x-text="aktif ? 'Aktif' : 'Nonaktif'"></span></p>
</div>
Di contoh ini, warna teks akan berubah menjadi hijau saat status aktif, dan merah saat nonaktif.
-
Object Syntax
Kita juga bisa pakai object agar lebih fleksibel:
<p :class="{ 'bg-blue-500': aktif, 'bg-gray-300': !aktif }">
Kondisi Background
</p>
Style Binding dengan :style
Kalau kita ingin mengubah gaya (style) langsung, kita bisa gunakan :style.
<div x-data="{ lebar: 100 }">
<input type="range" min="50" max="300" x-model="lebar">
<div :style="{ width: lebar + 'px', height: '50px', backgroundColor: 'skyblue' }">
Lebar: <span x-text="lebar"></span>px
</div>
</div>
Pada contoh di atas, lebar kotak akan berubah secara real-time sesuai nilai slider.
Menggabungkan Class dan Style
Tentu saja, kita juga bisa menggabungkan keduanya dalam satu elemen:
<div x-data="{ aktif: false }">
<button @click="aktif = !aktif">Toggle</button>
<p
:class="{ 'font-bold': aktif }"
:style="{ color: aktif ? 'green' : 'gray' }"
>
Ini teks yang berubah!
</p>
</div>
Catatan Tambahan
:class dan :style adalah shorthand dari x-bind:class dan x-bind:style.- Binding ini sangat cocok dipakai bersama data atau kondisi yang berubah secara interaktif.
- Cocok banget dikombinasikan dengan framework CSS seperti Tailwind CSS.
Kesimpulan
Di artikel ini, kita sudah belajar cara mengatur class dan style HTML secara dinamis menggunakan Alpine.js. Dengan :class dan :style, tampilan aplikasi kita jadi lebih interaktif dan responsif terhadap perubahan data.
Pada artikel berikutnya, kita semua akan belajar tentang Component & Reusable Code di Alpine.js.
Terima Kasih