Class & Style
Multiple classes with Array
Model:
{
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
Model:
{
classes: {
'mx-auto': true,
'has-error': false
}
}
Template:
<div class="{{ classes }}"></div>
Output:
<div class="mx-auto"></div>
Dynamic Conditional Classes with Getter + Object
Model:
{
hasErrors: true,
get classes() {
return {
errors: this.hasErrors
}
}
}
Template:
<form class="{{ classes }}"></form>
Output:
<form class="errors"></form>
Inline Styles
Model:
{
//...
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>