Module: Flyout

A flyout component in react.

Parameters:

Name Type Description

props

object

Component props.

Properties

Name	Type	Description
`afterContent`	JSX.Element	Any custom content to be placed after the body of the flyout.
`animationDelay`	number	Total runtime of close animation. Synchronize with css if modifying the built-in 250 ms delay.
`beforeContent`	JSX.Element	Any custom content to be placed before the header of the flyout.
`children`	JSX.Element	React element children in the flyout body.
`closeButtonCustomAttributes`	object	Custom attributes for the close button.
`closeOnMaskClick`	boolean	Whether to close if the background mask is clicked.
`customAttributes`	object	Custom attributes for the component.
`customBodyClasses`	string \| Array \| object	Custom classes for the flyout body as array.
`customClasses`	string \| Array \| object	Custom classes for the component.
`customInnerBodyClasses`	string \| Array \| object	Custom classes for the flyout inner_body as array.
`customMaskClasses`	string \| Array \| object	Custom classes for the mask as array.
`description`	string	Subheading description for the flyout.
`desktopWidth`	string	Width for the flyout on desktop.
`direction`	string	Flyout direction, left or right.
`expandable`	boolean	Whether to enable the ability to allow expanding to a larger width.
`expandableButtonCustomAttributes`	object	Custom attributes for the expandable button.
`expandableWidthDesktop`	string	Width to expand to if expanded on desktop.
`expandableWidthMobile`	string	Width to expand to if expanded on mobile.
`footerChildrenLeft`	JSX.Element	React element children in the flyout footer on the left.
`footerChildrenRight`	JSX.Element	React element children in the flyout footer on the right.
`footerIsFixed`	boolean	Whether or not the footer is fixed.
`headerChildrenLeft`	JSX.Element	React element children in the flyout header on the left.
`headerChildrenRight`	JSX.Element	React element children in the flyout header on the right.
`headerDescriptionCustomAttributes`	object	Custom attributes for the header description.
`headerHeadingCustomAttributes`	object	Custom attributes for the header heading.
`headerIsFixed`	boolean	Whether or not the header is fixed.
`id`	string	Flyout id.
`isExpanded`	boolean	Prop to control whether the flyout is currently expanded.
`isOpen`	boolean	Prop to control whether the dialog is currently open.
`maskBlur`	boolean	Whether to blur behind the mask for the flyout.
`maskClickExcludeButtons`	Array	Array of button codes that will not close the flyout on mask click, 0 = left click, 1 = middle click, 2 = right click, 3 = back button, 4 = forward button, 5 = X1, 6 = X2.
`maskTheme`	string	Mask background color scheme: `none`, `light` or `dark`
`maxWidth`	number	Max width in pixels for the flyout.
`mobileBreakpoint`	number	Mobile breakpoint in pixels for the flyout.
`mobileWidth`	string	Width for the flyout on mobile.
`offsetWPAdminBar`	boolean	Whether to offset the flyout from the WordPress admin bar.
`offsetWPAdminMenu`	boolean	Whether to offset the flyout from the WordPress admin menu.
`onClose`	function	Function to fire on flyout close.
`onOpen`	function	Function to fire on flyout open.
`position`	string	The position of the flyout, `absolute` or `fixed`.
`resetScrollOnOpen`	boolean	Whether to reset scroll on open.
`showDivider`	boolean	Whether or not to show the divider border below title.
`simplebar`	boolean	Whether or not to use SimpleBar on the content.
`title`	string	The title of the flyout.
`zIndex`	number	z-index of the flyout.

ref

object | null

Ref to the component.

Since: 1.1.18
Source: modules/Flyout/index.js, line 15

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>
);