Layout
17 posts tagged with "Layout"
.bottom-center
The .bottom-center action bottom center positions. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.bottom-center.bottom-left
The .bottom-left action bottom left position. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.bottom-left.bottom-right
The .bottom-right action positions in bottom right. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.bottom-right.column
The .column action a column element: children will appear in a vertical column. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Modifiers
hover-over
The .column action supports the hover-over modifier.
click-on
The .column action supports the click-on modifier.
Examples
// Basic Usage
.column.filler
The .filler action fills available space in a row. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.filler.grid
The .grid action .grid layout. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.grid.grid-cell
The .grid-cell action grid cell (must be defined after grid). It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.grid-cell.middle-center
The .middle-center action middle center position. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.middle-center.middle-left
The .middle-left action middle left position. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.middle-left.middle-right
The .middle-right action middle right position. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.middle-right.popup
The .popup action a centered pop up/modal layout container. It belongs to the layout category within the ui area.
Action Syntax
.popup "text".popup [file]Valid sizes
Tags
closebutton
shows a close button in top right
Examples
// Basic Usage
.popup "message".spacer
The .spacer action defines a spacer. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Tags
visible
makes the spacer border and size visible (usefule during app development)
Examples
// Basic Usage
.spacer.top-center
The .top-center action top center position. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.top-center.top-right
The .top-right action top right position. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.top-rightbackground-image
The background-image action Sets a full-screen background image for the entire app. It belongs to the layout category within the undefined area.
Action Syntax
background-image https://...background-image $variablebackground-image +imagetagTags
blur=5
opacity=0.8
fixed
Examples
// Basic Usage
background-image https://example.com/image.jpg// Using Variables
// Display dynamic content from variables
background-image $imageurlhide
The hide action hide specified element. It belongs to the layout category within the ui area.
Action Syntax
hide EValid sizes
Examples
// Basic Usage
hide *targetshow
The show action shows a hidden ui element. It belongs to the layout category within the ui area.
Action Syntax
show EValid sizes
Examples
// Basic Usage
show *target