Fluxon.Components.Tabs (Fluxon v1.0.20)

A comprehensive tabs system for creating accessible, interactive tabbed interfaces.

This component provides a flexible solution for organizing content into tabbed sections across your application. It offers a structured set of components working together to create accessible, keyboard-navigable tabs with support for custom styling and dynamic content.

The tabs system consists of three main components working together:

tabs: The main container providing structure and JavaScript functionality
tabs_list: Navigation container with interactive tab buttons
tabs_panel: Content panels associated with each tab

The tabs system follows a structured hierarchical organization:

tabs
├── tabs_list
│   └── tab slots (interactive buttons)
└── tabs_panels
    └── panel content

Usage

Create a simple tabbed interface with multiple panels:

<.tabs id="my-tabs">
  <.tabs_list active_tab="tab2">
    <:tab name="tab1">Profile</:tab>
    <:tab name="tab2">Settings</:tab>
    <:tab name="tab3">Notifications</:tab>
  </.tabs_list>

  <.tabs_panel name="tab1">
    Profile content here...
  </.tabs_panel>

  <.tabs_panel name="tab2" active>
    Settings content here...
  </.tabs_panel>

  <.tabs_panel name="tab3">
    Notifications content here...
  </.tabs_panel>
</.tabs>

Visual Variants

The component supports three distinct visual styles through the variant attribute:

<!-- Default underlined style -->
<.tabs_list>
  <:tab name="tab1">Default Tab</:tab>
</.tabs_list>

<!-- Segmented button-like style -->
<.tabs_list variant="segmented">
  <:tab name="tab1">Segmented Tab</:tab>
</.tabs_list>

<!-- Ghost style with subtle backgrounds -->
<.tabs_list variant="ghost">
  <:tab name="tab1">Ghost Tab</:tab>
</.tabs_list>

Nested Tabs

The component supports nesting for complex interfaces:

<.tabs id="parent-tabs">
  <.tabs_list variant="segmented">
    <:tab name="profile">Profile</:tab>
    <:tab name="settings">Settings</:tab>
  </.tabs_list>

  <.tabs_panel name="profile">
    <.tabs id="profile-tabs">
      <.tabs_list variant="ghost">
        <:tab name="personal">Personal Info</:tab>
        <:tab name="preferences">Preferences</:tab>
      </.tabs_list>

      <.tabs_panel name="personal">
        Personal information content...
      </.tabs_panel>

      <.tabs_panel name="preferences">
        Preferences content...
      </.tabs_panel>
    </.tabs>
  </.tabs_panel>

  <.tabs_panel name="settings">
    Settings content...
  </.tabs_panel>
</.tabs>

Rich Tab Content

Tabs can include icons and additional content:

<.tabs_list>
  <:tab name="messages">
    <.icon name="hero-envelope" class="icon" />
    Messages
    <.badge class="ml-2">3</.badge>
  </:tab>

  <:tab name="settings">
    <.icon name="hero-cog-6-tooth" class="icon" />
    Settings
  </:tab>
</.tabs_list>

Keyboard Navigation

The component provides comprehensive keyboard support following ARIA best practices:

Key	Element Focus	Description
`Tab`	Document	Focuses the active tab when tabbing through the document
`→` / `↓`	Tab button	Moves focus to and activates the next tab, wrapping to first if at the end
`←` / `↑`	Tab button	Moves focus to and activates the previous tab, wrapping to last if at the start
`Home`	Tab button	Moves focus to and activates the first tab in the list
`End`	Tab button	Moves focus to and activates the last tab in the list

Focus Management:

Only the active tab is focusable via Tab key navigation
Non-active tabs have tabindex="-1" to prevent focus
Arrow keys both move focus AND activate tabs immediately
When a tab is activated, focus moves to the newly active tab
Focus is maintained within the active tab's panel until tabbing out

Summary

Components

tabs(assigns)

Renders a tabs container with support for dynamic content and keyboard navigation.

tabs_list(assigns)

Renders a list of interactive tabs with support for different visual styles.

tabs_panel(assigns)

Renders a tab panel that displays content when its corresponding tab is active.

Components

tabs(assigns)

Renders a tabs container with support for dynamic content and keyboard navigation.

This component serves as the foundation for building tabbed interfaces, providing proper structure, accessibility features, and JavaScript functionality. It works in conjunction with tabs_list and tabs_panel components to create comprehensive tabbed interfaces.

Attributes

id (:string) - A unique identifier for the tabs component. If not provided, a unique ID will be generated. This ID is used to connect tabs with their panels and manage focus.
class (:any) - Additional CSS classes to be applied to the tabs container. These are merged with the component's base styles.
Defaults to nil.
Global attributes are accepted. Additional HTML attributes to apply to the tabs container.

Slots

inner_block (required) - The content of the tabs component. Usually contains a tabs_list and one or more tabs_panel components.

tabs_list(assigns)

Renders a list of interactive tabs with support for different visual styles.

This component provides the navigation interface for the tabs system, managing tab selection, keyboard navigation, and visual styling. It's designed to work within the tabs component.

Attributes

class (:any) - Additional CSS classes to be applied to the tablist container. These are merged with the component's base styles and variant-specific styles.
Defaults to nil.
active_tab (:string) - The name of the active tab. If not provided, the first tab will be active by default.
variant (:string) - The visual style variant of the tabs. Available options:
- "default": Underlined style with bottom border indicator
- "segmented": Button-like style with background and shadow
- "ghost": Subtle style with background indicator
Defaults to "default".

Slots

tab (required) - Defines the individual tabs in the list. Each tab requires a name attribute that matches its corresponding panel. Additional attributes are passed to the tab button element.
inner_block (required) - The main content of the tabs list component.

Basic Usage

<.tabs_list>
  <:tab name="tab1">First Tab</:tab>
  <:tab name="tab2">Second Tab</:tab>
</.tabs_list>

Visual Variants

<.tabs_list variant="segmented">
  <:tab name="tab1">
    <.icon name="hero-home" class="icon" /> Home
  </:tab>
  <:tab name="tab2">
    <.icon name="hero-cog-6-tooth" class="icon" /> Settings
  </:tab>
</.tabs_list>

Custom Styling

<.tabs_list class="gap-4">
  <:tab name="tab1" class="font-bold">
    Custom Tab
  </:tab>
</.tabs_list>

tabs_panel(assigns)

Renders a tab panel that displays content when its corresponding tab is active.

This component provides the content container for each tab, managing visibility and accessibility attributes. It's designed to work within the tabs component.

Attributes

name (:string) (required) - The unique identifier for this panel. Must match the name of its corresponding tab in the tabs_list.
class (:any) - Additional CSS classes to be applied to the panel element. Defaults to nil.
active (:boolean) - Whether this panel is currently active and should be displayed. Defaults to false.
Global attributes are accepted. Additional HTML attributes to apply to the panel element.

Slots

inner_block (required) - The content to be displayed within this panel when its corresponding tab is active.

Basic Usage

<.tabs_panel name="tab1" active>
  Content for the first tab...
</.tabs_panel>

<.tabs_panel name="tab2">
  Content for the second tab...
</.tabs_panel>

With Rich Content

<.tabs_panel name="settings" class="space-y-4">
  <h3 class="text-lg font-medium">Settings</h3>
  <.form for={@form} phx-submit="save">
    <!-- Form fields -->
  </.form>
</.tabs_panel>