data-class

Overview

data-class dynamically adds or removes CSS classes based on data values. It supports three distinct modes for different use cases.

When to use:

• Toggle classes based on conditions
• Switch between two classes
• Add dynamic class names from data

Why use it:

• ✅ Three flexible binding modes
• ✅ Multiple class bindings in one attribute
• ✅ Reactive updates when data changes
• ✅ Clean separation from static classes

Basic Usage

Toggle a Class

<div data-class="active:isActive">Content</div>

With data:

{ isActive: true }

Output:

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

Syntax

data-class supports three modes:

Mode 1: Binding Mode

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

Toggle class based on truthiness of expression.

Mode 2: Ternary Mode

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

Switch between two classes.

Mode 3: Expression Mode

<element data-class="expressionReturningClassName">

Add class(es) from expression result.

Features

Mode 1: Binding Mode

Toggle one or more classes based on conditions:

<!-- Single class -->
<div data-class="active:isActive"></div>

<!-- Multiple classes -->
<div data-class="active:isActive, disabled:isDisabled, highlight:isHighlighted"></div>

Example:

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

Output:

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

Mode 2: Ternary Mode

Switch between two classes:

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

With isExpanded: true:

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

With isExpanded: false:

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

Mode 3: Expression Mode

Add class(es) from a data value:

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

With data:

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

Output:

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

Can combine with static classes:

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

Output:

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

Advanced Examples

Navigation Menu

<nav>
  <a href="/" data-class="active:currentPage === 'home'">Home</a>
  <a href="/about" data-class="active:currentPage === 'about'">About</a>
  <a href="/contact" data-class="active:currentPage === 'contact'">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>

Inside 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>

Complex Conditions

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

Theme Switching

<div class="app" data-class="theme">
  <!-- theme = 'dark-mode' or 'light-mode' -->
</div>

API Reference

Mode Detection

Expression Examples

Common Pitfalls

⚠️ 1. Mode Confusion

<!-- ❌ Binding mode needs colon -->
<div data-class="active"></div>

<!-- ✅ Correct binding mode -->
<div data-class="active:isActive"></div>

<!-- ✅ Or expression mode (adds class from data) -->
<div data-class="className"></div>  <!-- className = 'active' -->

⚠️ 2. Quotes in Ternary Mode

<!-- ❌ Wrong - no quotes -->
<div data-class="isActive ? active : inactive"></div>

<!-- ✅ Correct - with quotes -->
<div data-class="isActive ? 'active' : 'inactive'"></div>

⚠️ 3. Overwriting Static Classes

<!-- Static classes remain; data-class adds/removes dynamically -->
<div class="card base" data-class="active:isActive">
  <!-- Result: class="card base active" when isActive is true -->
</div>

⚠️ 4. Multiple Ternary in One Attribute

<!-- ❌ Can't have multiple ternary operations -->
<div data-class="a ? 'x' : 'y', b ? 'm' : 'n'"></div>

<!-- ✅ Use binding mode for multiple conditions -->
<div data-class="x:a, y:!a, m:b, n:!b"></div>

Comparison: Attribute vs data-class

<!-- Replace all classes -->
<div data-attr="class:'type-' + itemType"></div>

<!-- Add/remove specific classes -->
<div class="card" data-class="active:isActive"></div>

Related Directives

• data-attr - For setting the class attribute
• data-style - For inline styles
• data-if - For conditional rendering