1.21.0 (4 Oct 2021)

sanand0 released this 08 Oct 09:05

· 17 commits to master since this release

acfa5d6

Add dynamic classes and styles with `:=`

For dynamic classes, set the class:= attribute to a array, object, or string:

class:="['x', 'y']" becomes class="x y"
class:="{x: true, y: false}" becomes class="x"
class:="['x', {y: true, z: false}]" becomes class="x y"
class:="${active ? 'yes' : 'no'}" becomes class="yes" is active is true, else class="no"

For dynamic styles, set the style:= attribute to an object or string:

style:="{'font-size': `${size}px`, color: 'red'}" becomes style="font-size:20px;color:red" (when size=20).
style:="font-size="${size}px; color: red" also becomes style="font-size:20px;color:red" (when size=20).

For dynamic attributes, set the <attr>:= attribute to any string or boolean expression:

disabled:="true" becomes "disabled"
disabled:="false" does not add the disabled attribute
type:="isNumeric ? 'number' : 'text'" sets type="number" if isNumeric is truthy, else type="text"

For example, this defines an <add-class> component:

<template $name="custom-input" active:boolean="true">
  <style>
    .round { border-radius: 20px; }
    .active { border: 1px solid red; }
  </style>
  <input
    class:="['round', {active: active}]"
    style:="{background-color: active ? 'lightblue' : 'white'}"
    disabled:="!active">
</template>

When you add this to your page:

Active: <custom-input active="true"></custom-input>
Inactive: <custom-input active="false"></custom-input>

... it renders:

Assets 2