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
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-:verticalor: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
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.
Options
:children- Child elements:gap- Blank rows between children (default0;style: %{gap: n}works too):scrollable- Clip the children to the container, with a scrollbar when they overflow it; the container's size comes fromstyle:widthand:height, and fills the space it is given without them:style,:id
Creates a divider component.
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, orfn/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
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
Creates an input field component: a single-line text input, laid out
like text_input/1.
Creates a label component.
Takes the content first, label("Name:", style: %{bold: true}), or as
an option, label(content: "Name:").
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
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
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 (defaultfalse):title- Shown in the top border:content- A view element or a string:style,:id
Creates a progress bar component: a width-cell bar and a percentage.
Options
:value/:max- Progress, asvalueout ofmax(default0/100):width- Bar width in cells, not counting the percentage (default20):style- Style of the bar and label (e.g.%{fg: :green}):id
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
Creates a row layout component.
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
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 (default0/0):position- Playhead position, clamped into the range:playing?- Transport state (defaultfalse):speed- Playback multiplier, rendered when not1.0:marks- Positions to tick on the track:width- Track width in columns (default24):elapsed_ms/:duration_ms- Clock readout; omit forposition/max:label,:aria_label,:tooltip,:disabled,:style,:id
Example
scrubber(id: "replay", min: 0, max: 47, position: 12, marks: [0, 18])
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
Creates a spacer component.
Helper to wrap content in a styled span.
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
Creates a split pane layout component.
Options
:direction-:horizontalor:vertical(default:horizontal):ratio- Tuple for space distribution (default{1, 1}):min_size- Minimum pane dimension (default5):id- Optional identifier:children- Child elements (one per pane)
Creates a table component.
Options
:headers,:rows:border- Frame style (default:single);:nonedraws no frame or header rule:style,:id
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 (default0):style,:id,:on_change
Creates a text component with the given content.
Options
:content- The text content to display:style- Optional style attributes:id- Optional component identifier
Creates a textarea component: a bordered box rows lines tall showing
value, or placeholder while value is empty.