Language Reference
Applicators Reference
Complete reference for Hypen applicators
Complete reference for all applicators in Hypen.
| Applicator | Description | Example |
|---|
| padding | Internal spacing | .padding(16) |
| padding(top, right, bottom, left) | Per-side padding | .padding(top: 16, left: 8) |
| padding(horizontal, vertical) | Axis padding | .padding(horizontal: 16, vertical: 8) |
| margin | External spacing | .margin(8) |
| gap | Child spacing | .gap(12) |
| rowGap | Row gap in grid | .rowGap(16) |
| columnGap | Column gap in grid | .columnGap(8) |
| Applicator | Description | Example |
|---|
| width | Fixed width | .width(200) |
| height | Fixed height | .height(100) |
| size | Both dimensions | .size(48) |
| minWidth | Minimum width | .minWidth(100) |
| maxWidth | Maximum width | .maxWidth(500) |
| minHeight | Minimum height | .minHeight(50) |
| maxHeight | Maximum height | .maxHeight(300) |
| fillMaxWidth | Fill width | .fillMaxWidth(true) |
| fillMaxHeight | Fill height | .fillMaxHeight(true) |
| fillMaxSize | Fill both | .fillMaxSize(true) |
| aspectRatio | Aspect ratio | .aspectRatio(16/9) |
| Applicator | Description | Example |
|---|
| color | Text color | .color("#333") |
| backgroundColor | Background | .backgroundColor("#fff") |
| opacity | Transparency | .opacity(0.5) |
| Applicator | Description | Example |
|---|
| fontSize | Text size | .fontSize(16) |
| fontWeight | Weight/boldness | .fontWeight("bold") |
| fontFamily | Font family | .fontFamily("Inter") |
| fontStyle | Style (italic) | .fontStyle("italic") |
| textAlign | Alignment | .textAlign("center") |
| lineHeight | Line height | .lineHeight(1.5) |
| textDecoration | Decoration | .textDecoration("underline") |
| Applicator | Description | Example |
|---|
| borderRadius | Corner radius | .borderRadius(8) |
| borderWidth | Border thickness | .borderWidth(1) |
| borderColor | Border color | .borderColor("#ccc") |
| Applicator | Description | Example |
|---|
| shadow | Shadow effect | .shadow(blur: 8) |
| elevation | Android elevation | .elevation(4) |
| Applicator | Description | Example |
|---|
| horizontalAlignment | Horizontal align | .horizontalAlignment("center") |
| verticalAlignment | Vertical align | .verticalAlignment("center") |
| weight | Flex weight | .weight(1) |
| flex | Flex shorthand | .flex(1) |
| flexGrow | Grow factor | .flexGrow(1) |
| flexShrink | Shrink factor | .flexShrink(0) |
| Applicator | Description | Example |
|---|
| gridColumns | Number of columns | .gridColumns(3) |
| gridTemplateColumns | Column template | .gridTemplateColumns("1fr 2fr 1fr") |
| Applicator | Description | Example |
|---|
| bind | Two-way state binding | .bind(@state.name) |
The .bind() applicator provides two-way data binding for form elements. It maps to the correct property per element type:
- Input / Textarea: Binds
value (String)
- Checkbox: Binds
checked (Boolean)
- Switch: Binds
on (Boolean)
- Select: Binds
value (String)
Input(placeholder: "Name").bind(@state.name)
Checkbox {}.bind(@state.agreed)
Switch {}.bind(@state.darkMode)
Select {}.bind(@state.country)
