<%
const variant = 'primary';
const isActive = true;
const large = false;
const hasIcon = false;
%>
<a class="<%= stati.propValue(
'btn',
`btn-${variant}`,
isActive && 'is-active',
{ 'btn-lg': large, 'btn-disabled': !isActive },
['icon', hasIcon && 'icon-left']
) %>">Read more</a>
That renders class="btn btn-primary is-active icon":
- Strings and numbers are kept and falsy values (
false,null,undefined,'',0) dropped, so the conditions can sit right in the list. - An object adds each key whose value is truthy, an array its truthy items.
- It works for any attribute that takes space-separated words, such as
relor adata-attribute that holds a list. - It isn't for gluing a URL or an ID together. Use a template literal there:
href="<%= `/tags/${tag}` %>".
With Tailwind there's a bonus: every class it returns is also written to .stati/tailwind-classes.html, so a class built at render time, like `bg-${color}-500`, makes it into the CSS once that file is in Tailwind's content.
In the Stati docs: stati.propValue() and Dynamic classes with propValue.