77 lines
2.1 KiB
Markdown
77 lines
2.1 KiB
Markdown
# Reactive System
|
|
|
|
The reactive system in Basalt allows you to create dynamic property values using expressions. These expressions automatically update when related values change.
|
|
|
|
## Basic Usage
|
|
|
|
```lua
|
|
local basalt = require("basalt")
|
|
|
|
-- Create a simple label and center it horizontally
|
|
local main = basalt.getMainFrame()
|
|
:addLabel()
|
|
:setText("Hello World")
|
|
:setX("{parent.width / 2 - self.width / 2}") -- Centers the label horizontally
|
|
|
|
-- Create a progress bar that takes 80% of parent width
|
|
main:addProgressbar()
|
|
:setWidth("{parent.width * 0.8}")
|
|
:setX("{parent.width * 0.1}") -- 10% margin on both sides
|
|
```
|
|
|
|
## Available Variables
|
|
|
|
In reactive expressions, you have access to:
|
|
|
|
- `self` - The current element
|
|
- `parent` - The parent element
|
|
- `elementName` - A given name of a element
|
|
- Any property of these elements (width, height, value, text, etc.)
|
|
|
|
## Common Use Cases
|
|
|
|
### Responsive Layout
|
|
|
|
```lua
|
|
local frame = basalt.getMainFrame()
|
|
:addFrame()
|
|
:setSize("{parent.width * 0.5}", "{parent.height * 0.5}") -- Takes half of parent size
|
|
:setPosition("{parent.width / 2 - self.width / 2}", -- Centers the frame
|
|
"{parent.height / 2 - self.height / 2}")
|
|
```
|
|
|
|
### Dynamic Sizing
|
|
|
|
```lua
|
|
local label = frame:addLabel()
|
|
:setText("Dynamic width based on text")
|
|
:setWidth("{#self.text}") -- Width equals text length
|
|
```
|
|
|
|
### Linked Properties
|
|
|
|
```lua
|
|
local slider = frame:addSlider("mySlider")
|
|
:setPosition(2, 2)
|
|
:setSize(10, 1)
|
|
|
|
local progress = frame:addProgressBar()
|
|
:setPosition(2, 4)
|
|
:setSize(10, 1)
|
|
:setProgress("{mySlider.value}") -- Progress syncs with slider value
|
|
```
|
|
|
|
## Syntax
|
|
|
|
- Use curly braces `{}` to define a reactive expression
|
|
- Basic math operators are supported (+, -, *, /, %)
|
|
- Access properties using dot notation (element.property)
|
|
- Can use basic functions and comparisons
|
|
|
|
## Best Practices
|
|
|
|
1. Keep expressions simple and readable
|
|
2. Use meaningful variable names in complex calculations
|
|
3. Test expressions with different parent sizes
|
|
4. Consider edge cases (minimum/maximum sizes)
|