shore/layout
Types
Values
pub fn cell(
content content: @internal Node(msg),
row row: #(Int, Int),
col col: #(Int, Int),
) -> @internal Cell(msg)
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: @internal Node(msg),
width: style.Size,
height: style.Size,
) -> @internal Node(msg)
A layout which centers vertically and horizontally
pub fn grid(
gap gap: Int,
rows rows: List(style.Size),
cols cols: List(style.Size),
cells cells: List(@internal Cell(msg)),
) -> @internal Node(msg)
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
center
and 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.