A tabs component.

Parameters:
NameTypeDescription
propsobject

The component props.

Properties
NameTypeDescription
activeTabnumber

The active tab index.

automaticboolean

Whether to automatically switch tabs using arrow keys.

controlledboolean

Whether the component is controlled.

customAttributesobject

Custom attributes for the component.

customClassesstring | Array | object

Custom classes for the component.

iconPrefixstring

The icon prefix for the component.

idstring

The id for the component.

spacingstring | number | Array | object

The spacing for the component, as a string, number, array, or object.

tabsArray

An array of objects for the tabs content.

tabWidthstring

The tab width for the component, one of auto or even.

Since
  • 4.7.2
Source
Returns:

The tabs component.

Type: 
JSX.Element
Example
import Tabs from '@gravityforms/components/react/admin/modules/Tabs';

return (
    <Tabs
        automatic={ true }
        tabs={ [
            {
                label: 'Tab 1',
                panel: 'Tab 1 Content',
            },
            {
                icon: 'ellipsis',
                label: 'Tab 2',
                panel: 'Tab 2 Content',
            },
            {
                label: 'Tab 3',
                status: '2',
                panel: 'Tab 3 Content',
            },
            {
                icon: 'trash',
                label: 'Tab 4',
                status: '97',
                panel: 'Tab 4 Content',
            }
        ] }
    />
);

Methods

(inner) getTabPanels() → {JSX.Element}

Get the tab panels.

Since
  • 4.7.2
Source
Returns:

The tab panels.

Type: 
JSX.Element

(inner) getTablist() → {JSX.Element}

Get the tablist.

Since
  • 4.7.2
Source
Returns:

The tablist.

Type: 
JSX.Element