Flux

Appearance

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.

Props

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

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

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>

        <template #default="{ close }">
            <FluxMenu style="width: 270px">
                <FluxMenuGroup>
                    <FluxMenuItem
                        icon-leading="grid-2"
                        label="Overview"
                        @click="close()"/>
                </FluxMenuGroup>

                <FluxSeparator/>

                <FluxMenuGroup>
                    <FluxMenuItem
                        icon-leading="rocket"
                        label="Releases"
                        @click="close()"/>

                    <FluxMenuItem
                        icon-leading="rectangle-history"
                        label="History"
                        @click="close()"/>
                </FluxMenuGroup>

                <FluxSeparator/>

                <FluxMenuGroup>
                    <FluxMenuItem
                        icon-leading="gear"
                        label="Settings"
                        @click="close()"/>
                </FluxMenuGroup>
            </FluxMenu>
        </template>
    </FluxFlyout>
</template>

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

Used components ​