EccUtilsDesignTabs Component

2.0.0-alpha.6

<ecc-utils-design-tabs/>

EccUtilsDesignTabs

Overview

The ecc-utils-design-tabs component provides a way to display content in a tabbed interface, allowing users to switch between different views within the same context. It is a compound component that gives you control over the tab list and content panels.

This component is composed of Tabs, TabsList, TabsTrigger, and TabsContent to create a complete tabbed interface.

Usage

Basic Tabs

This example shows a basic tabbed interface with two tabs.

Account

Password

This is the account tab.

This is the password tab.

Components

Component	Tag Name	Description
`Tabs`	`ecc-utils-design-tabs`	The root container for the tabs.
`TabsList`	`ecc-utils-design-tabs-list`	The container for the tab triggers.
`TabsTrigger`	`ecc-utils-design-tabs-trigger`	A button to activate a specific tab.
`TabsContent`	`ecc-utils-design-tabs-content`	The content panel associated with a tab.

Properties

`EccUtilsDesignTabs`

Property	Type	Default	Description
`defaultValue`	`string`	`""`	The value of the tab to be active on initial render.
`value`	`string`	`""`	The controlled value of the active tab.

`defaultValue`

Sets which tab is active when the component first loads. Should match the value of one of the TabsTrigger components.

<EccUtilsDesignTabs defaultValue="account">
  ...
</EccUtilsDesignTabs>

`value`

Controls which tab is currently active. Used for controlled components where you manage the state externally.

<EccUtilsDesignTabs value={currentTab}>
  ...
</EccUtilsDesignTabs>

`EccUtilsDesignTabsTrigger`

Property	Type	Default	Description
`value`	`string`	`""`	A unique value for the tab trigger.
`disabled`	`boolean`	`false`	When `true`, disables the tab trigger.

`value`

A unique identifier for the tab trigger. This value must match the corresponding TabsContent value.

<EccUtilsDesignTabsTrigger value="account">Account</EccUtilsDesignTabsTrigger>

`disabled`

When true, prevents the tab from being activated and visually indicates it's unavailable.

<EccUtilsDesignTabsTrigger value="premium" disabled={true}>Premium</EccUtilsDesignTabsTrigger>

`EccUtilsDesignTabsContent`

Property	Type	Default	Description
`value`	`string`	`""`	A unique value for the tab content.

`value`

A unique identifier for the tab content. This value must match the corresponding TabsTrigger value.

<EccUtilsDesignTabsContent value="account">
  Account content goes here...
</EccUtilsDesignTabsContent>

Events

`EccUtilsDesignTabs`

Event Name	React Event Name	Detail Type	Description
`ecc-input-changed`	`onEccInputChanged`	`{ value: string }`	Fired when the active tab changes.

`ecc-input-changed`

This event is fired when the user clicks on a new tab trigger.

<EccUtilsDesignTabs 
  onEccInputChanged={(event) => {
    console.log('Active tab:', event.detail.value);
  }}
>
  ...
</EccUtilsDesignTabs>

Pagination Table