Function each

Render a CTag for each item in the provided list.

each can work with a goold old array, or with a IConsumable. If you provide a Consumable, the list will update whenever the Consumable changes.

See

https://github.com/nombrekeff/cardboard-js/wiki/Logic

Example

Static list

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
div(
    each(colors, (color) =>
       button(color).addStyle('color', color)
    )
);
Copy

Example

Dynamic list

 const colors = state(['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']);
 const selectedColor = state('red');
 div(
   each(colors, (color) =>
       button(color)
        .addStyle('color', color)
        .stylesIf(equalTo(selectedColor, color), { fontWeight: 'bold' });
   )
 );
Copy