Links

cell

Overview

One or more cells can be placed in a grid to specify the size and position of components in a column- and row-based layout. Cells can span multiple columns or rows in a grid.
Note that specifying cell inside a grid is optional. Each component inside a grid will be interpreted as being inside a cell if cell isn’t specified.
To illustrate, the following will look and work the same in an app:
main.view.xml
<grid>
<text-input label="First name" bind="first_name" required="false" />
<text-input label="Last name" bind="last_name" required="false" />
</grid>
main.view.xml
<grid>
<cell>
<text-input label="First name" bind="first_name" required="false" />
</cell>
<cell>
<text-input label="Last name" bind="last_name" required="false" />
</cell>
</grid>
Note: Components inside a cell are always aligned to the top of the cell.

Basic Example

See the basic example for grid.

Standard Attributes

None

Advanced Attributes

column-span

Optional
Type: integer
Default: 1
Specify the number of columns the cell should span.
main.view.xml
<grid>
<cell column-span="2">
<text-input label="First name" bind="first_name" required="false" />
</cell>
<cell>
<button label="Button" />
</cell>
</grid>

row-span

Optional
Type: integer
Default: 1
Specify the number of rows the cell should span.
main.view.xml
<grid column-count="2">
<cell row-span="2">
<text-input label="First name" bind="first_name" required="false" />
</cell>
<cell>
<button label="Button 1" />
</cell>
<cell>
<button label="Button 2" />
</cell>
</grid>

show-if and hide-if

Component Methods

None
Last modified 10mo ago