Raxol.View.Components (Raxol v2.8.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; :content is its label.

Creates a checkbox component.

Creates a column layout component.

Creates a container component that stacks its children.

Creates a divider component.

Creates a heatmap component.

Creates an image component for inline terminal image display.

Creates an input field component: a single-line text input, laid out like text_input/1.

Creates a label component.

Creates a braille line chart component.

Creates a list component: one row per item.

Creates a modal component: a bordered, titled box around :content, drawn where it sits in the layout, and only while :visible is true.

Creates a progress bar component: a width-cell bar and a percentage.

Creates a radio button group component: one ( )/(o) row per option.

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, drawn closed: the selected option's label, or the placeholder when nothing is selected.

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: a row of tab labels with the active one in reverse video.

Creates a text component with the given content.

Creates a textarea component: a bordered box rows lines tall showing value, or placeholder while value is empty.

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; :content is its label.

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 that stacks its children.

Options

  • :children - Child elements
  • :gap - Blank rows between children (default 0; style: %{gap: n} works too)
  • :scrollable - Clip the children to the container, with a scrollbar when they overflow it; the container's size comes from style :width and :height, and fills the space it is given without them
  • :style, :id

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: a single-line text input, laid out like text_input/1.

label(content_or_opts \\ [])

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

Creates a label component.

Takes the content first, label("Name:", style: %{bold: true}), or as an option, label(content: "Name:").

label(content, opts)

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

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: one row per item.

Options

  • :items - Strings, {label, value} tuples or view elements
  • :selected - Index of the item drawn in reverse video
  • :style, :id

modal(opts \\ [])

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

Creates a modal component: a bordered, titled box around :content, drawn where it sits in the layout, and only while :visible is true.

Options

  • :visible - Draw the modal (default false)
  • :title - Shown in the top border
  • :content - A view element or a string
  • :style, :id

progress(opts \\ [])

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

Creates a progress bar component: a width-cell bar and a percentage.

Options

  • :value / :max - Progress, as value out of max (default 0/100)
  • :width - Bar width in cells, not counting the percentage (default 20)
  • :style - Style of the bar and label (e.g. %{fg: :green})
  • :id

radio_group(opts \\ [])

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

Creates a radio button group component: one ( )/(o) row per option.

Options

  • :options - Strings or {label, value} tuples
  • :selected - The selected option, its label or its value
  • :style, :id, :on_change

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, drawn closed: the selected option's label, or the placeholder when nothing is selected.

Options

  • :options - Strings or {label, value} tuples
  • :selected - The selected option, its label or its value
  • :placeholder - Shown when no option is selected (default "Select...")
  • :style, :id, :on_change

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.

Options

  • :headers, :rows
  • :border - Frame style (default :single); :none draws no frame or header rule
  • :style, :id

tabs(opts \\ [])

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

Creates a tabs component: a row of tab labels with the active one in reverse video.

Options

  • :tabs - Tab labels (strings, or maps with a :label)
  • :active - Index of the active tab (default 0)
  • :style, :id, :on_change

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: a bordered box rows lines tall showing value, or placeholder while value is empty.