Views & Slots
View declaration
The view { } block declares the component’s visual output as a tree of child component instances:
component App {
view {
ui.Column {
Header {}
Content {}
Footer {}
}
}
}The compiler generates a __init_view function that builds the child tree at instantiation.
Prop binding
Inside a component instance, bind props with name: expr; syntax:
view {
widgets.Label { text: "Hello"; fg: #333333; size: 24; }
widgets.Button { label: "Click"; bg: #4488CC; on_click: handle; }
}Event handlers are bound the same way — pass a function name.
Conditional rendering
component Profile {
prop logged_in: bool;
view {
ui.Column {
if (logged_in) {
UserPanel {}
} else {
LoginForm {}
}
}
}
}Conditions must be bool (no truthy values) and require parentheses.
List rendering
Use for (item in collection) to render a component for each element in a slice:
component TodoList {
prop items: []TodoData;
view {
ui.Column {
for (item in items) {
TodoItem { text: item.text; done: item.done; }
}
}
}
}Dotted component names
Components from imported modules use dotted names:
view {
ui.Column {
widgets.Button { label: "OK"; }
widgets.Label { text: status; }
}
}Slots
Slots let a component accept child content from its parent:
component Card {
prop title: *u8;
slot content;
slot footer;
view {
ui.Column {
widgets.Label { text: title; size: 18; }
content;
footer;
}
}
}A bare identifier followed by ; in a view tree is a slot reference — it renders whatever the parent provides.
Filling slots (parent side)
The parent fills slots using slot name { children }; syntax:
Card {
title: "Settings";
slot content {
SettingsForm {}
widgets.Label { text: "Options:"; }
};
slot footer {
widgets.Button { label: "Save"; on_click: save; }
};
}View tree control flow summary
| Construct | Syntax |
|---|---|
| Instance | Name { props; children; } |
| Dotted instance | module.Name { props; } |
| Conditional | if (cond) { ... } else { ... } |
| Loop | for (item in expr) { ... } |
| Slot reference | slot_name; |
Last modified: