Raxol.HEEx.Components (Raxol v2.6.0)

View Source

Terminal-specific Phoenix function components for HEEx templates.

These components render terminal UI elements within HEEx templates, providing a familiar Phoenix component syntax for terminal applications.

Usage

defmodule MyApp do
  use Raxol.HEEx

  def render(assigns) do
    ~H"""
    <.terminal_box padding={2} border="single">
      <.terminal_text color="green" bold>Hello!</.terminal_text>
    </.terminal_box>
    """
  end
end

Available Components

Summary

Functions

terminal_box(assigns)

Renders a box container with optional border and padding.

terminal_button(assigns)

Renders a clickable button.

terminal_column(assigns)

Renders a vertical column container for layout.

terminal_divider(assigns)

Renders a horizontal divider line.

terminal_input(assigns)

Renders a text input field.

terminal_progress(assigns)

Renders a progress bar.

terminal_row(assigns)

Renders a horizontal row container for layout.

terminal_text(assigns)

Renders styled text.

Functions

terminal_box(assigns)

Renders a box container with optional border and padding.

Attributes

  • padding - Integer padding inside the box (default: 0)
  • border - Border style: "single", "double", "rounded", "none" (default: "none")
  • color - Text color (default: :default)
  • background - Background color (default: :default)
  • width - Fixed width (default: auto)
  • height - Fixed height (default: auto)

Slots

  • inner_block - Required. The content to render inside the box.

Examples

<.terminal_box border="single" padding={1}>
  Content here
</.terminal_box>

<.terminal_box border="double" color="blue" background="white">
  Styled box
</.terminal_box>

Attributes

  • padding (:integer) - Defaults to 0.
  • border (:string) - Defaults to "none".
  • color (:any) - Defaults to :default.
  • background (:any) - Defaults to :default.
  • width (:integer) - Defaults to nil.
  • height (:integer) - Defaults to nil.
  • id (:string) - Defaults to nil.

Slots

  • inner_block (required)

terminal_button(assigns)

Renders a clickable button.

Attributes

  • disabled - Whether the button is disabled (default: false)
  • role - Button style: "primary", "secondary", "danger", "success" (default: "primary")
  • phx-click - Phoenix click event name

Slots

  • inner_block - Required. The button label.

Examples

<.terminal_button phx-click="submit" role="primary">Submit</.terminal_button>
<.terminal_button disabled>Disabled</.terminal_button>

Attributes

  • disabled (:boolean) - Defaults to false.
  • role (:string) - Defaults to "primary".
  • id (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["phx-click", "phx-value-id"].

Slots

  • inner_block (required)

terminal_column(assigns)

Renders a vertical column container for layout.

Attributes

  • gap - Space between children (default: 0)
  • align - Horizontal alignment: "start", "center", "end" (default: "start")

Slots

  • inner_block - Required. The content to render in the column.

Examples

<.terminal_column gap={1}>
  <.terminal_text>Line 1</.terminal_text>
  <.terminal_text>Line 2</.terminal_text>
</.terminal_column>

Attributes

  • gap (:integer) - Defaults to 0.
  • align (:string) - Defaults to "start".
  • id (:string) - Defaults to nil.

Slots

  • inner_block (required)

terminal_divider(assigns)

Renders a horizontal divider line.

Attributes

  • char - Character to use for the divider (default: "-")
  • width - Width of the divider (default: 40)
  • color - Divider color (default: :default)

Examples

<.terminal_divider />
<.terminal_divider char="=" width={60} color="blue" />

Attributes

  • char (:string) - Defaults to "-".
  • width (:integer) - Defaults to 40.
  • color (:any) - Defaults to :default.
  • id (:string) - Defaults to nil.

terminal_input(assigns)

Renders a text input field.

Attributes

  • value - Current input value (default: "")
  • placeholder - Placeholder text (default: "")
  • disabled - Whether input is disabled (default: false)
  • type - Input type: "text", "password" (default: "text")
  • phx-change - Phoenix change event name
  • phx-blur - Phoenix blur event name

Examples

<.terminal_input value={@query} phx-change="search" placeholder="Search..." />
<.terminal_input type="password" phx-change="set_password" />

Attributes

  • value (:string) - Defaults to "".
  • placeholder (:string) - Defaults to "".
  • disabled (:boolean) - Defaults to false.
  • type (:string) - Defaults to "text".
  • id (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["phx-change", "phx-blur", "phx-focus", "name"].

terminal_progress(assigns)

Renders a progress bar.

Attributes

  • value - Current progress (0-100, default: 0)
  • max - Maximum value (default: 100)
  • width - Bar width in characters (default: 20)
  • color - Bar color (default: :green)
  • show_percentage - Show percentage text (default: true)
  • filled_char - Character for filled portion (default: "=")
  • empty_char - Character for empty portion (default: "-")

Examples

<.terminal_progress value={75} />
<.terminal_progress value={@progress} color="blue" width={30} />

Attributes

  • value (:integer) - Defaults to 0.
  • max (:integer) - Defaults to 100.
  • width (:integer) - Defaults to 20.
  • color (:any) - Defaults to :green.
  • show_percentage (:boolean) - Defaults to true.
  • filled_char (:string) - Defaults to "=".
  • empty_char (:string) - Defaults to "-".
  • id (:string) - Defaults to nil.

terminal_row(assigns)

Renders a horizontal row container for layout.

Attributes

  • gap - Space between children (default: 0)
  • justify - Horizontal alignment: "start", "center", "end", "between" (default: "start")
  • align - Vertical alignment: "start", "center", "end" (default: "start")

Slots

  • inner_block - Required. The content to render in the row.

Examples

<.terminal_row gap={2} justify="between">
  <.terminal_text>Left</.terminal_text>
  <.terminal_text>Right</.terminal_text>
</.terminal_row>

Attributes

  • gap (:integer) - Defaults to 0.
  • justify (:string) - Defaults to "start".
  • align (:string) - Defaults to "start".
  • id (:string) - Defaults to nil.

Slots

  • inner_block (required)

terminal_text(assigns)

Renders styled text.

Attributes

  • color - Text color (default: :default)
  • background - Background color (default: :default)
  • bold - Bold text (default: false)
  • italic - Italic text (default: false)
  • underline - Underlined text (default: false)
  • strikethrough - Strikethrough text (default: false)
  • dim - Dimmed text (default: false)

Slots

  • inner_block - Required. The text content.

Examples

<.terminal_text color="green" bold>Success!</.terminal_text>
<.terminal_text color="red" underline>Error</.terminal_text>

Attributes

  • color (:any) - Defaults to :default.
  • background (:any) - Defaults to :default.
  • bold (:boolean) - Defaults to false.
  • italic (:boolean) - Defaults to false.
  • underline (:boolean) - Defaults to false.
  • strikethrough (:boolean) - Defaults to false.
  • dim (:boolean) - Defaults to false.
  • id (:string) - Defaults to nil.

Slots

  • inner_block (required)