class & style
Multiple classes with Array
Viewmodel:
{
classes: ["w32", "h32", "rounded-full", "mx-auto"];
}
Template:
<img class="{{ classes }}" />
Output:
<img class="w32 h32 rounded-full mx-auto" />
Static Conditional Classes with Object
Viewmodel:
{
classes: {
'mx-auto': true,
'has-error': false
}
}
Template:
<div class="{{ classes }}"></div>
Output:
<div class="mx-auto"></div>
Dynamic Conditional Classes with Getter + Object
Viewmodel:
{
hasErrors: true,
get classes() {
return {
errors: this.hasErrors
}
}
}
Template:
<form class="{{ classes }}"></form>
Output:
<form class="errors"></form>
Inline Styles
Viewmodel:
{
styles: {
display: "inline-block",
borderRadius: "3px",
background: primary ? "white" : "transparent",
color: primary ? "black" : "white",
border: "2px solid white",
}
}
Template:
<button primary style="{{ styles }}"></button>
Output:
<button
primary
style="
display: inline-block;
border-radius: 3px;
background: white;
color: black;
border: 2px solid white;"
></button>