Flux

Appearance

Adaptive slot ​

The adaptive slot shows its default content whenever it fits within the space the component is allocated by its parent layout. When the default content is wider than the available space, the fallback content is rendered instead. This is useful for toolbars where buttons should collapse to icon-only variants, or even disappear, as horizontal space shrinks.

Wrap multiple adaptive slots inside a FluxAdaptiveGroup to control the order in which they collapse.

TIP

When used standalone (without a FluxAdaptiveGroup), the component measures its own allocated width. Multiple standalone slots in the same parent each decide independently — the one with the widest default content typically collapses first.

WARNING

Place the component inside a layout where it is allowed to shrink below its natural width. In a standalone flex context the default flex-shrink: 1 is enough; in a grid context use minmax(0, auto) or similar. Inside a FluxAdaptiveGroup this is handled automatically.

Props

priority?: number
Priority for collapse ordering when inside a `FluxAdaptiveGroup`. Lower values collapse first; higher values keep their default slot longer. Ignored when the slot is used standalone.
Default: 1

Slots

default
The preferred content. Rendered whenever it fits within the space allocated to the component.

fallback
The content rendered when the default slot does not fit. Optional — leave it out to hide the component entirely when default does not fit.

Examples ​

Standalone

Two buttons that each decide on their own whether to show their label based on the space they are allocated.

<template>
    <Preview>
        <FluxPane style="width: min(100%, 360px); resize: horizontal; overflow: auto">
            <FluxPaneBody>
                <FluxRow :gap="9">
                    <FluxAdaptiveSlot>
                        <FluxSecondaryButton
                            icon-leading="magnifying-glass"
                            label="Search"/>

                        <template #fallback>
                            <FluxSecondaryButton icon-leading="magnifying-glass"/>
                        </template>
                    </FluxAdaptiveSlot>

                    <FluxAdaptiveSlot>
                        <FluxSecondaryButton
                            icon-leading="filter"
                            label="Filter"/>

                        <template #fallback>
                            <FluxSecondaryButton icon-leading="filter"/>
                        </template>
                    </FluxAdaptiveSlot>
                </FluxRow>
            </FluxPaneBody>
        </FluxPane>
    </Preview>
</template>

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