Raxol.Core.Renderer.View.Components (Raxol v2.6.0)

Component creation functions for the View module. Extracted from the main View module to improve maintainability.

Summary

Functions

box_element(opts \\ [])

Creates a simple box element with the given options.

button(text, opts \\ [])

Creates a button element.

checkbox(label, opts \\ [])

Creates a checkbox element.

process_component(module, props \\ %{})

Creates a process-isolated component node.

shadow(opts \\ [])

Creates a shadow effect for a view.

table(opts \\ [])

Creates a table view.

text_input(opts \\ [])

Creates a text input element.

Functions

box_element(opts \\ [])

Creates a simple box element with the given options.

button(text, opts \\ [])

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")

checkbox(label, opts \\ [])

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})

process_component(module, props \\ %{})

Creates a process-isolated component node.

The component module runs in its own GenServer process under Raxol.DynamicSupervisor. If it crashes, the supervisor restarts it with fresh state from init/1 -- the rest of the app continues.

Parameters

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

shadow(opts \\ [])

Creates a shadow effect for a view.

Options

:offset - Shadow offset as a string or tuple {x, y}
:blur - Shadow blur radius
:color - Shadow color
:opacity - Shadow opacity (0.0 to 1.0)

Examples

Components.shadow(offset: "2px 2px", blur: 4, color: :black)
Components.shadow(offset: {1, 1}, color: :gray, opacity: 0.5)

table(opts \\ [])

Creates a table view.

Options

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

text_input(opts \\ [])

Creates a text input element.

Options

: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})