Managing Text

Managing text

One of the most important parts of any website is text. And for dynamic websites, it's also important to have a solid way of updating text manually or reactively. Cardboard offers a few different ways of managing text.

Static Text

The most basic type of text you can have is one that does not change. You can do this by:

• Passing text as a child:

const el = div('I\'m not supposed to change!');
el.text('But I can');

By passing the text directly as a child of the tag, it will not change unless manually changed.

The text function

Cardboard offers a very simple way of interpolating state values in strings.

This can be done by using the text function,

by passing in an object state:

const st = state({ count: 0 });
const el = div(text('count: $count', st));

or a state, aka. observable object:

const count = state(0);
const el = div(text('count: $count', { count }));

Alternatively, this can also be done by using the tag.text() method.

The .text() method in the tag:

const st = state({ count: 0 });
const el = div().text('count: $count', st);

Adding state as child

You can also add the state value (or any Observable) directly.

const st = state('count: 0');
const el = div(st);