Plushie.Widget.Container (Plushie v0.6.0)

Copy Markdown View Source

Container layout -- wraps a single child with padding, sizing, and styling.

Props

  • padding (number | map) -- padding inside the container. See Plushie.Type.Padding.

  • width (length) -- container width. Default: shrink. See Plushie.Type.Length.
  • height (length) -- container height. Default: shrink.
  • max_width (number) -- maximum width in pixels.
  • max_height (number) -- maximum height in pixels.
  • center (boolean) -- center child in both axes. Default: false.
  • clip (boolean) -- clip child that overflows. Default: false.
  • align_x -- horizontal alignment: :left, :center, :right. See Plushie.Type.Alignment.
  • align_y -- vertical alignment: :top, :center, :bottom. See Plushie.Type.Alignment.

  • background (color | gradient) -- background fill. Accepts a hex color string, %{r, g, b, a} map, or a gradient map. See Plushie.Type.Color, Plushie.Type.Gradient.

  • color (color) -- text color override. See Plushie.Type.Color.
  • border (map) -- border specification: %{color, width, radius}. See Plushie.Type.Border.
  • shadow (map) -- shadow specification: %{color, offset, blur_radius}. See Plushie.Type.Shadow.
  • style -- named preset (:transparent, :rounded_box, :bordered_box, :dark, :primary, :secondary, :success, :danger, :warning) or StyleMap.t(). Overrides inline style props if both are set.
  • a11y (map) -- accessibility overrides. See Plushie.Type.A11y.

Summary

Types

option()
preset()
style()
t()

Functions

a11y(c, a11y)

Sets accessibility annotations.

align_bottom(container, height \\ :fill)

Aligns content to the bottom. Sets height and align_y: :bottom.

align_left(container, width \\ :fill)

Aligns content to the left. Sets width and align_x: :left.

align_right(container, width \\ :fill)

Aligns content to the right. Sets width and align_x: :right.

align_top(container, height \\ :fill)

Aligns content to the top. Sets height and align_y: :top.

align_x(c, align_x)

Sets the horizontal alignment of the child.

align_y(c, align_y)

Sets the vertical alignment of the child.

background(c, gradient)

Sets the background fill (color or gradient).

border(c, border)

Sets the border specification.

build(c)

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

center(c, center \\ true)

Centers the child in both axes.

center_x(container, width \\ :fill)

Centers content horizontally. Sets width and align_x: :center.

center_y(container, height \\ :fill)

Centers content vertically. Sets height and align_y: :center.

clip(c, clip)

Sets whether the child is clipped on overflow.

color(c, color)

Sets the text color override.

extend(c, children)

Appends multiple children to the container.

height(c, height)

Sets the container height.

max_height(c, max_height)

Sets the maximum height in pixels.

max_width(c, max_width)

Sets the maximum width in pixels.

new(id, opts \\ [])

Creates a new container struct with optional keyword opts.

padding(c, padding)

Sets the container padding.

push(c, child)

Appends a child to the container.

shadow(c, shadow)

Sets the shadow specification.

style(c, style)

Sets the named style.

width(c, width)

Sets the container width.

with_options(c, opts)

Applies keyword options to an existing container struct.

Types

option()

@type option() ::
  {:padding, Plushie.Type.Padding.t()}
  | {:width, Plushie.Type.Length.t()}
  | {:height, Plushie.Type.Length.t()}
  | {:max_width, number()}
  | {:max_height, number()}
  | {:center, boolean()}
  | {:clip, boolean()}
  | {:align_x, Plushie.Type.Alignment.t()}
  | {:align_y, Plushie.Type.Alignment.t()}
  | {:background, Plushie.Type.Color.input() | Plushie.Type.Gradient.t()}
  | {:color, Plushie.Type.Color.input()}
  | {:border, Plushie.Type.Border.t()}
  | {:shadow, Plushie.Type.Shadow.t()}
  | {:style, style()}
  | {:a11y, Plushie.Type.A11y.t() | map() | keyword()}

preset()

@type preset() ::
  :warning
  | :danger
  | :success
  | :secondary
  | :primary
  | :dark
  | :bordered_box
  | :rounded_box
  | :transparent

style()

@type style() :: preset() | Plushie.Type.StyleMap.t()

t()

