data-class

ภาพรวม

data-class เพิ่มหรือลบ CSS classes แบบ dynamic ตามค่าข้อมูล รองรับสามโหมดสำหรับการใช้งานที่แตกต่างกัน

ใช้เมื่อ:

• สลับ classes ตามเงื่อนไข
• สลับระหว่างสอง classes
• เพิ่ม class names แบบ dynamic จากข้อมูล

ทำไมต้องใช้:

• ✅ สามโหมด binding ที่ยืดหยุ่น
• ✅ หลาย class bindings ใน attribute เดียว
• ✅ อัพเดทแบบ reactive เมื่อข้อมูลเปลี่ยน
• ✅ แยกออกจาก static classes อย่างชัดเจน

การใช้งานพื้นฐาน

สลับ Class

<div data-class="active:isActive">เนื้อหา</div>

กับข้อมูล:

{ isActive: true }

ผลลัพธ์:

<div class="active">เนื้อหา</div>

Syntax

data-class รองรับสามโหมด:

โหมด 1: Binding Mode

<element data-class="className:expression">

สลับ class ตามความเป็น true/false ของ expression

โหมด 2: Ternary Mode

<element data-class="condition ? 'classIfTrue' : 'classIfFalse'">

สลับระหว่างสอง classes

โหมด 3: Expression Mode

<element data-class="expressionReturningClassName">

เพิ่ม class(es) จากผลลัพธ์ของ expression

ฟีเจอร์

โหมด 1: Binding Mode

สลับหนึ่งหรือหลาย classes ตามเงื่อนไข:

<!-- Class เดียว -->
<div data-class="active:isActive"></div>

<!-- หลาย classes -->
<div data-class="active:isActive, disabled:isDisabled, highlight:isHighlighted"></div>

ตัวอย่าง:

{
  isActive: true,
  isDisabled: false,
  isHighlighted: true
}

ผลลัพธ์:

<div class="active highlight"></div>

โหมด 2: Ternary Mode

สลับระหว่างสอง classes:

<div data-class="isExpanded ? 'expanded' : 'collapsed'"></div>

กับ isExpanded: true:

<div class="expanded"></div>

กับ isExpanded: false:

<div class="collapsed"></div>

โหมด 3: Expression Mode

เพิ่ม class(es) จากค่าข้อมูล:

<i data-class="item.icon"></i>

กับข้อมูล:

{ item: { icon: "fa fa-user" } }

ผลลัพธ์:

<i class="fa fa-user"></i>

รวมกับ static classes:

<i class="icon" data-class="iconType"></i>

ผลลัพธ์:

<i class="icon fa fa-home"></i>

ตัวอย่างขั้นสูง

เมนูนำทาง

<nav>
  <a href="/" data-class="active:currentPage === 'home'">หน้าแรก</a>
  <a href="/about" data-class="active:currentPage === 'about'">เกี่ยวกับ</a>
  <a href="/contact" data-class="active:currentPage === 'contact'">ติดต่อ</a>
</nav>

Status Badges

<span class="badge" data-class="status === 'active' ? 'badge-success' : 'badge-secondary'">
  <span data-text="status | uppercase"></span>
</span>

Card Component

<div class="card"
     data-class="selected:isSelected, disabled:isDisabled, featured:isFeatured">
  <h3 data-text="title"></h3>
  <p data-text="description"></p>
</div>

Dynamic Icon

<button class="btn">
  <i class="icon" data-class="isLoading ? 'fa-spinner fa-spin' : 'fa-check'"></i>
  <span data-text="buttonText"></span>
</button>

ภายใน data-for Loop

<ul data-for="item in items">
  <template>
    <li data-class="active:item.isActive, completed:item.isCompleted">
      <span data-text="item.name"></span>
    </li>
  </template>
</ul>

เงื่อนไขซับซ้อน

<div data-class="
  error:hasError && !isLoading,
  success:isSuccess && !hasError,
  loading:isLoading
"></div>

สลับธีม

<div class="app" data-class="theme">
  <!-- theme = 'dark-mode' หรือ 'light-mode' -->
</div>

API อ้างอิง

การตรวจจับโหมด

ตัวอย่าง Expression

ข้อควรระวัง

⚠️ 1. ความสับสนของโหมด

<!-- ❌ Binding mode ต้องมี colon -->
<div data-class="active"></div>

<!-- ✅ Binding mode ที่ถูกต้อง -->
<div data-class="active:isActive"></div>

<!-- ✅ หรือ expression mode (เพิ่ม class จากข้อมูล) -->
<div data-class="className"></div>  <!-- className = 'active' -->

⚠️ 2. Quotes ใน Ternary Mode

<!-- ❌ ผิด - ไม่มี quotes -->
<div data-class="isActive ? active : inactive"></div>

<!-- ✅ ถูก - มี quotes -->
<div data-class="isActive ? 'active' : 'inactive'"></div>

⚠️ 3. ไม่เขียนทับ Static Classes

<!-- Static classes คงอยู่; data-class เพิ่ม/ลบแบบ dynamic -->
<div class="card base" data-class="active:isActive">
  <!-- ผลลัพธ์: class="card base active" เมื่อ isActive เป็น true -->
</div>

เปรียบเทียบ: Attribute vs data-class

<!-- แทนที่ classes ทั้งหมด -->
<div data-attr="class:'type-' + itemType"></div>

<!-- เพิ่ม/ลบ classes เฉพาะ -->
<div class="card" data-class="active:isActive"></div>

Directives ที่เกี่ยวข้อง

• data-attr - สำหรับกำหนด class attribute
• data-style - สำหรับ inline styles
• data-if - สำหรับแสดงแบบมีเงื่อนไข