Toddy.Iced (Toddy v0.3.0)

Copy Markdown View Source

Strict parity layer for iced widgets.

Every function maps 1:1 to an iced widget and returns a plain node map:

%{id: id, type: type_string, props: %{...}, children: [...]}

No macro sugar, no auto-IDs -- just data. Props are accepted as atom-keyed maps for ergonomics and normalised to string keys in the output.

Per-widget modules

Each widget also lives in its own module under Toddy.Iced.Widget.*, matching iced's iced::widget::* structure. Those modules provide typed structs with builder functions for compile-time safety:

alias Toddy.Iced.Widget.Button

Button.new("btn", "Click me")
|> Button.style(:primary)
|> Button.build()

This module provides untyped convenience functions that produce raw ui_node() maps from props maps (matching iced's iced::widget::button() pattern):

Toddy.Iced.button("btn", %{label: "Click me"})
Toddy.Iced.column("col", %{spacing: 10}, children)

Types

Several prop values have shared formats across widgets. See the type helper modules for constructors and encoding:

Named styles

Many widgets accept a style prop (atom preset or StyleMap). The available preset names vary by widget and map to iced's built-in style functions. See each widget's documentation for the list of accepted values.

Summary

Types

props()

Props map accepted by widget builders (atom keys, normalised to strings internally).

ui_node()

A UI tree node map. Every widget builder returns this shape.

Functions

button(id, props \\ %{})

Button -- clickable widget that emits %Widget{type: :click, id: id} events.

canvas(id, props \\ %{})

Canvas for drawing shapes.

checkbox(id, props \\ %{})

Checkbox -- toggleable boolean input.

column(id, props \\ %{}, children \\ [])

Column layout -- arranges children vertically.

combo_box(id, props \\ %{})

Combo box -- searchable dropdown with free-form text input.

container(id, props \\ %{}, children \\ [])

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

float_widget(id, props \\ %{}, children \\ [])

Floating overlay -- positions child with optional translation and scaling.

grid(id, props \\ %{}, children \\ [])

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

image(id, props \\ %{})

Image display -- renders a raster image from a file path.

keyed_column(id, props \\ %{}, children \\ [])

Keyed column -- like column/3 but uses child IDs as keys for efficient list diffing.

markdown(id, props \\ %{})

Markdown display -- renders parsed markdown content.

mouse_area(id, props \\ %{}, children \\ [])

Mouse area -- captures mouse events on child content.

overlay(id, props \\ %{}, children \\ [])

Overlay container -- positions second child as a floating overlay relative to the first child (anchor).

pane_grid(id, props \\ %{}, children \\ [])

Pane grid -- resizable tiled panes.

pick_list(id, props \\ %{})

Pick list -- dropdown selection.

pin(id, props \\ %{}, children \\ [])

Pin layout -- positions child at absolute coordinates.

progress_bar(id, props \\ %{})

Progress bar -- displays progress within a range.

qr_code(id, props \\ %{})

QR code display -- renders a QR code from a data string.

radio(id, props \\ %{})

Radio button -- one-of-many selection.

responsive(id, props \\ %{}, children \\ [])

Responsive layout -- adapts to available size by reporting resize events.

rich_text(id, props \\ %{})

Rich text display with individually styled spans.

row(id, props \\ %{}, children \\ [])

Row layout -- arranges children horizontally.

rule(id, props \\ %{})

Horizontal or vertical rule (divider line).

scrollable(id, props \\ %{}, children \\ [])

Scrollable container -- wraps child content in a scrollable viewport.

sensor(id, props \\ %{}, children \\ [])

Sensor -- detects visibility and size changes on child content.

slider(id, props \\ %{})

Slider -- horizontal range input.

space(id, props \\ %{})

Empty space -- invisible spacer widget.

stack(id, props \\ %{}, children \\ [])

Stack layout -- layers children on top of each other.

svg(id, props \\ %{})

SVG display -- renders a vector image from a file path.

table(id, props \\ %{})

Data table -- composite widget built from columns, rows, and scrollable containers.

text(id, props \\ %{})

Text display -- renders static text.

text_editor(id, props \\ %{})

Text editor -- multi-line editable text area.

text_input(id, props \\ %{})

Text input field -- single-line editable text.

themer(id, props \\ %{}, children \\ [])

Per-subtree theme override -- applies a different theme to child widgets.

toggler(id, props \\ %{})

Toggler -- on/off switch.

tooltip(id, tip, props \\ %{}, children \\ [])

Tooltip -- shows a popup tip over child content on hover.

vertical_slider(id, props \\ %{})

Vertical slider -- vertical range input.

Types

props()

@type props() :: %{optional(atom()) => term()}

Props map accepted by widget builders (atom keys, normalised to strings internally).

ui_node()

@type ui_node() :: %{
  id: String.t(),
  type: String.t(),
  props: %{optional(String.t()) => term()},
  children: [ui_node()]
}

A UI tree node map. Every widget builder returns this shape.

Functions

button(id, props \\ %{})

@spec button(id :: String.t(), props :: props()) :: ui_node()

Button -- clickable widget that emits %Widget{type: :click, id: id} events.

See Toddy.Iced.Widget.Button for full props documentation.

canvas(id, props \\ %{})

@spec canvas(id :: String.t(), props :: props()) :: ui_node()

Canvas for drawing shapes.

See Toddy.Iced.Widget.Canvas for full props documentation.

checkbox(id, props \\ %{})

@spec checkbox(id :: String.t(), props :: props()) :: ui_node()

Checkbox -- toggleable boolean input.

See Toddy.Iced.Widget.Checkbox for full props documentation.

column(id, props \\ %{}, children \\ [])

@spec column(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()

Column layout -- arranges children vertically.

See Toddy.Iced.Widget.Column for full props documentation.

combo_box(id, props \\ %{})

@spec combo_box(id :: String.t(), props :: props()) :: ui_node()

Combo box -- searchable dropdown with free-form text input.

See Toddy.Iced.Widget.ComboBox for full props documentation.

container(id, props \\ %{}, children \\ [])

@spec container(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()

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

See Toddy.Iced.Widget.Container for full props documentation.

float_widget(id, props \\ %{}, children \\ [])

@spec float_widget(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()

Floating overlay -- positions child with optional translation and scaling.

See Toddy.Iced.Widget.Float for full props documentation.

grid(id, props \\ %{}, children \\ [])

@spec grid(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()

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

See Toddy.Iced.Widget.Grid for full props documentation.

image(id, props \\ %{})

@spec image(id :: String.t(), props :: props()) :: ui_node()

Image display -- renders a raster image from a file path.

See Toddy.Iced.Widget.Image for full props documentation.

keyed_column(id, props \\ %{}, children \\ [])

@spec keyed_column(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()

Keyed column -- like column/3 but uses child IDs as keys for efficient list diffing.

See Toddy.Iced.Widget.KeyedColumn for full props documentation.

markdown(id, props \\ %{})

@spec markdown(id :: String.t(), props :: props()) :: ui_node()

Markdown display -- renders parsed markdown content.

See Toddy.Iced.Widget.Markdown for full props documentation.

mouse_area(id, props \\ %{}, children \\ [])

@spec mouse_area(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()

Mouse area -- captures mouse events on child content.

See Toddy.Iced.Widget.MouseArea for full props documentation.

overlay(id, props \\ %{}, children \\ [])

@spec overlay(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()

Overlay container -- positions second child as a floating overlay relative to the first child (anchor).

See Toddy.Iced.Widget.Overlay for full props documentation.

pane_grid(id, props \\ %{}, children \\ [])

@spec pane_grid(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()

Pane grid -- resizable tiled panes.

See Toddy.Iced.Widget.PaneGrid for full props documentation.

pick_list(id, props \\ %{})

@spec pick_list(id :: String.t(), props :: props()) :: ui_node()

Pick list -- dropdown selection.

See Toddy.Iced.Widget.PickList for full props documentation.

pin(id, props \\ %{}, children \\ [])

@spec pin(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()

Pin layout -- positions child at absolute coordinates.

See Toddy.Iced.Widget.Pin for full props documentation.

progress_bar(id, props \\ %{})

@spec progress_bar(id :: String.t(), props :: props()) :: ui_node()

Progress bar -- displays progress within a range.

See Toddy.Iced.Widget.ProgressBar for full props documentation.

qr_code(id, props \\ %{})

@spec qr_code(id :: String.t(), props :: props()) :: ui_node()

QR code display -- renders a QR code from a data string.

See Toddy.Iced.Widget.QrCode for full props documentation.

radio(id, props \\ %{})

@spec radio(id :: String.t(), props :: props()) :: ui_node()

Radio button -- one-of-many selection.

See Toddy.Iced.Widget.Radio for full props documentation.

responsive(id, props \\ %{}, children \\ [])

@spec responsive(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()

Responsive layout -- adapts to available size by reporting resize events.

See Toddy.Iced.Widget.Responsive for full props documentation.

rich_text(id, props \\ %{})

@spec rich_text(id :: String.t(), props :: props()) :: ui_node()

Rich text display with individually styled spans.

See Toddy.Iced.Widget.RichText for full props documentation.

row(id, props \\ %{}, children \\ [])

@spec row(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()

Row layout -- arranges children horizontally.

See Toddy.Iced.Widget.Row for full props documentation.

rule(id, props \\ %{})

@spec rule(id :: String.t(), props :: props()) :: ui_node()

Horizontal or vertical rule (divider line).

See Toddy.Iced.Widget.Rule for full props documentation.

scrollable(id, props \\ %{}, children \\ [])

@spec scrollable(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()

Scrollable container -- wraps child content in a scrollable viewport.

See Toddy.Iced.Widget.Scrollable for full props documentation.

sensor(id, props \\ %{}, children \\ [])

@spec sensor(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()

Sensor -- detects visibility and size changes on child content.

See Toddy.Iced.Widget.Sensor for full props documentation.

slider(id, props \\ %{})

@spec slider(id :: String.t(), props :: props()) :: ui_node()

Slider -- horizontal range input.

See Toddy.Iced.Widget.Slider for full props documentation.

space(id, props \\ %{})

@spec space(id :: String.t(), props :: props()) :: ui_node()

Empty space -- invisible spacer widget.

See Toddy.Iced.Widget.Space for full props documentation.

stack(id, props \\ %{}, children \\ [])

@spec stack(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()

Stack layout -- layers children on top of each other.

See Toddy.Iced.Widget.Stack for full props documentation.

svg(id, props \\ %{})

@spec svg(id :: String.t(), props :: props()) :: ui_node()

SVG display -- renders a vector image from a file path.

See Toddy.Iced.Widget.Svg for full props documentation.

table(id, props \\ %{})

@spec table(id :: String.t(), props :: props()) :: ui_node()

Data table -- composite widget built from columns, rows, and scrollable containers.

See Toddy.Iced.Widget.Table for full props documentation.

text(id, props \\ %{})

@spec text(id :: String.t(), props :: props()) :: ui_node()

Text display -- renders static text.

See Toddy.Iced.Widget.Text for full props documentation.

text_editor(id, props \\ %{})

@spec text_editor(id :: String.t(), props :: props()) :: ui_node()

Text editor -- multi-line editable text area.

See Toddy.Iced.Widget.TextEditor for full props documentation.

text_input(id, props \\ %{})

@spec text_input(id :: String.t(), props :: props()) :: ui_node()

Text input field -- single-line editable text.

See Toddy.Iced.Widget.TextInput for full props documentation.

themer(id, props \\ %{}, children \\ [])

@spec themer(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()

Per-subtree theme override -- applies a different theme to child widgets.

See Toddy.Iced.Widget.Themer for full props documentation.

toggler(id, props \\ %{})

@spec toggler(id :: String.t(), props :: props()) :: ui_node()

Toggler -- on/off switch.

See Toddy.Iced.Widget.Toggler for full props documentation.

tooltip(id, tip, props \\ %{}, children \\ [])

@spec tooltip(
  id :: String.t(),
  tip :: String.t(),
  props :: props(),
  children :: [ui_node()]
) ::
  ui_node()

Tooltip -- shows a popup tip over child content on hover.

See Toddy.Iced.Widget.Tooltip for full props documentation.

vertical_slider(id, props \\ %{})

@spec vertical_slider(id :: String.t(), props :: props()) :: ui_node()

Vertical slider -- vertical range input.

See Toddy.Iced.Widget.VerticalSlider for full props documentation.