EssenceUI.Components.Tabs (Essence UI v0.2.0)

A set of content sections to be displayed one at a time.

Themed Tabs component with support for various sizes and colors. Wraps EssenceUI.Primitives.Tabs.

Examples

<.tabs default_value="account">
  <:list>
    <.tabs_list size="2">
      <:trigger value="account">Account</:trigger>
      <:trigger value="documents">Documents</:trigger>
    </.tabs_list>
  </:list>
  <:content value="account">
    <.text>Make changes to your account here.</.text>
  </:content>
  <:content value="documents">
    <.text>Access and update your documents.</.text>
  </:content>
</.tabs>

Props

default_value - Initial active tab value (required)
color - Color theme from accent color palette (default: none)
high_contrast - Increase color contrast (default: false)
Plus margin props (m, mx, my, mt, mr, mb, ml) for spacing control

Summary

Functions

tabs(assigns)

tabs_list(assigns)

Tab list component containing tab triggers.

Functions

tabs(assigns)

Attributes

color (:string) - Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. Must be one of "gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", or "sky".
high_contrast (:boolean) - Whether to increase color contrast with the background.
m (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
mx (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
my (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
mt (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
mr (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
mb (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
ml (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
id (:string) - Unique identifier for the tabs root. Defaults to nil.
default_value (:string) (required) - Initial active tab value.
class (:string) - Additional CSS classes to add to the root element. Defaults to nil.
Global attributes are accepted. Global attributes and event handlers. Supports all globals plus: ["aria-label", "aria-labelledby", "aria-describedby"].

Slots

list (required) - Tab list container.
content (required) - Tab content panel. Accepts attributes:
- value (:string) (required) - Tab value to match with trigger.

tabs_list(assigns)

Tab list component containing tab triggers.

Must be used inside the :list slot of the tabs component.

Props

size - Tab size: "1", "2" (default: "2")
high_contrast - Increase color contrast (default: false)

Attributes

size (:string) - Tab size from 1 to 2. Controls overall dimensions. Defaults to "2". Must be one of "1", or "2".
high_contrast (:boolean) - Whether to increase color contrast with the background.
class (:string) - Additional CSS classes. Defaults to nil.
tabs_id (:string) - Defaults to nil.
default_value (:string) - Defaults to nil.

Slots

trigger (required) - Tab trigger button. Accepts attributes:
- value (:string) (required) - Tab value to match with content.
- disabled (:boolean) - Whether the tab is disabled.