shore/layout
Types
Values
pub fn cell(
content content: Node(a),
row row: #(Int, Int),
col col: #(Int, Int),
) -> Cell(a)
A Cell is an item within a Grid. Use Cells to define how many rows and columns the content should cover.
pub fn center(
content: Node(a),
width: Size,
height: Size,
) -> Node(a)
A layout which centers vertically and horizontally
pub fn grid(
gap gap: Int,
rows rows: List(Size),
cols cols: List(Size),
cells cells: List(Cell(a)),
) -> Node(a)
A grid-based layout defining rows and columns which contain cells and the gaps between them.
This should be remeniscent of CSS Grid. You define a list of rows and columns by size, then use Cells to fill the rows/columns to create descrete areas of ui elements.
Consider using some of the default provided layouts, such as
layout_center
and layout_split
or view the examples/layouts for more
complex custom layouts.
Note: Layouts can be nested as long as it is the only child of a cell.