Raxol.View.Components (Raxol v2.7.0)

View Source

Basic view components for Raxol UI rendering.

This module provides fundamental components for building terminal UIs, including text, boxes, rows, columns, and other layout elements.

Summary

Functions

Creates a block-character bar chart component.

Creates a box component.

Creates a button component.

Creates a checkbox component.

Creates a column layout component.

Creates a container component with optional scrolling.

Creates a divider component.

Creates a heatmap component.

Creates an image component for inline terminal image display.

Creates an input field component.

Creates a label component.

Creates a braille line chart component.

Creates a list component.

Creates a modal component.

Creates a progress bar component.

Creates a radio button group component.

Creates a row layout component.

Creates a braille scatter plot component.

Creates a scrubber: a transport control over an ordered position.

Creates a select/dropdown component.

Creates a spacer component.

Helper to wrap content in a styled span.

Creates a minimal sparkline (line chart with no axes or legend).

Creates a split pane layout component.

Creates a table component.

Creates a tabs component.

Creates a text component with the given content.

Creates a textarea component.

Functions

bar_chart(opts \\ [])

@spec bar_chart(keyword() | map()) :: map()

Creates a block-character bar chart component.

Options

  • :series - List of %{name: string, data: list, color: atom} (required)
  • :width - Chart width in terminal columns (default: 40)
  • :height - Chart height in terminal rows (default: 10)
  • :orientation - :vertical or :horizontal (default: :vertical)
  • :show_axes - Show axis labels (default: false)
  • :show_legend - Show series legend (default: false)
  • :show_values - Show value labels on bars (default: false)
  • :bar_gap - Gap between bars within a group (default: 0)
  • :group_gap - Gap between groups (default: 1)
  • :min / :max - Value range (default: :auto)
  • :style - Box style for the wrapper
  • :id - Optional component identifier

box(opts \\ [])

@spec box(keyword() | map()) :: map()

Creates a box component.

button(opts \\ [])

@spec button(keyword() | map()) :: map()

Creates a button component.

checkbox(opts \\ [])

@spec checkbox(keyword() | map()) :: map()

Creates a checkbox component.

column(opts \\ [])

@spec column(keyword() | map()) :: map()

Creates a column layout component.

container(opts \\ [])

@spec container(keyword() | map()) :: map()

Creates a container component with optional scrolling.

divider(opts \\ [])

@spec divider(keyword() | map()) :: map()

Creates a divider component.

heatmap(opts \\ [])

@spec heatmap(keyword() | map()) :: map()

Creates a heatmap component.

Options

  • :data - 2D grid as [[number]] row-major (required)
  • :width - Chart width in terminal columns (default: 40)
  • :height - Chart height in terminal rows (default: 10)
  • :color_scale - :warm, :cool, :diverging, or fn/3 (default: :warm)
  • :show_values - Show value labels in cells (default: false)
  • :min / :max - Value range (default: :auto)
  • :style - Box style for the wrapper
  • :id - Optional component identifier

image(opts \\ [])

@spec image(keyword() | map()) :: map()

Creates an image component for inline terminal image display.

Options

  • :src - File path or raw binary image data (required)
  • :width - Width in terminal cells (default: 20)
  • :height - Height in terminal cells (default: 10)
  • :protocol - Override protocol (:kitty, :iterm2, :sixel)
  • :preserve_aspect - Preserve aspect ratio (default: true)
  • :style - Optional style attributes
  • :id - Optional component identifier

input(opts \\ [])

@spec input(keyword() | map()) :: map()

Creates an input field component.

label(opts \\ [])

@spec label(keyword() | map()) :: map()

Creates a label component.

line_chart(opts \\ [])

@spec line_chart(keyword() | map()) :: map()

Creates a braille line chart component.

Options

  • :series - List of %{name: string, data: list, color: atom} (required)
  • :width - Chart width in terminal columns (default: 40)
  • :height - Chart height in terminal rows (default: 10)
  • :show_axes - Show Y-axis labels (default: false)
  • :show_legend - Show series legend (default: false)
  • :min / :max - Y-axis range (default: :auto)
  • :style - Box style for the wrapper
  • :id - Optional component identifier

