Just divider
| Result | Code |
|---|---|
 |
Text { text: "Lorem ipsum"; }
HR {}
Text { text: "Lorem ipsum"; }
HR {
hr-width: 75%;
hr-height: 5px;
hr-background: Palette.accent-background;
hr-border-radius: 5px;
vertical-padding: 15px;
}
Text { text: "Lorem ipsum"; } |
A frame around the objects with a caption. Any object can be inside. Any number of objects inside.
| Result | Code |
|---|---|
 |
LabelBorder {
Text { text: "One two three four five"; }
} |
 |
LabelBorder {
title: "Some label";
Button { text: "Lorem ipsum"; }
} |
 |
LabelBorder {
title: "* Your Age";
LineEdit { placeholder-text: "Please enter your age"; }
Text {
text: "Only 18+ \nThe administration can check your age.";
font-size: 10px;
color: Palette.foreground.with-alpha(0.4);
}
} |
 |
LabelBorder {
title: "Choose the answer";
width: 100%; // full width, not fit-content
label-font-size: 20px;
border-radius: 15px;
HorizontalLayout {
spacing: 10px;
for letter[indx] in ["A", "B", "C"]: Button {
text: "\{letter} : \{indx}";
}
}
} |
Drop-down menu. An analog of the <details> tag from html. There can be any number of elements inside.
| Result | Code |
|---|---|
 |
Dropdown {
title: "Question?";
Text { text: "Thank you for your question!"; }
} |
 |
Dropdown {
title: "Click to expand";
title-font-size: 20px;
border-radius: 18px;
header-background: true;
expanded: true;
width: 100%;
LineEdit { placeholder-text: "Element number 1"; }
Button { text: "Second(after first)"; }
Text { text: "Third is bronze"; }
} |
Selection via scroll wheels. Magnet adjusted to the nearest value. Swipe and scrolling are supported!
| Result | Code |
|---|---|
 |
property <int> selected-hour: 0;
property <int> selected-minute: 0;
property <int> selected-second: 0;
property <[string]> hours-model: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23",];
property <[string]> minutes-model: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59",];
property <[string]> seconds-model: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59",];
VerticalLayout {
HorizontalLayout {
alignment: center;
spacing: 10px;
WheelPicker {
sections: 5;
model: hours-model;
selected(index) => { selected-hour = index; }
}
WheelPicker {
sections: 5;
model: minutes-model;
selected(index) => { selected-minute = index; }
}
WheelPicker {
sections: 5;
model: seconds-model;
selected(index) => { selected-second = index; }
}
}
Button {
text: "Show time";
clicked => {
debug("\{selected-hour} : \{selected-minute} : \{selected-second}");
}
}
} |
 |
property <int> selected-day: 0;
property <int> selected-hour: 0;
property <int> selected-minute: 0;
property <[string]> dow-model: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
property <[string]> hours-model: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
property <[string]> minutes-model: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59",];
VerticalLayout {
spacing: 20px;
HorizontalLayout {
alignment: center;
spacing: 10px;
VerticalLayout {
WheelPicker {
width: 50px;
sections: 3;
reverse-scroll: true;
accent-color: gray.with-alpha(0.3);
model: dow-model;
selected(index) => { selected-day = index; }
}
HorizontalLayout { alignment: center; Text { text: "Day"; font-size: 14px; }}
}
VerticalLayout {
WheelPicker {
width: 150px;
sections: 5;
model: hours-model;
reverse-scroll: true;
accent-color: red;
selected(index) => { selected-hour = index; }
}
HorizontalLayout { alignment: center; Text { text: "Hour"; font-size: 14px; }}
}
VerticalLayout {
WheelPicker {
sections: 2;
model: minutes-model;
selected(index) => { selected-minute = index; }
}
HorizontalLayout { alignment: center; Text { text: "Minute"; font-size: 14px; }}
}
}
Button {
text: "Show";
clicked => {
debug("\{dow-model[selected-day]} \{selected-hour} : \{selected-minute}");
}
}
} |