Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface TabsManagerProps

Hierarchy

  • Omit<TabsManagerContext, "activeIndex" | "onActiveIndexChange" | "tabs">
    • TabsManagerProps

Index

Properties

Properties

Optional activeIndex

activeIndex: number

If you want to control the current active index instead of relying on the built in behavior, you can provide an activeIndex prop which will be used instead. If this prop is defined, you must also provide the onActiveIndexChange so that keyboard functionality and tab changing behavior can still be used.

children

children: ReactNode

The children to render that should eventually have the Tabs component and the TabContent for matching specific tabs.

Optional defaultActiveIndex

defaultActiveIndex: number

The index of the tab that should be active by default. This is ignored if the activeIndex prop is defined.

Optional iconAfter

iconAfter: boolean

Boolean if the icon should appear after the text instead of before for all the tabs that have an icon. When the stacked prop is also enabled, it will cause the icon to appear below the text instead of above.

This is mostly a convenience prop so that you don't manually need to enable it for each tab in the tabs list and if a tab in the tabs list has the stacked attribute enabled defined, it will be used instead of this value.

Optional onActiveIndexChange

onActiveIndexChange: (activeIndex: number) => void

An optional function to call when the active index changes when the activeIndex prop is not provided. If the activeIndex prop is provided, this is required for keyboard accessibility.

Type declaration

    • (activeIndex: number): void

    • A function to call when the activeIndex should change due to keyboard movement or clicking on a tab.

      Parameters

      • activeIndex: number

      Returns void

Optional stacked

stacked: boolean

Boolean if all the tabs that have icons should be stacked instead of rendered inline.

This is mostly a convenience prop so that you don't manually need to enable it for each tab in the tabs list and if a tab in the tabs list has the stacked attribute enabled defined, it will be used instead of this value.

tabs

tabs: (string | ReactElement<any, string | JSXElementConstructor<any>> | TabConfig)[]

The list of tabs that should be controlled by the tabs manager.

tabsId

tabsId: string

This is an id prefix to use for all the child Tab, TabList, and TabPanel components.

example

id behavior

- `Tabs` -> id={id}
- `Tab` ->
   - id={`${id}-tab-${index + 1}`}
   - panelId={active && `${id}-panel-${index + 1}`}
- `TabPanel` -> id={`${id}-panel-${index + 1}`}

Generated using TypeDoc