import{_ as i,a,b as e,ag as t}from"./chunks/framework.BcrMLAmg.js";const o=JSON.parse('{"title":"Reactive System","description":"","frontmatter":{},"headers":[],"relativePath":"guides/reactive.md","filePath":"guides/reactive.md","lastUpdated":1744373216000}'),n={name:"guides/reactive.md"};function l(h,s,k,p,r,E){return e(),a("div",null,s[0]||(s[0]=[t(`

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

Keep expressions simple and readable
Use meaningful variable names in complex calculations
Test expressions with different parent sizes
Consider edge cases (minimum/maximum sizes)

`,18)]))}const g=i(n,[["render",l]]);export{o as __pageData,g as default};

Reactive System ​

Basic Usage ​

Available Variables ​

Common Use Cases ​

Responsive Layout ​

Dynamic Sizing ​

Linked Properties ​

Syntax ​

Best Practices ​