# `Plushie.Widget.Column`
[🔗](https://github.com/plushie-ui/plushie-elixir/blob/v0.6.0/lib/plushie/widget/column.ex#L1)

Column layout -- arranges children vertically.

## Props

- `spacing` (number) -- vertical space between children in pixels. Default: 0.
- `padding` (number | map) -- padding inside the column. Accepts a uniform number
  or `%{top, right, bottom, left}` map. See `Plushie.Type.Padding`.
- `width` (length) -- width of the column. Default: shrink. See `Plushie.Type.Length`.
- `height` (length) -- height of the column. Default: shrink.
- `max_width` (number) -- maximum width in pixels.
- `align_x` -- horizontal alignment of children: `:left`, `:center`, `:right`. See `Plushie.Type.Alignment`.
- `clip` (boolean) -- clip children that overflow. Default: false.
- `wrap` (boolean) -- wrap children to next column when they overflow. Default: false.
- `a11y` (map) -- accessibility overrides. See `Plushie.Type.A11y`.

# `option`

```elixir
@type option() ::
  {:spacing, number()}
  | {:padding, Plushie.Type.Padding.t()}
  | {:width, Plushie.Type.Length.t()}
  | {:height, Plushie.Type.Length.t()}
  | {:max_width, number()}
  | {:align_x, Plushie.Type.Alignment.t()}
  | {:clip, boolean()}
  | {:wrap, boolean()}
  | {:a11y, Plushie.Type.A11y.t() | map() | keyword()}
```

# `t`

```elixir
@type t() :: %Plushie.Widget.Column{
  a11y: Plushie.Type.A11y.t() | nil,
  align_x: Plushie.Type.Alignment.t() | nil,
  children: [Plushie.Widget.child()],
  clip: boolean() | nil,
  height: Plushie.Type.Length.t() | nil,
  id: String.t(),
  max_width: number() | nil,
  padding: Plushie.Type.Padding.t() | nil,
  spacing: number() | nil,
  width: Plushie.Type.Length.t() | nil,
  wrap: boolean() | nil
}
```

# `a11y`

```elixir
@spec a11y(column :: t(), a11y :: Plushie.Type.A11y.t() | map() | keyword()) :: t()
```

Sets accessibility annotations.

# `align_x`

```elixir
@spec align_x(column :: t(), align_x :: Plushie.Type.Alignment.t()) :: t()
```

Sets the horizontal alignment of children.

# `build`

```elixir
@spec build(column :: t()) :: Plushie.Widget.ui_node()
```

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

# `clip`

```elixir
@spec clip(column :: t(), clip :: boolean()) :: t()
```

Sets whether children that overflow are clipped.

# `extend`

```elixir
@spec extend(column :: t(), children :: [Plushie.Widget.child()]) :: t()
```

Appends multiple children to the column.

# `height`

```elixir
@spec height(column :: t(), height :: Plushie.Type.Length.t()) :: t()
```

Sets the column height.

# `max_width`

```elixir
@spec max_width(column :: t(), max_width :: number()) :: t()
```

Sets the maximum width in pixels.

# `new`

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

Creates a new column struct with optional keyword opts.

# `padding`

```elixir
@spec padding(column :: t(), padding :: Plushie.Type.Padding.t()) :: t()
```

Sets the padding inside the column.

# `push`

```elixir
@spec push(column :: t(), child :: Plushie.Widget.child()) :: t()
```

Appends a child to the column.

# `spacing`

```elixir
@spec spacing(column :: t(), spacing :: number()) :: t()
```

Sets the spacing between children in pixels.

# `width`

```elixir
@spec width(column :: t(), width :: Plushie.Type.Length.t()) :: t()
```

Sets the column width.

# `with_options`

```elixir
@spec with_options(column :: t(), opts :: [option()]) :: t()
```

Applies keyword options to an existing column struct.

# `wrap`

```elixir
@spec wrap(column :: t(), wrap :: boolean()) :: t()
```

Sets whether children wrap to the next column on overflow.

---

*Consult [api-reference.md](api-reference.md) for complete listing*