A flyout component in react.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
afterContentJSX.Element

Any custom content to be placed after the body of the flyout.

animationDelaynumber

Total runtime of close animation. Synchronize with css if modifying the built-in 170 ms delay.

beforeContentJSX.Element

Any custom content to be placed before the header of the flyout.

childrenJSX.Element

React element children.

closeButtonCustomAttributesobject

Custom attributes for the close button.

customAttributesobject

Custom attributes for the component.

customBodyClassesstring | Array | object

Custom classes for the flyout body as array.

customClassesstring | Array | object

Custom classes for the component.

customInnerBodyClassesstring | Array | object

Custom classes for the flyout inner_body as array.

descriptionstring

Subheading description for the flyout.

desktopWidthnumber

Width in % for the flyout on desktop.

directionstring

Flyout direction, left or right.

headerHeadingCustomAttributesobject

Custom attributes for the header heading.

headerDescriptionCustomAttributesobject

Custom attributes for the header description.

idstring

Flyout id.

isOpenboolean

Prop to control whether the dialog is currently open.

maxWidthnumber

Max width in pixels for the flyout.

mobileBreakpointnumber

Mobile breakpoint in pixels for the flyout.

mobileWidthnumber

Width in % for the flyout on mobile.

onClosefunction

Function to fire on flyout close.

onOpenfunction

Function to fire on flyout open.

positionstring

The position of the flyout, absolute or fixed.

showDividerboolean

Whether or not to show the divider border below title.

simplebarboolean

Whether or not to use SimpleBar on the content.

titlestring

The title of the flyout.

zIndexnumber

z-index of the flyout.

refobject | null

Ref to the component.

Since
  • 1.1.18
Source
Returns:

The Flyout component.

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

return (
    <Flyout direction="right" title="Flyout title">
        { children }
    </Flyout>
);

Methods

(inner) closeFlyout() → {void}

Closes the flyout and fires the onClose function if passed in.

Since
  • 1.1.18
Source
Returns:
Type: 
void

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

Returns the body that wrap the children of the flyout.

Since
  • 1.1.18
Source
Returns:
Type: 
JSX.Element

(inner) getCSS() → {string}

Returns the CSS used to handle the width and mobile media query.

Since
  • 1.1.18
Source
Returns:

The CSS for the flyout.

Type: 
string

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

Returns the header of the flyout that contains the title and description.

Since
  • 1.1.18
Source
Returns:
Type: 
JSX.Element

(inner) showFlyout() → {void}

Opens the flyout and fires the onOpen function if passed in.

Since
  • 1.1.18
Source
Returns:
Type: 
void