Flux

Appearance

Overflow bar ​

The overflow bar is a layout component that shows as many of its child items as possible within the available space. Items that do not fit are hidden and passed to the overflow slot, where you can render them in a flyout or dropdown. This is particularly useful in toolbars and filter bars.

Props

alignment?: FluxAlignment
The alignment of the visible items.
Default: center

direction?: FluxDirection
The direction of the overflow bar.
Default: horizontal

gap?: number
The gap in pixels between items.
Default: 9

Slots

default
The items to display. Items that do not fit are hidden and passed to the overflow slot.

overflow ({
    readonly items: VNode[];
})
Content rendered when items overflow. Receives the hidden items as a prop.

Examples ​

With flyout

Hidden items can be revealed in a flyout menu through the `overflow` slot.

<template>
    <Preview>
        <FluxPane style="width: min(100%, 480px)">
            <FluxPaneBody>
                <FluxOverflowBar
                    alignment="end"
                    :gap="9">
                    <FluxSecondaryButton
                        v-for="label in buttons"
                        :key="label"
                        :label="label"/>

                    <template #overflow="{ items }">
                        <FluxFlyout v-if="items.length > 0">
                            <template #opener="{toggle}">
                                <FluxSecondaryButton
                                    :label="`+${items.length} more`"
                                    @click="toggle"/>
                            </template>

                            <FluxMenu>
                                <component
                                    :is="item"
                                    v-for="(item, index) in items"
                                    :key="index"/>
                            </FluxMenu>
                        </FluxFlyout>
                    </template>
                </FluxOverflowBar>
            </FluxPaneBody>
        </FluxPane>
    </Preview>
</template>

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

    const buttons = ['Export', 'Import', 'Duplicate', 'Archive', 'Delete', 'Share', 'Print'];
</script>

Used components ​