-
Notifications
You must be signed in to change notification settings - Fork 0
Logic Components
Brandon Jordan edited this page May 26, 2024
·
7 revisions
This component provides methods for adding conditional logic.
If is a simple conditional component.
Example:
// ...
Div([
If(variable, [
Paragraph("Hey! 'variable' evaluates to true :)")
]),
]),
// ...You can add Else and ElseIf methods to chain conditional logic.
Example:
// ...
Div([
If(variable, [
Paragraph("Hey! 'variable' evaluates to true :)")
]).Else([
Paragraph("Hey! 'variable' evaluates to false :(")
])
]),
// ...// ...
Div([
If(variable, [
Paragraph("Hey! 'variable' evaluates to true :)")
]).ElseIf(variable === "hello, world!", [
Paragraph("Hey! 'variable' evaluates to false :(")
])
]),
// ...Example:
// ...
Div([
Switch(n)
.Case(1, [
// ...
])
// ...
.Default([
// ...
])
.EndSwitch()
]),
// ...The ForEach() component takes an object or array and a callback which is provided with the value and the key of each item in the object or array and is expected to return an array of elements.
const items = {
"Key1": "Value1",
"Key2": "Value2",
"Key3": "Value3"
};
// ...
ForEach(items, (value, key, index) => {
return [
Paragraph(`${index} - ${key}: ${value}`)
]
}),
// ...const items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];
// ...
ForEach(items, (value, key, index) => {
return [Paragraph("Item " + (index + 1))];
}),
// ...Device is an object with the following methods
Mobile(components)NotMobile(components)Small(components)Medium(components)Large(components)
Device.Mobile([
Paragraph("Hello, Mobile User :)")
])