PineUiPhoenix.Tabs (Pine UI v0.1.3)

View Source

Provides tabs components for organizing content into selectable panes.

The Tabs module offers tab navigation components that allow users to switch between different content sections within the same area, preserving space while maintaining organization.

Summary

Functions

Renders a basic tabs component with tab buttons and content panes.

Renders a boxed tabs component with full-width tab panels and border.

Renders a pill-style tabs component with rounded tab buttons.

Functions

basic(assigns)

Renders a basic tabs component with tab buttons and content panes.

This component creates a tabbed interface where clicking on a tab button displays its associated content pane.

Examples

<.basic>
  <:tab title="Account Settings" active={true}>
    <p>Content for the Account Settings tab.</p>
  </:tab>
  <:tab title="Profile">
    <p>Content for the Profile tab.</p>
  </:tab>
  <:tab title="Notifications">
    <p>Content for the Notifications tab.</p>
  </:tab>
</.basic>

Options

  • :class - Additional CSS classes for the tabs container (optional)
  • :tab_list_class - CSS classes for the tab button list (optional)
  • :tab_button_class - Base CSS classes for all tab buttons (optional)
  • :tab_button_active_class - CSS classes added to the active tab button (optional)
  • :tab_button_inactive_class - CSS classes added to inactive tab buttons (optional)
  • :tab_panel_class - CSS classes for the tab content panels (optional)
  • :tab - Tab slots with the following attributes:
    • :title - Text displayed in the tab button (required)
    • :active - Whether this tab is selected initially (optional, defaults to false)
    • :disabled - Whether this tab is disabled (optional, defaults to false)

Slots

  • tab (required) - Accepts attributes:
    • title (:string)
    • active (:string)
    • disabled (:boolean)

boxed(assigns)

Renders a boxed tabs component with full-width tab panels and border.

This component creates a tabbed interface with box-style tabs and content panels with a border.

Examples

<.boxed>
  <:tab title="Comments" active={true}>
    <p>Comments content goes here.</p>
  </:tab>
  <:tab title="Activity">
    <p>Activity content goes here.</p>
  </:tab>
  <:tab title="Archives">
    <p>Archives content goes here.</p>
  </:tab>
</.boxed>

Options

  • :class - Additional CSS classes for the tabs container (optional)
  • :tab_list_class - CSS classes for the boxed tab list (optional)
  • :tab_button_class - Base CSS classes for all boxed tab buttons (optional)
  • :tab_button_active_class - CSS classes added to the active boxed tab (optional)
  • :tab_button_inactive_class - CSS classes added to inactive boxed tabs (optional)
  • :tab_panel_class - CSS classes for the tab content panels (optional)
  • :tab - Tab slots with the same attributes as in the basic/1 component

pills(assigns)

Renders a pill-style tabs component with rounded tab buttons.

This component creates a tabbed interface with pill-shaped tab buttons.

Examples

<.pills>
  <:tab title="Overview" active={true}>
    <p>Overview content goes here.</p>
  </:tab>
  <:tab title="Features">
    <p>Features content goes here.</p>
  </:tab>
  <:tab title="Specifications">
    <p>Specifications content goes here.</p>
  </:tab>
</.pills>

Options

  • :class - Additional CSS classes for the tabs container (optional)
  • :tab_list_class - CSS classes for the pill tab list (optional)
  • :tab_button_class - Base CSS classes for all pill tab buttons (optional)
  • :tab_button_active_class - CSS classes added to the active pill tab (optional)
  • :tab_button_inactive_class - CSS classes added to inactive pill tabs (optional)
  • :tab_panel_class - CSS classes for the tab content panels (optional)
  • :tab - Tab slots with the same attributes as in the basic/1 component

Slots

  • tab (required) - Accepts attributes:
    • title (:string)
    • active (:string)
    • disabled (:boolean)