# `Toddy.Iced.Widget.PaneGrid`
[🔗](https://github.com/toddy-ui/toddy-elixir/blob/v0.3.0/lib/toddy/iced/widget/pane_grid.ex#L1)

Pane grid -- resizable tiled panes.

Children are keyed by their node ID and rendered as individual panes.
The renderer manages an internal `pane_grid::State` cache.

## Props

- `spacing` (number) -- space between panes in pixels. Default: 2.
- `width` (length) -- grid width. Default: fill. See `Toddy.Iced.Length`.
- `height` (length) -- grid height. Default: fill.
- `min_size` (number) -- minimum pane size in pixels. Default: 10.
- `leeway` (number) -- grabbable area around dividers. Defaults to min_size.
- `divider_color` (hex color) -- color for the split divider.
- `divider_width` (number) -- divider thickness in pixels.
- `a11y` (map) -- accessibility overrides. See `Toddy.Iced.A11y`.

## Child pane props

Each child node can have a `title` prop (string). If present, the pane
renders a title bar with that text. If absent, no title bar is shown.

## Events

- `%Pane{type: :clicked}` -- pane selected.
- `%Pane{type: :resized}` -- split divider moved (split, ratio).
- `%Pane{type: :dragged}` -- pane drag (action: :picked/:dropped/:canceled,
  with optional target, region, edge).
- `%Pane{type: :focus_cycle}` -- F6/Shift+F6 focus cycling.

# `option`

```elixir
@type option() ::
  {:spacing, number()}
  | {:width, Toddy.Iced.Length.t()}
  | {:height, Toddy.Iced.Length.t()}
  | {:min_size, number()}
  | {:divider_color, Toddy.Iced.Color.input()}
  | {:divider_width, number()}
  | {:leeway, number()}
  | {:a11y, Toddy.Iced.A11y.t()}
```

# `t`

```elixir
@type t() :: %Toddy.Iced.Widget.PaneGrid{
  a11y: Toddy.Iced.A11y.t() | nil,
  children: [Toddy.Iced.ui_node() | struct()],
  divider_color: Toddy.Iced.Color.t() | nil,
  divider_width: number() | nil,
  height: Toddy.Iced.Length.t() | nil,
  id: String.t(),
  leeway: number() | nil,
  min_size: number() | nil,
  spacing: number() | nil,
  width: Toddy.Iced.Length.t() | nil
}
```

# `a11y`

```elixir
@spec a11y(pane_grid :: t(), a11y :: Toddy.Iced.A11y.t()) :: t()
```

Sets accessibility annotations.

# `build`

```elixir
@spec build(pane_grid :: t()) :: Toddy.Iced.ui_node()
```

Converts this pane grid struct to a `ui_node()` map via the `Toddy.Iced.Widget` protocol.

# `divider_color`

```elixir
@spec divider_color(pane_grid :: t(), divider_color :: Toddy.Iced.Color.input()) ::
  t()
```

Sets the divider color.

# `divider_width`

```elixir
@spec divider_width(pane_grid :: t(), divider_width :: number()) :: t()
```

Sets the divider width in pixels.

# `extend`

```elixir
@spec extend(pane_grid :: t(), children :: [Toddy.Iced.ui_node() | struct()]) :: t()
```

Appends multiple child panes to the grid.

# `height`

```elixir
@spec height(pane_grid :: t(), height :: Toddy.Iced.Length.t()) :: t()
```

Sets the pane grid height.

# `leeway`

```elixir
@spec leeway(pane_grid :: t(), leeway :: number()) :: t()
```

Sets the drag leeway in pixels (how far a pane must be dragged before it detaches).

# `min_size`

```elixir
@spec min_size(pane_grid :: t(), min_size :: number()) :: t()
```

Sets the minimum pane size in pixels.

# `new`

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

Creates a new pane grid struct with optional keyword opts.

# `push`

```elixir
@spec push(pane_grid :: t(), child :: Toddy.Iced.ui_node() | struct()) :: t()
```

Appends a child pane to the grid.

# `spacing`

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

Sets the spacing between panes.

# `width`

```elixir
@spec width(pane_grid :: t(), width :: Toddy.Iced.Length.t()) :: t()
```

Sets the pane grid width.

# `with_options`

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

Applies keyword options to an existing pane grid struct.

---

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