Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @react-md/tabs

Index

Type aliases

InitializedTabConfig

InitializedTabConfig: TabConfig & Required<Pick<TabConfig, "id">>

InitializedTabsManagerContext

InitializedTabsManagerContext: Required<TabsManagerContext>

TabsAlignment

TabsAlignment: "left" | "center" | "right"

The supported types of alignments for the tabs.

TabsProps

TabsProps: Omit<TabsListProps, "activeIndex" | "onActiveIndexChange">

Variables

Const Tab

Tab: ForwardRefExoticComponent<TabProps & RefAttributes<HTMLButtonElement>> = ...

The Tab is a low-level component that just renders an accessible tab widget along with some general styles and an optional icon.

Const TabPanel

TabPanel: ForwardRefExoticComponent<TabPanelProps & RefAttributes<HTMLDivElement>> = ...

This component renders an accessible tab panel with enter and exit animations. This probably should only be used internally as it relies on the TabPanels component along with the TransitionGroup from react-transition-group to work as expected.

Const TabPanels

TabPanels: ForwardRefExoticComponent<TabPanelsProps & RefAttributes<HTMLDivElement>> = ...

This component allows you to control the visibility of the TabPanel components and animating the next and current panels as needed. This works by looping over all the children and getting the current TabPanel by the activeIndex. This is why the children for this component can only be TabPanel and should not be conditional.

Const Tabs

Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>> = ...

The Tabs component is used to render all the configured tabs from the parent TabsManager component inside of the TabsList.

Const TabsList

TabsList: ForwardRefExoticComponent<TabsListProps & RefAttributes<HTMLDivElement>> = ...

The TabsList component is the container for all the individual Tabs that should be rendered. This handles adding an active indicator underneath the active tab and animating it to the new location when a new tab becomes active. It also handles the ability update which tab is selected when it has been clicked or updated with keyboard movement.

This should probably not be used outside of this package unless a custom implementation is desired.

Functions

TabsManager

  • The TabsManager is used to configure your Tabs component and handle some of the default behavior such as:

    • controlling the activeIndex
    • general tab configuration
    • callbacks when the tab has changed
    • providing an id prefix for all tabs for simplicity

    Parameters

    Returns ReactElement

useTabs

Generated using TypeDoc