Properties

Last updated 9 months ago

Properties can be defined for components with the property keyword:

component Test {
property size : String = "small"
property color : String = "red"
‚Äč
fun render : Html {
<div>
<{ color }>
<{ size }>
</div>
}
}

Properties are referenced by name within the component (in styles, functions, getters, etc.).

Passing properties

Property values are passed to the component when it is rendered:

component Main {
fun render : Html {
<Test color="blue" size="big"/>
}
}

Things to remember:

  • The name of the property must:

    • start with a lowercase letter

    • contain only letters and numbers

  • All properties are type checked, attempting to set an incompatible value will show an error.