🚧 This website is work in progress 👷
Components
Structure
Tabs
Published

Tabs

Tabs

Editable Example

import { Tabs } from "@wfp/react";

() => {
  return <Tabs onSelectionChange={function P() {}} />;
};
PropDefaultDescriptionValue

ariaLabel

string
–

Specify the text to be read by screen-readers when visiting the <Tabs> component

children

ReactNode
–

Pass in a collection of <Tab> children to be rendered depending on the currently selected tab

className

string
–

Provide a className that is applied to the root <nav> component for the <Tabs>

customTabContent

boolean
–

Provide a customTabContent by using independent action triggers inside the Tabs

disableAnimation

boolean
–

Specify whether the animation should be used

inline

boolean
–

Specify whether the Tabs are displayed inline

hidden

boolean
–

Specify whether the Tab content is hidden

role

string
–

By default, this value is "navigation". You can also provide an alternate role if it makes sense from the accessibility-side

onClick

() => void
–

Optionally provide an onClick handler that is invoked when a <Tab> is clicked

onKeyDown

() => void
–

Optionally provide an onKeyDown handler that is invoked when keyed navigation is triggered

onSelectionChange

(index: any) => void
–

Provide an optional handler that is called whenever the selection changes. This method is called with the index of the tab that was selected

triggerHref

string
–

Provide a string that represents the href for the triggered <Tab>

selected

string
–

Optionally provide an index for the currently selected <Tab>

tabsContentMarginTop

string
–

Specify margin top fo the contend of tab, 0px by default

Tab

Editable Example

import {} from "@wfp/react";

() => {
  return <ad />;
};
PropDefaultDescriptionValue

handleTabClick

(index?: number,label?: ReactNode,evt?: ChangeEvent<HTMLInputElement>) => void
–

Optional callback for when a tab is clicked. Provides the index, label, and event details. @functionality

handleTabAnchorFocus

(index?: number) => void
–

Optional callback for when a tab gains focus. Provides the index of the focused tab. @functionality

handleTabKeyDown

(index?: number,label?: ReactNode,evt?: ChangeEvent<HTMLInputElement>) => void
–

Optional callback for when a keydown event occurs on a tab. Provides the index, label, and event details. @functionality

href

string
–

Href for the tab, useful when each tab is associated with a different URL. @navigation

index

number
–

Index of the tab within the Tabs component. @navigation

label

ReactNode
–

Content to be displayed as the label of the tab. Can be a string or React node. @content

role

string
–

ARIA role for the tab element, often set to 'tab'. @accessibility

selected

boolean
–

Indicates whether the tab is currently selected. @state

tabIndex

number
–

TabIndex for the tab, useful for accessibility and keyboard navigation. @accessibility

renderAnchor

(props?: object) => ReactNode
–

Optional custom renderer for the anchor element within the tab. @render

renderContent

() => ReactNode
–

Optional custom renderer for the content of the tab. @render

renderListElement

ReactNode |((props?: object) => ReactNode)
–

Optional custom renderer for the list element of the tab. @render

className

string
–

Optional CSS class to apply to the tab. Allows for additional styling. @style

disabled

boolean
–

Indicates whether the tab is disabled. @state

components

–

Optional components to replace default elements of the Tab, such as the Tab itself. @customization

On this page