@type t() :: %Plushie.Widget.Container{
  a11y: Plushie.Type.A11y.t() | nil,
  align_x: Plushie.Type.Alignment.t() | nil,
  align_y: Plushie.Type.Alignment.t() | nil,
  background: Plushie.Type.Color.t() | Plushie.Type.Gradient.t() | nil,
  border: Plushie.Type.Border.t() | nil,
  center: boolean() | nil,
  children: [Plushie.Widget.child()],
  clip: boolean() | nil,
  color: Plushie.Type.Color.t() | nil,
  height: Plushie.Type.Length.t() | nil,
  id: String.t(),
  max_height: number() | nil,
  max_width: number() | nil,
  padding: Plushie.Type.Padding.t() | nil,
  shadow: Plushie.Type.Shadow.t() | nil,
  style: style() | nil,
  width: Plushie.Type.Length.t() | nil
}

Functions

a11y(c, a11y)

@spec a11y(container :: t(), a11y :: Plushie.Type.A11y.t() | map() | keyword()) :: t()

Sets accessibility annotations.

align_bottom(container, height \\ :fill)

@spec align_bottom(container :: t(), height :: Plushie.Type.Length.t()) :: t()

Aligns content to the bottom. Sets height and align_y: :bottom.

align_left(container, width \\ :fill)

@spec align_left(container :: t(), width :: Plushie.Type.Length.t()) :: t()

Aligns content to the left. Sets width and align_x: :left.

align_right(container, width \\ :fill)

@spec align_right(container :: t(), width :: Plushie.Type.Length.t()) :: t()

Aligns content to the right. Sets width and align_x: :right.

align_top(container, height \\ :fill)

@spec align_top(container :: t(), height :: Plushie.Type.Length.t()) :: t()

Aligns content to the top. Sets height and align_y: :top.

align_x(c, align_x)

@spec align_x(container :: t(), align_x :: Plushie.Type.Alignment.t()) :: t()

Sets the horizontal alignment of the child.

align_y(c, align_y)

@spec align_y(container :: t(), align_y :: Plushie.Type.Alignment.t()) :: t()

Sets the vertical alignment of the child.

background(c, gradient)

@spec background(
  container :: t(),
  background :: Plushie.Type.Color.input() | Plushie.Type.Gradient.t()
) :: t()

Sets the background fill (color or gradient).

border(c, border)

@spec border(container :: t(), border :: Plushie.Type.Border.t()) :: t()

Sets the border specification.

build(c)

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

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

center(c, center \\ true)

@spec center(container :: t(), center :: boolean()) :: t()

Centers the child in both axes.

center_x(container, width \\ :fill)

@spec center_x(container :: t(), width :: Plushie.Type.Length.t()) :: t()

Centers content horizontally. Sets width and align_x: :center.

center_y(container, height \\ :fill)

@spec center_y(container :: t(), height :: Plushie.Type.Length.t()) :: t()

Centers content vertically. Sets height and align_y: :center.

clip(c, clip)

@spec clip(container :: t(), clip :: boolean()) :: t()

Sets whether the child is clipped on overflow.

color(c, color)

@spec color(container :: t(), color :: Plushie.Type.Color.input()) :: t()

Sets the text color override.

extend(c, children)

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

Appends multiple children to the container.

height(c, height)

@spec height(container :: t(), height :: Plushie.Type.Length.t()) :: t()

Sets the container height.

max_height(c, max_height)

@spec max_height(container :: t(), max_height :: number()) :: t()

Sets the maximum height in pixels.

max_width(c, max_width)

@spec max_width(container :: t(), max_width :: number()) :: t()

Sets the maximum width in pixels.

new(id, opts \\ [])

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

Creates a new container struct with optional keyword opts.

padding(c, padding)

@spec padding(container :: t(), padding :: Plushie.Type.Padding.t()) :: t()

Sets the container padding.

push(c, child)

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

Appends a child to the container.

shadow(c, shadow)

@spec shadow(container :: t(), shadow :: Plushie.Type.Shadow.t()) :: t()

Sets the shadow specification.

style(c, style)

@spec style(container :: t(), style :: style()) :: t()

Sets the named style.

width(c, width)

@spec width(container :: t(), width :: Plushie.Type.Length.t()) :: t()

Sets the container width.

with_options(c, opts)

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

Applies keyword options to an existing container struct.