Pages
Introduction
Getting Started
Recipes
Reference
Literals
Arrays
Tuples
Type System
Functions
Modules
Records
Enums
Built-in Types
Constants
Equality
Stores
Routing
Comments
Control Expressions
Components
Properties
Computed Properties
Styling Elements
Connecting Stores
Using Providers
Internal State
Referencing Entities
Global Components
Lifecycle Functions
Directives
JavaScript Interop
Environment Variables
Packages
if...else
The
if...else
conditional expression returns one of two values based on a condition.
It looks like this:
if condition {
value1
} else {
value2
}
There are some rules that will be enforced:
-
The
condition
must evaluate to typeBool
- The values of both branches must evaluate to the same type
-
The
else
branch must be present, if it's missing you will get a syntax error, this ensures you handle all possibilities.
Currently there is no shorthand for a conditional expression.
else if ...
Multiple
if...else
statements can be written in sequence:
if number > 5 {
true
} else if number > 2 {
true
} else {
false
}
Omitting else
The
else
branch can be omitted in two cases.
- in any HTML element
-
in
style
tags
This example shows both cases:
component Main {
state clicked : Bool = false
style base {
color: blue;
if clicked {
color: red;
}
}
fun handleClick : Promise(Void) {
next { clicked: true }
}
fun render : Html {
<div::base>
<div onClick={handleClick}>
"Click me!"
</div>
if clicked {
"I have been clicked!"
}
</div>
}
}