Flux

Flyout ​

A flyout provides a hidden interactable pane that can be toggled open or closed by an opener element. Flyouts can be positioned vertically or horizontally and support configurable dimensions for enhanced flexibility.

TIP

The flyout pane is exposed as a role="dialog" and traps focus while open. Provide a label so assistive technology can announce the pane.

Props

direction?: FluxDirection
Specifies in what direction the flyout should open.
Default: vertical

label?: string
An accessible label for the flyout pane, exposed as aria-label on the dialog.

margin?: number
A margin from the opener element.
Default: 9

is-auto-width?: boolean
When enabled the pane sizes itself to its content instead of using the configured width.

width?: number | string
The width of the flyout pane in pixels (or any valid CSS length).

Slots

default ({
    readonly paneX: number;
    readonly paneY: number;
    readonly openerWidth: number;
    readonly openerHeight: number;
    close(): void;
})
The content of the flyout.

opener ({
    close(): void;
    open(): void;
    toggle(): void;
})
The element that opens the flyout.

Examples ​

Flyouts are great for rendering hidden menus.

<template>
    <FluxFlyout>
        <template #opener="{ open }">
            <FluxSecondaryButton
                icon-trailing="ellipsis-h"
                label="Menu"
                @click="open()"/>
        </template>

        <FluxMenu style="width: 210px">
            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="grid-2"
                    label="Overview"/>
            </FluxMenuGroup>

            <FluxSeparator/>

            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="rocket"
                    label="Releases"/>

                <FluxMenuItem
                    icon-leading="rectangle-history"
                    label="History"/>
            </FluxMenuGroup>

            <FluxSeparator/>

            <FluxMenuGroup>
                <FluxMenuItem
                    icon-leading="gear"
                    label="Settings"/>
            </FluxMenuGroup>
        </FluxMenu>
    </FluxFlyout>
</template>

<script
    lang="ts"
    setup>
    import { FluxFlyout, FluxMenu, FluxMenuGroup, FluxMenuItem, FluxSecondaryButton, FluxSeparator } from '@flux-ui/components';
</script>

Information

More information about an entity can also be shown within a flyout.

<template>
    <FluxFlyout>
        <template #opener="{ open }">
            <FluxSecondaryButton
                icon-leading="user"
                label="More information"
                @click="open()"/>
        </template>

        <FluxPaneBody style="max-width: 420px">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium consequatur, cupiditate debitis eveniet ex explicabo facere facilis fugit magni molestiae nemo nihil nobis nulla odit officiis praesentium rerum saepe voluptatibus!</p>
        </FluxPaneBody>
    </FluxFlyout>
</template>

<script
    lang="ts"
    setup>
    import { FluxFlyout, FluxPaneBody, FluxSecondaryButton } from '@flux-ui/components';
</script>

Used components ​