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>