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.
`componentsPrefix`	string	Component system prefix, e.g. `gform-admin` or `gravitycrm-admin`.
`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.
`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.
`i18n`	object	Translated strings for the UI.
`iconPrefix`	string	The prefix for the icon library to be used.
`icons`	object	Icons for the UI.
`id`	string	Flyout id.
`isExpanded`	boolean	Prop to control whether the flyout is expanded.
`isOpen`	boolean	Prop to control whether the dialog is open.
`isPinned`	boolean	Prop to control whether the flyout is pinned.
`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.
`offset`	string	Top offset for the flyout.
`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.
`onExpandedChange`	function	Callback fired when expanded state changes.
`onOpen`	function	Function to fire on flyout open.
`onPinnedChange`	function	Callback fired when pinned state changes.
`onPinnedWidthChange`	function	Callback fired when pinned width changes via drag.
`pinnable`	boolean	Whether to enable the ability to allow pinning of the flyout.
`pinnedActiveContentSelector`	string	Selector for the pinned, active content, to scroll into view.
`pinnedButtonCustomAttributes`	object	Custom attributes for the pinning button.
`pinnedContentSelector`	string	Selector for the content that needs the pinned flyout width offset.
`pinnedContentMinWidth`	number	Min width in pixels for the pinned content.
`pinnedDragHandleAriaValueText`	string	Template for the aria-valuetext attribute. Use %d for width value, e.g. "Flyout width %d pixels".
`pinnedDragHandleLabel`	string	Label for the pinned drag handle.
`pinnedDragHandleKeyboardStep`	number	Step size for the pinned drag handle when using keyboard.
`pinnedDragHandleKeyboardStepLarge`	number	Step size for the pinned drag handle when using keyboard and shift key is pressed.
`pinnedDefaultWidth`	number	Default width in pixels when pinned.
`pinnedMaxWidth`	number	Max width in pixels when pinned.
`pinnedMinWidth`	number	Min width in pixels when pinned.
`pinnedWidth`	number	Current pinned width in pixels. Used for persistent state.
`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 18

Returns:

The Flyout component.

Type:: JSX.Element

Examples

import Flyout from '@gravityforms/components/react/admin/modules/Flyout';

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

// With external state management
return (
    <Flyout
        direction="right"
        isExpanded={ expandedState }
        isOpen={ openState }
        isPinned={ pinnedState }
        onClose={ () => setOpenState( false ) }
        onExpandedChange={ ( val ) => setExpandedState( val ) }
        onPinnedChange={ ( val ) => setPinnedState( val ) }
        title="Flyout title"
    >
        { children }
    </Flyout>
);