Skip to content

Tabs Component

Description

The Tabs and Tab components allow navigation between different views or settings. It supports standard and scrollable variants.

Props - Tabs

Prop Type Default Description
value string - The currently selected tab value.
onChange (event, newValue: string) => void - Callback function triggered when a tab is clicked.
variant "standard" | "scrollable" "standard" Defines if the tabs are standard or scrollable.
scrollButtons boolean false Enables scroll buttons for overflow tabs.

Props - Tab

Prop Type Default Description
id string - Unique identifier for the tab.
label string | ReactNode - Label displayed inside the tab.
value string - The value of the tab, used for selection.
isActive boolean false Determines if the tab is currently active.
onClick (event) => void - Event triggered when the tab is clicked.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { Tab, Tabs } from "@nomana-it/liberty-core"
import { useState } from "react";

export const TabsExample = () => {
  const [selectedTab, setSelectedTab] = useState("general");

  const handleTabChange = (_event, newValue) => {
    setSelectedTab(newValue);
  };

  return (
    <div>
      <Tabs value={selectedTab} onChange={handleTabChange}>
        <Tab id="general" label="General" value="general" />
        <Tab id="advanced" label="Advanced" value="advanced" />
        <Tab id="settings" label="Settings" value="settings" />
      </Tabs>

      <div style={{ marginTop: "16px", padding: "8px", border: "1px solid #ddd" }}>
        {selectedTab === "general" && <p>General Settings Content</p>}
        {selectedTab === "advanced" && <p>Advanced Settings Content</p>}
        {selectedTab === "settings" && <p>Settings Panel Content</p>}
      </div>
    </div>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core