list(opts \\ [])

@spec list(keyword() | map()) :: map()

Creates a list component.

modal(opts \\ [])

@spec modal(keyword() | map()) :: map()

Creates a modal component.

progress(opts \\ [])

@spec progress(keyword() | map()) :: map()

Creates a progress bar component.

radio_group(opts \\ [])

@spec radio_group(keyword() | map()) :: map()

Creates a radio button group component.

row(opts \\ [])

@spec row(keyword() | map()) :: map()

Creates a row layout component.

scatter_chart(opts \\ [])

@spec scatter_chart(keyword() | map()) :: map()

Creates a braille scatter plot component.

Options

  • :series - List of %{name: string, data: [{x, y}], color: atom} (required)
  • :width - Chart width in terminal columns (default: 40)
  • :height - Chart height in terminal rows (default: 10)
  • :show_axes - Show axis labels (default: false)
  • :show_legend - Show series legend (default: false)
  • :x_range / :y_range - Axis ranges as {min, max} or :auto (default: :auto)
  • :style - Box style for the wrapper
  • :id - Optional component identifier

scrubber(opts \\ [])

@spec scrubber(keyword() | map()) :: map()

Creates a scrubber: a transport control over an ordered position.

Composed by Raxol.UI.Components.Input.Scrubber.render/2, then stamped type: :scrubber so MCP's TreeWalker and the accessibility projection dispatch on the widget rather than on the :row it lays out as (the same discovery-alias trick Raxol.UI.Layout.Engine uses to lay the chart types out as :box). The transport fields are carried on the node because mcp_tools/1 and a11y_node/1 read the declaration, not the component state.

Builds a declaration rather than instantiating: init/1 mints an id when none is given, and a view/1 helper runs every frame, so instantiating here churned the id -- and with it every MCP tool handle -- once per repaint. Pass :id to address this scrubber from an agent or to focus it.

Options

  • :min / :max - Addressable position range (default 0/0)
  • :position - Playhead position, clamped into the range
  • :playing? - Transport state (default false)
  • :speed - Playback multiplier, rendered when not 1.0
  • :marks - Positions to tick on the track
  • :width - Track width in columns (default 24)
  • :elapsed_ms / :duration_ms - Clock readout; omit for position/max
  • :label, :aria_label, :tooltip, :disabled, :style, :id

Example

scrubber(id: "replay", min: 0, max: 47, position: 12, marks: [0, 18])

select(opts \\ [])

@spec select(keyword() | map()) :: map()

Creates a select/dropdown component.

spacer(opts \\ [])

@spec spacer(keyword() | map()) :: map()

Creates a spacer component.

span(content, opts \\ [])

@spec span(
  binary(),
  keyword()
) :: map()

Helper to wrap content in a styled span.

sparkline(opts \\ [])

@spec sparkline(keyword() | map()) :: map()

Creates a minimal sparkline (line chart with no axes or legend).

Options

  • :data - List of numbers (required)
  • :width - Width in terminal columns (default: 20)
  • :height - Height in terminal rows (default: 3)
  • :color - Line color (default: :cyan)
  • :min / :max - Y-axis range (default: :auto)
  • :style - Box style for the wrapper
  • :id - Optional component identifier

split_pane(opts \\ [])

@spec split_pane(keyword() | map()) :: map()

Creates a split pane layout component.

Options

  • :direction - :horizontal or :vertical (default :horizontal)
  • :ratio - Tuple for space distribution (default {1, 1})
  • :min_size - Minimum pane dimension (default 5)
  • :id - Optional identifier
  • :children - Child elements (one per pane)

table(opts \\ [])

@spec table(keyword() | map()) :: map()

Creates a table component.

tabs(opts \\ [])

@spec tabs(keyword() | map()) :: map()

Creates a tabs component.

text(opts)

@spec text(keyword() | map()) :: map()

Creates a text component with the given content.

Options

  • :content - The text content to display
  • :style - Optional style attributes
  • :id - Optional component identifier

textarea(opts \\ [])

@spec textarea(keyword() | map()) :: map()

Creates a textarea component.