Layout

Latitude provides a set of layout components to help you build your views. These components are designed to be used in combination with each other to create complex layouts. They are also designed to be responsive and work well on all devices.

​

View

The View component is the root container that allows you to define layout properties for your views.

<View>
    {/* Your content here */}
</View>

You can set the following properties on the View component:

​

Flexbox model

The flexbox model is a one-dimensional layout model that allows you to align items in a container. It is a powerful layout tool that allows you to create complex layouts with ease.

We’ve prepared a set of components that make it easy to use the flexbox model in your views:

​

Row

The Row component is a container that lays out its children in a row. It is a flex container with a flexDirection of row by default.

<Row>
    {/* Your content here */}
</Row>

You can set the following properties on the Row component:

​

Column

The Column component is a container that lays out its children in a column. It is a flex container with a flexDirection of column by default.

<Column>
    {/* Your content here */}
</Column>

You can set the following properties on the Row component:

​

Combining components

You can combine the Row and Column components within a View to create complex layouts. For example, you can use two Column components inside a Row component to create a sidebar and main content area.

<View theme='latitude'>
    <Row gap={8}>
        <Column>
            {/* Sidebar content */}
        </Column>
        <Column>
            {/* Main content */}
        </Column>
    </Row>
</View>