Conditionals - wiresnchains/wave GitHub Wiki

Conditionals

  • You can show/hide the element with a sort of an if-statement inside of the HTML using the wave-condition attribute.

Tokens

  • string - Defined using a quote (' or ")
  • boolean - Defined using true or false
  • number - Defined by writing a number without any other tokens
  • WaveStore data - Defined by simply writing the name of the variable

Logical Operators

  • = Equal to
  • > More than
  • >= More than or equal to
  • <= Less than
  • <= Less than or equal to

Example

<h2 wave-condition="true = true">This will always be visible</h2>
<h2 wave-condition="false = true">This will always be invisible</h2>
<h2 wave-condition="myVariable > 10">This will always be visible as long as the `myVariable` was set in the WaveStore and it is more than 10</h2>
⚠️ **GitHub.com Fallback** ⚠️