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>