diff --git a/apps/website/screens/components/tabs/TabsPageLayout.tsx b/apps/website/screens/components/tabs/TabsPageLayout.tsx
index f36e61bd52..b579a2fc2e 100644
--- a/apps/website/screens/components/tabs/TabsPageLayout.tsx
+++ b/apps/website/screens/components/tabs/TabsPageLayout.tsx
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
const TabsPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/tabs" },
- { label: "Usage", path: "/components/tabs/usage" },
- { label: "Specifications", path: "/components/tabs/specifications" },
+ { label: "Overview", path: "/components/tabs" },
+ { label: "Code", path: "/components/tabs/code" },
];
return (
@@ -17,10 +16,11 @@ const TabsPageHeading = ({ children }: { children: ReactNode }) => {
- Tabs allow the user to interact across the sections to switch from one set of content to another, making the
- transition easily from one peer to the other.
+ A tab is a UI component that allows users to switch between different sections of content without leaving
+ the page. Tabs are often used to organize related information into distinct views, making it easier to
+ navigate between them.
-
+
{children}
diff --git a/apps/website/screens/components/tabs/code/TabsCodePage.tsx b/apps/website/screens/components/tabs/code/TabsCodePage.tsx
index 3771bee221..3a4ac1b9b9 100644
--- a/apps/website/screens/components/tabs/code/TabsCodePage.tsx
+++ b/apps/website/screens/components/tabs/code/TabsCodePage.tsx
@@ -4,9 +4,9 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import Code from "@/common/Code";
import Example from "@/common/example/Example";
-import controlledLegacy from "./examples-old/controlled";
-import uncontrolledLegacy from "./examples-old/uncontrolled";
-import iconsLegacy from "./examples-old/icons";
+import controlledDeprecated from "./examples-old/controlled";
+import uncontrolledDeprecated from "./examples-old/uncontrolled";
+import iconsDeprecated from "./examples-old/icons";
import TableCode from "@/common/TableCode";
import StatusBadge from "@/common/StatusBadge";
import controlled from "./examples-new/controlled";
@@ -30,20 +30,7 @@ const sections = [
|
-
- defaultActiveTabIndex
-
- |
-
- number
- |
- Initially active tab, only when it is uncontrolled. |
- - |
-
-
- |
-
-
+
activeTabIndex
|
@@ -59,60 +46,30 @@ const sections = [
|
-
- tabs
+ {/* TODO: Swap experimental for required once old logic is removed */}
+
+ children
|
-
- {
- "{ label: string, icon: string | (React.ReactNode & React.SVGProps ), isDisabled: boolean, notificationNumber: boolean | number }[]"
- }
-
+ React.ReactNode
|
- An array of objects representing the tabs. Each of them has the following properties:
-
- -
- label: Tab label.
-
- -
- icon:{" "}
-
- Material Symbol
- {" "}
- name or SVG element used as the icon that will be displayed in the tab. When using Material Symbols,
- replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the
- symbol name with "filled_".
-
- -
- isDisabled: Whether the tab is disabled or not. If the component is uncontrolled and the
- selected tab is disabled, the first non-disabled tab from the array will be selected.
-
- -
- notificationNumber: It can have boolean type or number type. If true, an empty badge will
- appear. If false or if the tab is disabled, no badge will appear. If a number is specified, the
- component will display a badge with the value as its label. Take into account that if that number is
- greater than 99, it will appear as +99 in the badge.
-
-
+ Contains one or more DxcTabs.Tab.
|
- |
|
- {/* TODO: Swap experimental for required once old logic is removed */}
-
- children
+
+ defaultActiveTabIndex
|
- React.ReactNode
- |
-
- Contains one or more DxcTabs.Tab.
+ number
|
+ Initially active tab, only when it is uncontrolled. |
- |
@@ -122,13 +79,24 @@ const sections = [
| Whether the icon should appear above or to the left of the label. |
- 'top'
+ 'left'
+ |
+
+
+ | margin |
+
+ 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
+ |
+
+ Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
+ 'right' properties in order to specify different margin sizes.
|
+ - |
|
-
+
onTabClick
|
@@ -144,7 +112,7 @@ const sections = [
|
-
+
onTabHover
|
@@ -158,27 +126,59 @@ const sections = [
- |
- | margin |
+ tabIndex |
- 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
+ number
|
- Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
- 'right' properties in order to specify different margin sizes.
+ Value of the tabindex attribute applied to each tab.
+ |
+
+ 0
|
- - |
- | tabIndex |
- number
+
+
+ tabs
+
|
- Value of the tabindex attribute applied to each tab.
+
+ {
+ "{ label: string, icon: string | (React.ReactNode & React.SVGProps ), isDisabled: boolean, notificationNumber: boolean | number }[]"
+ }
+
|
- 0
+ An array of objects representing the tabs. Each of them has the following properties:
+
+ -
+ label: Tab label.
+
+ -
+ icon:{" "}
+
+ Material Symbol
+ {" "}
+ name or SVG element used as the icon that will be displayed in the tab. When using Material Symbols,
+ replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the
+ symbol name with "filled_".
+
+ -
+ isDisabled: Whether the tab is disabled or not. If the component is uncontrolled and the
+ selected tab is disabled, the first non-disabled tab from the array will be selected.
+
+ -
+ notificationNumber: It can have boolean type or number type. If true, an empty badge will
+ appear. If false or if the tab is disabled, no badge will appear. If a number is specified, the
+ component will display a badge with the value as its label. Take into account that if that number is
+ greater than 99, it will appear as +99 in the badge.
+
+
|
+ - |