Creates a simple box element with the given options.

Creates a button element.

Options

• :id - Unique identifier for the button
• :on_click - Event handler for click events
• :aria_label - Accessibility label
• :aria_description - Accessibility description
• :style - Style options for the button

Examples

Components.button("Click Me", on_click: {:button_clicked})
Components.button("Submit", id: "submit_btn", aria_label: "Submit form")

Creates a checkbox element.

Options

• :checked - Whether the checkbox is checked (default: false)
• :on_toggle - Event handler for toggle events
• :aria_label - Accessibility label
• :aria_description - Accessibility description
• :style - Style options for the checkbox

Examples

Components.checkbox("Enable Feature", checked: true)
Components.checkbox("Accept Terms", on_toggle: {:terms_toggled})

Creates a process-isolated component node.

The component module runs in its own GenServer process under Raxol.DynamicSupervisor, owned by the rendering engine that draws it. The process, and the component's state, last across frames while the node stays at the same place in the view (or keeps the same :id key, if you put one on the node), and stop when the node leaves the view. The component's init/1 and mount/1 run inside that process after it starts; the frame draws a "starting" placeholder until they have, then the component's own tree. Changed props reach the running component as update_props(props, state) if it exports one; otherwise unmount/1 sees the old state and the component is re-initialised from the new props with init/1. If it crashes, or init/1 returns {:error, reason} or anything other than {:ok, state} or a state map, the frame draws a placeholder in its place and a later frame starts it again with fresh state from init/1 -- the rest of the app continues. unmount/1 runs whenever a live component stops. Crash reports show the module and id, never its state or props.

Parameters

• module - Component module implementing init/1, render/2, and optionally update/2, update_props/2, mount/1 and unmount/1
• props - Initial properties passed to init/1

Draws :children with a drop shadow: a block of :color the size of the children, offset by :offset and drawn beneath them.

Options

• :children - The views that cast the shadow
• :offset - Shadow offset as a string or tuple {x, y} (default {1, 1})
• :color - Shadow color (default :black)
• :blur - Shadow blur radius
• :opacity - Shadow opacity (0.0 to 1.0)

A terminal cell is either shaded or not, so :blur and :opacity are kept on the node but do not change what is drawn.

Examples

Components.shadow(color: :blue, children: [View.box(border: :single)])
Components.shadow(offset: "2px 2px", blur: 4, color: :black, children: [card])

Creates a table view.

Options

• :data - Table data (list of lists)
• :headers - Column headers
• :style - Table style options
• :border - Border style for the table

Creates a text input element.

Options

• :id - Unique identifier for the input
• :value - Current value of the input (default: "")
• :placeholder - Placeholder text
• :on_change - Event handler for change events
• :aria_label - Accessibility label
• :aria_description - Accessibility description
• :style - Style options for the input

Examples

Components.text_input(placeholder: "Enter your name...")
Components.text_input(value: "John", on_change: {:name_changed})