shore/layout

Types

pub type Cell(msg) =
  @internal Cell(msg)

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.

pub fn split(
  left: @internal Node(msg),
  right: @internal Node(msg),
) -> @internal Node(msg)

A layout which has a 50/50 split

Search Document