data-class

Add or remove classes based on expressions: one class per key, or many from an object whose values are conditions.

Syntax

data-class:active="$page === 2"
data-class="{ active: $on, 'text-red text-bold': $error }"

part
key	optional: a class name (kebab-cased by default)
value	required: with a key, the condition; without one, an object of class: condition

Modifiers

modifier	effect
__case.camel	convert the key to camelCase (data-class:is-on__case.camel toggles isOn; HTML lowercases attribute names, so the key is written in kebab-case)

Keyed form

one class from one condition

I turn warm

<div data-signals="{ warm: false }">
  <button data-on:click="$warm = !$warm" data-class:hot="$warm">I turn warm</button>
</div>

Object form

Several classes, each with its own condition. A key may hold several space-separated classes that switch together.

several classes, multi-class keys

hot + rounded loud

styled by signals

<style>.live .rounded { border-radius: 999px } .live .loud { text-transform: uppercase; letter-spacing: .08em }</style>
<div data-signals="{ on: true, shout: false }">
  <div class="row"><label><input type="checkbox" data-bind:on> hot + rounded</label><label><input type="checkbox" data-bind:shout> loud</label></div>
  <button data-class="{ 'hot rounded': $on, loud: $shout }">styled by signals</button>
</div>

Combining with static classes

Classes already on the element are left alone; the directive only toggles the ones it owns and removes those when it unmounts.

static classes stay

one two three

Each button keeps its own tab class; only hot moves.

<div data-signals="{ active: 1 }">
  <div class="row">
    <button class="tab" data-class:hot="$active === 1" data-on:click="$active = 1">one</button>
    <button class="tab" data-class:hot="$active === 2" data-on:click="$active = 2">two</button>
    <button class="tab" data-class:hot="$active === 3" data-on:click="$active = 3">three</button>
  </div>
  <p class="muted">Each button keeps its own <code>tab</code> class; only <code>hot</code> moves.</p>
</div>

Notes

Conditions are coerced with !!, so 0, '', null and undefined remove the class. For a class name computed at runtime, use the object form with a computed key: data-class="{ [$tone]: true }"; when $tone changes, the key that disappeared from the object has its class removed.

Register

import { className } from 'sigmx/plugins'

Registering className adds 214 bytes brotli (238 gzip, 563 minified) on top of the core. See bundle sizes.