Tab

ETab is a collection of tab elements pointing to a separate content section or view. The tab bar organizes material across several displays and allows you to navigate between subsections.Demo Here

Import

import ETab from "@components/Elements/ETab";
import ETabItem from "@components/Elements/ETab/ETabItem";
import ETabContent from "@components/Elements/ETab/ETabContent";

Usage

The ETab, ETabItem and ETabContent components are used together as below:

Built-in value

// In this approach the ETabItem and ETabContent are linked together based on
// their order.

const TabExample = () => {
    const [activeTab, setActiveTab] = useState(0);

    const handleChange = (event, value) => {
        setActiveTab(value);
    };

    return (
        <ETab value={activeTab} onChange={handleChange}>
            <ETabItem> Item 1 </ETabItem>
            <ETabItem> Item 2 </ETabItem>
            <ETabContent>Content 1</ETabContent>
            <ETabContent>Content 2</ETabContent>
        </ETab>
    );
};

export default TabExample;

Custom value

// User Custom Value

const TabExample = () => {
    const [activeTab, setActiveTab] = useState("second");

    // In this approach the `ETabItem` and `ETabContent` are linked together based
    // on their custom value.

    const handleChange = (event, value) => {
        setActiveTab(value);
    };

    return (
        <ETab value={activeTab} onChange={handleChange}>
            <ETabItem value="first"> Item 1 </ETabItem>
            <ETabItem value="second"> Item 2 </ETabItem>
            <ETabContent value="first">Content 1</ETabContent>
            <ETabContent value="second">Content 2</ETabContent>
        </ETab>
    );
};

export default TabExample;

Props

• For ETab component, the following props are available:

Prop	Type	Default	Note
value	[String, Number]	-	Controls selected tab.
vertical	Boolean	false	It organizes your tabs vertically.
square	Boolean	false	Removes rounded corners of the element.
grow	Boolean	false	Makes the tab items expand to fit the full container width.
align	String	"start"	Specifies how the tab items are distributed along the cross axis in a container.
stacked	Boolean	false	Places an icon and text of the ETabItem behind each other on one line vertically.
variant	String	"fill"	The ETab element can be represented in three ways: fill, alternate. alternate displays the chip with a light background.
color	String	"primary"	The given color is applied to the tab - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
className	String	-	Overrides or extends the component's wrapper styles.
headerClassName	String	-	Overrides or extends the header styles.

• For ETabItem component, the following props are available:

Prop	Type	Default	Note
value	Boolean	false	You can Add your own value. If not, we will default to the index of the child position.
variant	String	"fill"	The ETab element can be represented in three ways: fill, alternate. alternate displays the chip with a light background.
icon	Object	-	By using icon prop the ETabItem element will be visualized with an Icon. More Info about icons here.
id	String	-	HTML id attribute.
color	String	"primary"	The given color is applied to the tab - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
stacked	Boolean	false	Places an icon and text of the ETabItem behind each other on one line vertically.
className	String	-	Overrides or extends the component's wrapper styles.

• For ETabContent component, the following props are available:

Prop	Type	Default	Note
id	String	-	HTML id attribute.
value	Boolean	false	You can Add your own value. If not, we will default to the index of the child position.
className	String	-	Overrides or extends the component's wrapper styles.

Callback Functions

The ETab component contains following callback functions.

Function	Description
onChange	Controls the active tab. function(event: React.SyntheticEvent, currentTab: Number) => void 👇 • event: The event source of the callback. • currentTab: current tab value.

Children

The ETab component provides a children props that enable you to customize the content.

Children	Description
ETabItem	Component’s items.
ETabContent	Component’s content.

The ETabItem and ETabContent component provide a children props that enable you to customize the content.

Children	Description
✔️	Component’s content.