Raxol.UI.Components.Patterns.Compound (Raxol v2.0.1)

Compound Components pattern for Raxol UI.

Components designed to work together with shared implicit state and flexible composition. Parent manages shared state, children handle individual concerns.

Usage

# Accordion example
%{
  type: :accordion,
  children: [
    %{
      type: :accordion_item,
      children: [
        %{type: :accordion_trigger, children: [text("Section 1")]},
        %{type: :accordion_content, children: [text("Content 1")]}
      ]
    }
  ]
}

Summary

Functions

accordion()

Accordion root component that manages expanded state and provides context to children.

accordion_content()

Accordion content that is shown/hidden based on the item's expanded state.

accordion_item()

Accordion item that represents a single collapsible section.

accordion_trigger()

Accordion trigger that toggles the item's expanded state when clicked.

dropdown()

Dropdown root component that manages open state and provides context.

dropdown_content()

Dropdown content that contains the dropdown menu items.

dropdown_item()

Dropdown item that represents a single menu option.

dropdown_separator()

Dropdown separator that visually separates groups of menu items.

dropdown_trigger()

Dropdown trigger that opens/closes the dropdown when clicked.

tabs()

Tabs root component that manages active tab state.

tabs_content()

Tab content panel that displays content for a specific tab.

tabs_list()

Tabs list that contains the tab triggers.

tabs_trigger()

Tab trigger that switches to a specific tab when clicked.

Functions

accordion()

Accordion root component that manages expanded state and provides context to children.

Props

:type - :single (only one item open) or :multiple (multiple items can be open)
:default_value - Default expanded item(s)
:collapsible - Whether items can be collapsed (for :single type)
:on_value_change - Callback when expanded items change

Context Provided

:expanded_items - Set of currently expanded item values
:toggle_item - Function to toggle an item's expanded state
:accordion_type - The accordion type (:single or :multiple)

accordion_content()

Accordion content that is shown/hidden based on the item's expanded state.

accordion_item()

Accordion item that represents a single collapsible section.

Props

:value - Unique identifier for this item (required)
:disabled - Whether this item is disabled

accordion_trigger()

Accordion trigger that toggles the item's expanded state when clicked.

dropdown_content()

Dropdown content that contains the dropdown menu items.

dropdown_item()

Dropdown item that represents a single menu option.

Props

:value - Value associated with this item
:disabled - Whether this item is disabled
:on_select - Callback when this item is selected

dropdown_separator()

Dropdown separator that visually separates groups of menu items.

dropdown_trigger()

Dropdown trigger that opens/closes the dropdown when clicked.

tabs()

Tabs root component that manages active tab state.

Props

:value - Controlled active tab value
:default_value - Default active tab (uncontrolled)
:on_value_change - Callback when active tab changes
:orientation - :horizontal or :vertical

tabs_content()

Tab content panel that displays content for a specific tab.

Props

:value - The tab value this content is associated with (required)

tabs_list()

Tabs list that contains the tab triggers.

tabs_trigger()

Tab trigger that switches to a specific tab when clicked.

Props

:value - The tab value this trigger activates (required)
:disabled - Whether this tab is disabled