Add Class To Element Javascript Lwc

MUAZHAN

3 min read

·

Jun 22, 2024

35

Share

Menambahkan Class ke Elemen di Lightning Web Components (LWC)

Lightning Web Components (LWC) adalah framework JavaScript untuk membangun komponen web yang dapat digunakan di Salesforce. Untuk mempercantik tampilan dan fungsionalitas komponen LWC, kita sering kali perlu menambahkan class CSS ke elemen HTML. Artikel ini akan membahas cara menambahkan class ke elemen di LWC.

Cara Menambahkan Class ke Elemen di LWC

Ada tiga cara utama untuk menambahkan class ke elemen di LWC:

1. Melalui Atribut HTML: Cara ini paling sederhana dan sering digunakan untuk menambahkan class secara statis.

2. Menggunakan JavaScript: Cara ini memungkinkan Anda menambahkan class secara dinamis berdasarkan kondisi atau interaksi pengguna.

   import { LightningElement } from 'lwc';
   
   export default class MyComponent extends LightningElement {
       connectedCallback() {
           const myDiv = this.template.querySelector('.my-div');
           myDiv.classList.add('active');
       }
   }
   

   Penjelasan Kode:

   • this.template.querySelector('.my-div') mengambil elemen HTML dengan class my-div.
   • classList.add('active') menambahkan class active ke elemen yang dipilih.

3. Dengan Expression Binding: Cara ini memungkinkan Anda untuk menambahkan class secara dinamis dengan mengikatnya ke properti JavaScript.

   import { LightningElement } from 'lwc';
   
   export default class MyComponent extends LightningElement {
       isActive = false;
   }
   

   Penjelasan Kode:

   • isActive adalah properti Boolean yang menandakan apakah class active harus ditambahkan.
   • Expression binding {isActive ? 'active' : ''} menambahkan class active jika isActive bernilai true, dan tidak menambahkan class jika isActive bernilai false.

Rekomendasi

• Gunakan cara 1 untuk menambahkan class secara statis ke elemen HTML.
• Gunakan cara 2 untuk menambahkan class secara dinamis berdasarkan kondisi atau interaksi pengguna.
• Gunakan cara 3 untuk menambahkan class secara dinamis dengan mengikatnya ke properti JavaScript.

Dengan memahami ketiga cara ini, Anda dapat dengan mudah menambahkan class ke elemen di LWC dan mengontrol tampilan komponen Anda secara dinamis.