Classes

1link<div class='greeting red'>Hellow World!</div>

1link<div class={['greeting', 'red']}>Hellow World!</div>

linkDynamic Classes

Provide callbags in the array to dynamically switch the class:

1linkconst timer = interval(1000);

2linkconst _class = expr($ => $(timer) % 2 ? 'blue': 'red');

3link

4linkrenderer.render(

5link  <div class={['greeting', _class]}>Hellow World!</div>

6link).on(document.body);

linkClass Maps

Provide class maps (mapping class names to booleans or callbags of booleans) to dynamically toggle classes:

1linkconst timer = interval(1000);

2linkconst even = expr($ => $(timer) % 2);

3link

4linkrenderer.render(

5link  <div class={{ bold: even, greeting: true }}>Hellow World!</div>

6link).on(document.body);

👉 Or use combinations of arrays and class maps:

1linkconst timer = interval(1000);

2linkconst even = expr($ => $(timer) % 2);

3link

4linkrenderer.render(

5link  <div class={['greeting', { bold: even }]}>Hellow World!</div>

6link).on(document.body);