A metabox component with optional header and footer.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
childrenJSX.Element

React element children.

collapsedboolean

Whether the meta box is collapsed.

collapsibleboolean

Whether the meta box is collapsible.

collapsibleIconstring

The icon for the collapsible button.

collapsibleIconPrefixstring

The icon prefix for the collapsible button.

contentIdstring

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

customAttributesobject

Custom attributes for the layout.

customClassesstring | Array | object

Custom classes for the layout.

FooterContentJSX.Element

The footer element.

HeaderContentJSX.Element

The header element.

i18nobject

Internationalization object.

spacingstring | number | Array | object

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

stylestring

The style for the component.

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>