-
Notifications
You must be signed in to change notification settings - Fork 0
Tutorial EzLang Layout Modes Box
ddbnl edited this page Aug 26, 2022
·
3 revisions
In Box mode objects are placed from left to right (orientation: horizontal) or top to bottom (orientation: vertical). This is the simplest layout mode and is useful in many scenarios. An example of a vertical box mode layout could be a menu (a set of buttons placed under one another):
- <CustomButton@Button>:
fg_color: yellow
bg_color: blue
auto_scale: true, true
- Layout:
mode: box
orientation: vertical
- CustomButton:
text: Option 1
- CustomButton:
text: Option 2
- CustomButton:
text: Option 3
It can often be useful to nest Box layouts in other Box layouts to divide the screen into rectangles. Let's say for example we want two menus, one on the left side of the screen and one on the right. We could divide the screen horizontally with a Box layout, and then add two vertical Box layouts (one menu for each side of the screen):
- <CustomButton@Button>:
fg_color: yellow
bg_color: blue
auto_scale: true, true
- Layout:
mode: box
orientation: horizontal
- Layout:
mode: box
orientation: vertical
border: true
- CustomButton:
text: Left option 1
- CustomButton:
text: Left option 2
- CustomButton:
text: Left option 3
- Layout:
mode: box
orientation: vertical
border: true
- CustomButton:
text: Right option 1
- CustomButton:
text: Right option 2
- CustomButton:
text: Right option 3
The general tutorial continues with: EzLang Stack mode layouts.
Tutorial
Tutorial-Project-StructureMinimal example
EzLang
EzLang basics
EzLang Templates
Ezlang Layout modes
EzLang Box mode layouts
EzLang Stack mode layouts
EzLang Table mode layouts
EzLang Float mode layouts
EzLang Tab mode layouts
EzLang Screen mode layouts
EzLang Layout Scrolling
EzLang Layout Views
EzLang Widget overview
EzLang Label
EzLang Text Input
EzLang Button
EzLang Checkbox
EzLang Radio button
EzLang Dropdown
EzLang Slider
EzLang Canvas
EzLang Property Binding
EzLang Sizing
EzLang Size hints
EzLang Auto scaling
EzLang Maths Sizing
EzLang Manual Sizing
EzLang Positioning
EzLang Layout Mode Positioning
EzLang Position Hints
EzLang Position Maths
EzLang Manual Position
EzLang Adjusting Position
EzLang Keyboard Selection
Scheduler
Widget States and the State Tree
The Scheduler Object
Managing callbacks
Callback Structure
Callback Configs
Callback: On keyboard enter
Callback: On Left Mouse Click
Callback: On Press
Callback: On Select
Callback: On Deselect
Callback: On Right Mouse Click
Callback: On Hover
Callback: On Drag
Callback: On Scroll Up
Callback: On Scroll Down
Callback: On Value Change
Callback: Custom Key Binds
Callback: Global Key Binds
Callback: Property Binds
Tasks
Scheduled Single Exectution Tasks
Scheduled Recurring Tasks
Threaded Tasks
Custom Properties
Modals
Programmatic Widgets
Updating widgets
Managing selection
Default global (key)binds
Performance
Examples
Layout: Box Mode NestedLayout: Box Mode Size Hints
Layout: Stack Mode
Layout: Table Mode Dynamic
Layout: Table Mode Static
Layout: Float Mode Manual
Layout: Float Mode Position hints
Layout: Screen Mode
Layout: Tab Mode
Layout: Scrolling
Layout: Views
Widget: Label
Widget: Text input
Widget: Button
Widget: Checkbox
Widget: Radio Button
Widget: Dropdown
Widget: Slider
Widget: Progress Bar
Widget: Canvas
Scheduler: Schedule Once
Scheduler: Schedule Once Callback
Scheduler: Schedule Recurring
Scheduler: Schedule Recurring Callback
Scheduler: Threaded Task State Tree
Scheduler: Threaded Task Custom Property
Scheduler: Create Widgets
Scheduler: Modal Popup
Reference
WidgetsCommon Properties
Label
Text Input
Button
Checkbox
Radio button
Dropdown
Slider
Canvas
Scheduler
Schedule once
Schedule Recurring
Schedule Threaded
Cancel Task
Cancel Recurring Task
Create Widget
Remove Widget
Select Widget
Deselect Widget
Update Widget
Force Redraw
Open Modal
Dismiss Modal
Bind Global Key
Remove Global Key
Clear Global Keys
Bind Property
Create Custom Properties
Get Property
Get Property Mut
Overwrite Callback Config
Update Callback Config
Exit