x:class Directive

The x:class directive adds or removes conditional CSS classes to HTML elements.

Basic Usage

Syntax

<element x:class:className="condition">

• className: CSS class name
• condition: Expression that returns a boolean value

Condition Types

Boolean Values

<div x:class:active="isActive">Active</div>
<div x:class:inactive="!isActive">Passive</div>

Comparison

<div x:class:current="status === 'current'">Current</div>
<div x:class:many="count > 10">Many</div>
<div x:class:empty="text.length === 0">Empty</div>

Nested Properties

@Widget({
  selector: '.nested-class',
  template: `
    <div x:class:valid="form.isValid">Form</div>
    <div x:class:premium="user.isPremium">User</div>
  `
})
export class NestedClassWidget {
  @xproperty()
  form = { isValid: false };
  
  @xproperty()
  user = { isPremium: true };
}

Computed Properties

@Widget({
  selector: '.computed-class',
  template: `
    <div x:class:editable="canEdit">Content</div>
    <div x:class:urgent="isUrgent">Status</div>
  `
})
export class ComputedClassWidget {
  @xproperty()
  user = { role: 'admin', permissions: ['edit'] };
  
  @xproperty()
  status: string = 'open';
  
  @xproperty()
  priority: string = 'high';
  
  @xcomputed({ dependencies: ['user.role', 'user.permissions'] })
  get canEdit(): boolean {
    return this.user.role === 'admin' || 
           this.user.permissions.includes('edit');
  }
  
  @xcomputed({ dependencies: ['status', 'priority'] })
  get isUrgent(): boolean {
    return this.status === 'open' && this.priority === 'high';
  }
}

Common Use Cases

Toggle States

<button x:class:active="isActive" x:on:click="toggle">Toggle</button>
<div x:class:visible="isVisible">Content</div>

Form States

<input x:class:invalid="hasError" x:class:valid="isValid">
<button x:class:loading="isSubmitting">Submit</button>

List States

<div x:class:selected="item.id === selectedId">Item</div>
<div x:class:empty="items.length === 0">List is empty</div>

Responsive Design

<div x:class:mobile="isMobileView">Content</div>
<div x:class:desktop="isDesktopView">Content</div>

Multiple Class Usage

<div 
  x:class:active="isActive" 
  x:class:loading="isLoading"
  x:class:error="hasError">
  Multiple classes
</div>

Summary

• Conditional classes: Add/remove classes based on boolean expressions
• Nested support: Access like user.isPremium
• Computed support: Usage with computed values
• Performance: Only changed classes are updated
• Multiple usage: Multiple class bindings on the same element