A metabox component with optional header and footer.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
collapsibleboolean

Whether the meta box is collapsible.

collapsibleIconstring

The icon for the collapsible button.

collapsibleIconPrefixstring

The icon prefix for the collapsible button.

collapsedboolean

Whether the meta box is collapsed.

contentIdstring

The ID for the content, used for a11y when collapsible is true.

childrenJSX.Element

React element children.

customAttributesobject

Custom attributes for the layout.

customClassesstring | Array | object

Custom classes for the layout.

HeaderContentJSX.Element

The header element.

i18nobject

Internationalization object.

FooterContentJSX.Element

The footer element.

spacingstring | number | Array | object

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

tagNamestring

The tag name for the layout.

Since
  • 1.1.15
Source
Returns:

The MetaBox component.

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

const HeaderContent = ( props ) => <SomeComponent { ...props } />;
const FooterContent = ( props ) => <SomeComponent { ...props } />;

<MetaBox
   HeaderContent={ HeaderContent }
   FooterContent={ FooterContent }
   customClasses={ 'my-custom-class' }
   customAttributes={ { 'data-custom-attribute': 'custom' } }
   tagName={ 'section' }
>
  <div>Content</div>
</MetaBox>