Flyout
EuiFlyout is a fixed position panel that pops in from the right side of the screen. It should be used any time you need to perform quick, individual actions to a larger page or list.
sizeacceptss / m / land defines the width of the panel.ownFocusis a boolean that whentruewill lock the mouse / keyboard focus to within the flyout. It is off by default.maxWidthaccepts a boolean or number. When set totrue, it adds a predefined maxWidth, or you can pass an integer to set the max width to a custom pixel value or pass a string to set it to a custom measurement.
Notice how these examples use aria-labelledby to announce the flyout to screen readers when the user opens it.
More complicated flyout
In this example we use EuiFlyoutHeader andEuiFlyoutFooter to allow for fixed position navigation and actions within a flyout. Note that any content within EuiContentBody will automatically overflow.
Small flyout, ownFocus
In this example, we set size to s and apply the ownFocus prop. The latter not only traps the focus of our flyout, but also adds background overlay to reinforce your boundaries.
Large flyout
In this example, we set size to l.
Max width
By default, flyouts will continue to grow with the width of the window. To stop this growth at an ideal width, set maxWidth to true, or pass your own custom size.