Plushie.Widget.Grid (Plushie v0.6.0)

Grid layout -- arranges children in a fixed-column grid.

Props

columns (integer) -- number of columns. Default: 1.
spacing (number) -- spacing between grid cells in pixels. Default: 0.
width (number) -- grid width in pixels.
height (number) -- grid height in pixels.
column_width (Length) -- width of each column. Accepts :fill, :shrink, {:fill_portion, n}, or a fixed pixel number.
row_height (Length) -- height of each row. Accepts :fill, :shrink, {:fill_portion, n}, or a fixed pixel number.
fluid (number) -- enables fluid grid mode. The value is the max cell width in pixels; columns auto-wrap to fit the available width.
a11y (map) -- accessibility overrides. See Plushie.Type.A11y.

Summary

Types

option()

t()

Functions

a11y(grid, a11y)

Sets accessibility annotations.

build(grid)

Converts this grid struct to a ui_node() map via the Plushie.Widget protocol.

column_width(grid, column_width)

Sets the column width using a Length value (fill/shrink/fixed/fill_portion).

columns(grid, columns)

Sets the number of columns.

extend(grid, children)

Appends multiple children to the grid.

fluid(grid, max_width)

Enables fluid grid mode. The value is the max cell width in pixels; columns auto-wrap.

height(grid, height)

Sets the grid height in pixels.

new(id, opts \\ [])

Creates a new grid struct with optional keyword opts.

push(grid, child)

Appends a child to the grid.

row_height(grid, row_height)

Sets the row height using a Length value (fill/shrink/fixed/fill_portion).

spacing(grid, spacing)

Sets the spacing between grid cells in pixels.

width(grid, width)

Sets the grid width in pixels.

with_options(grid, opts)

Applies keyword options to an existing grid struct.

Types

option()

@type option() ::
  {:columns, pos_integer()}
  | {:spacing, number()}
  | {:width, number()}
  | {:height, number()}
  | {:column_width, Plushie.Type.Length.t()}
  | {:row_height, Plushie.Type.Length.t()}
  | {:fluid, number()}
  | {:a11y, Plushie.Type.A11y.t() | map() | keyword()}

t()

@type t() :: %Plushie.Widget.Grid{
  a11y: Plushie.Type.A11y.t() | nil,
  children: [Plushie.Widget.child()],
  column_width: Plushie.Type.Length.t() | nil,
  columns: pos_integer() | nil,
  fluid: number() | nil,
  height: number() | nil,
  id: String.t(),
  row_height: Plushie.Type.Length.t() | nil,
  spacing: number() | nil,
  width: number() | nil
}

Functions

build(grid)

@spec build(grid :: t()) :: Plushie.Widget.ui_node()

Converts this grid struct to a ui_node() map via the Plushie.Widget protocol.

column_width(grid, column_width)

@spec column_width(grid :: t(), column_width :: Plushie.Type.Length.t()) :: t()

Sets the column width using a Length value (fill/shrink/fixed/fill_portion).

columns(grid, columns)

@spec columns(grid :: t(), columns :: pos_integer()) :: t()

Sets the number of columns.

extend(grid, children)

@spec extend(grid :: t(), children :: [Plushie.Widget.child()]) :: t()

Appends multiple children to the grid.

fluid(grid, max_width)

@spec fluid(grid :: t(), max_width :: number()) :: t()

Enables fluid grid mode. The value is the max cell width in pixels; columns auto-wrap.

height(grid, height)

@spec height(grid :: t(), height :: number()) :: t()

Sets the grid height in pixels.

new(id, opts \\ [])

@spec new(id :: String.t(), opts :: [option()]) :: t()

Creates a new grid struct with optional keyword opts.

push(grid, child)

@spec push(grid :: t(), child :: Plushie.Widget.child()) :: t()

Appends a child to the grid.

row_height(grid, row_height)

@spec row_height(grid :: t(), row_height :: Plushie.Type.Length.t()) :: t()

Sets the row height using a Length value (fill/shrink/fixed/fill_portion).

spacing(grid, spacing)

@spec spacing(grid :: t(), spacing :: number()) :: t()

Sets the spacing between grid cells in pixels.

width(grid, width)

@spec width(grid :: t(), width :: number()) :: t()

Sets the grid width in pixels.

with_options(grid, opts)

@spec with_options(grid :: t(), opts :: [option()]) :: t()

Applies keyword options to an existing grid struct.