shore/layout

Types

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

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.

pub fn split(left: Node(a), right: Node(a)) -> Node(a)

A layout which has a 50/50 split

Search Document