Expandable group

This component groups multiple Expandables together, allowing for collective control of their open and close states. It provides mechanisms to register, unregister, and close all expandable items within the group. The first item in an uncontrolled group opens by default.

Props

is-controlled?: boolean
Allows the group to be controlled through the is-opened prop of each expandable.

Slots

default
Expandables that should be part of the group.

Examples

Default

An expandable group makes sure that only one expandable is open at ant moment. It closes other expandables when one is opened.

Preview

Code

<template>
    <FluxExpandableGroup>
        <FluxExpandable label="Item 1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum dolore dolores ex modi obcaecati quis, reiciendis repudiandae saepe tempora? Aliquam doloribus, incidunt ipsa iusto maxime possimus provident voluptas. Veritatis.</p>
        </FluxExpandable>

        <FluxExpandable label="Item 2">
            <p>Architecto aut consequatur cupiditate eaque expedita id illum labore mollitia numquam omnis perferendis porro provident, quam rem temporibus veritatis voluptatum. Ad corporis dolor dolorum eligendi expedita quibusdam rem, sapiente sit?</p>
        </FluxExpandable>

        <FluxExpandable label="Item 3">
            <p>Ab asperiores autem commodi culpa deserunt dolorem. Alias cum cupiditate dignissimos eaque enim error fuga hic, itaque minima natus nihil, nobis perspiciatis quae quibusdam recusandae, repellat sint? Perspiciatis, rerum, vitae.</p>
        </FluxExpandable>
    </FluxExpandableGroup>
</template>

<script
    lang="ts"
    setup>
    import { FluxExpandable, FluxExpandableGroup } from '@flux-ui/flux';
</script>

Pane

Grouped expandables are especially nice within a Pane.

Preview

Code

<template>
    <FluxPane>
        <FluxExpandableGroup>
            <FluxExpandable label="Item 1">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cum dolore dolores ex modi obcaecati quis, reiciendis repudiandae saepe tempora? Aliquam doloribus, incidunt ipsa iusto maxime possimus provident voluptas. Veritatis.</p>
            </FluxExpandable>

            <FluxExpandable label="Item 2">
                <p>Architecto aut consequatur cupiditate eaque expedita id illum labore mollitia numquam omnis perferendis porro provident, quam rem temporibus veritatis voluptatum. Ad corporis dolor dolorum eligendi expedita quibusdam rem, sapiente sit?</p>
            </FluxExpandable>

            <FluxExpandable label="Item 3">
                <p>Ab asperiores autem commodi culpa deserunt dolorem. Alias cum cupiditate dignissimos eaque enim error fuga hic, itaque minima natus nihil, nobis perspiciatis quae quibusdam recusandae, repellat sint? Perspiciatis, rerum, vitae.</p>
            </FluxExpandable>
        </FluxExpandableGroup>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxExpandable, FluxExpandableGroup, FluxPane } from '@flux-ui/flux';
</script>