Raxol.View.Elements (Raxol v0.4.0)

View Source

Basic UI elements for Raxol views.

This module defines the core UI elements that can be used in Raxol views.

Summary

Functions

Creates a box container, often used for bordering or grouping.

Creates a button that can be clicked.

Creates a checkbox.

Creates a column layout for vertical arrangement.

Creates a text input field.

Creates a text label.

Creates a panel with a title and content.

Creates a row layout for horizontal arrangement.

Creates a table for displaying tabular data.

Creates a text input field.

Functions

box(opts \\ [], list)

(macro)

Creates a box container, often used for bordering or grouping.

Options

  • :style - Map containing styling attributes (e.g., border, padding)

Example

box style: %{border: :single, padding: 1} do
  text content: "Content inside the box"
end

button(opts)

(macro)

Creates a button that can be clicked.

Options

  • :label - The button text
  • :on_click - The message to send when clicked

Example

button label: "Click me", on_click: :button_clicked

checkbox(opts)

(macro)

Creates a checkbox.

Options

  • :checked - Whether the checkbox is checked
  • :label - The checkbox label
  • :on_toggle - Function to call when toggled

Example

checkbox checked: model.agreed, label: "I agree to terms", on_toggle: fn value -> {:update_agreed, value} end

column(opts \\ [], list)

(macro)

Creates a column layout for vertical arrangement.

Options

  • :size - The column size (1-12)

Example

column size: 6 do
  label content: "Half width"
end

input(opts)

(macro)

Creates a text input field.

Options

  • :value - The current input value
  • :cursor - The cursor position
  • :focused - Whether the input is focused
  • :placeholder - Placeholder text
  • :password - Whether to mask the input (boolean)

label(opts)

(macro)

Creates a text label.

Options

  • :content - The label text
  • Other options are passed as attributes

panel(opts \\ [], list)

(macro)

Creates a panel with a title and content.

Options

  • :title - The panel title
  • :height - The panel height (optional)
  • :width - The panel width (optional)

Example

panel title: "Information" do
  label content: "Some information"
end

row(opts \\ [], list)

(macro)

Creates a row layout for horizontal arrangement.

Example

row do
  label content: "Left"
  label content: "Right"
end

table(opts)

(macro)

Creates a table for displaying tabular data.

Options

  • :headers - List of column headers
  • :data - List of rows, where each row is a list of cells

Example

table headers: ["Name", "Age", "City"], data: [["John", "25", "New York"], ["Jane", "30", "San Francisco"]]

text_input(opts)

(macro)

Creates a text input field.

Options

  • :value - The current input value
  • :placeholder - Placeholder text
  • :on_change - Function to call when value changes

Example

text_input value: model.name, placeholder: "Enter your name", on_change: fn value -> {:update_name, value} end