Flux

Appearance

Adaptive group ​

A group that coordinates multiple FluxAdaptiveSlot items so they collapse in a predictable, priority-based order instead of the one with the widest default content collapsing first. The group observes its own width and the desired widths of each child, and decides which items remain in their default slot and which switch to their fallback.

Items collapse in ascending order of their priority prop. The lowest-priority item that is still default is the first to switch to its fallback when space runs out; the highest-priority item keeps its default slot the longest.

TIP

The ordering is strict: if two items have the same priority, the one declared first in the template collapses first. Changing a priority at runtime is reactive — the group re-evaluates immediately.

Props

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

Slots

default
The `FluxAdaptiveSlot` items to orchestrate.

Snippet ​

vue
<template>
    <Preview>
        <FluxPane style="width: min(100%, 520px); resize: horizontal; overflow: auto">
            <FluxPaneBody>
                <FluxAdaptiveGroup :gap="9">
                    <FluxAdaptiveSlot :priority="2">
                        <FluxSecondaryButton
                            icon-leading="pen"
                            label="Edit"/>

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

                    <FluxAdaptiveSlot :priority="3">
                        <FluxSecondaryButton
                            icon-leading="copy"
                            label="Duplicate"/>

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

                    <FluxAdaptiveSlot :priority="1">
                        <FluxSecondaryButton
                            icon-leading="trash"
                            label="Delete"/>

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

                    <FluxAdaptiveSlot :priority="4">
                        <FluxPrimaryButton
                            icon-leading="circle-check"
                            label="Approve"/>

                        <template #fallback>
                            <FluxPrimaryButton icon-leading="circle-check"/>
                        </template>
                    </FluxAdaptiveSlot>
                </FluxAdaptiveGroup>
            </FluxPaneBody>
        </FluxPane>
    </Preview>
</template>

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

Used components ​