Skip to main content

Pivotal UI

v19.2.2

Flyout

The flyout appears from the right side of the window and overlays all other content until it is closed. Its visibility is controlled with the show property. It can take a custom width. The contents of the header and the body are set with the header and children properties, respectively. The behavior of the icon button is defined through the onHide callback.

The flyout will overlay its first parent that has position relative.

Basic example
ReferenceError: React is not defined

Props

PropertyRequiredTypeDefaultDescription
animationDurationnoNumber200Animation duration in milliseconds (Set to <= 0 to disable animations)
animationEasingnoStringcubic-bezier(0.25, 0.46, 0.45, 0.94)Animation easing function
bodyClassNamenoStringClass(es) to apply to the body
childrennoAnyContents of the flyout body
dialogClassNamenoStringClass(es) to apply to the modal dialog
headernoAnyContents of the flyout header
headerClassNamenoStringClass(es) to apply to the header
iconSrcnoString'close'Icon to use for the close button
onHideyesFunctionCallback that fires as soon as the modal begins closing
shownoBooleanfalseWhether or not the flyout is visible
widthnoString480pxWidth of flyout content

Imports

Import React components (including CSS):

import {Flyout} from 'pivotal-ui/react/flyout';

Import CSS only:

import 'pivotal-ui/css/flyout';