Flux

Appearance

Expandable ​

This component provides a toggleable container for additional content. It consists of a header with a label and a body that holds the expandable content. When the header button is clicked, the body opens or closes to reveal or hide the content.

TIP

Multiple expandables can be grouped together using Expandable Groups.

Required icons

minus
plus

Props

icon?: FluxIconName
The icon of the expandable header.

is-opened?: boolean
The state of the expandable.

label?: string
The label of the expandable header.

Emits

toggle: [boolean]
Triggered when the expandable is being opened or closed.

Slots

default
The content of the expandable.

header ({
    readonly label: string;
    readonly isOpen: boolean;
    close(): void;
    open(): void;
    toggle(): void;
})
A custom header for the expandable.

body ({
    readonly label: string;
    close(): void;
})
A custom body for the expandable.

Examples ​

Basic

The most basic form of an expandable.

<template>
    <FluxExpandable label="Expandable">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid asperiores, autem dignissimos dolores eligendi error, eum maxime necessitatibus pariatur quas qui quo quod ratione temporibus ullam ut, veritatis voluptate?</p>
    </FluxExpandable>
</template>

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

Pane

Expandables work great with panes.

<template>
    <FluxPane>
        <FluxExpandable label="Expandable">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid asperiores, autem dignissimos dolores eligendi error, eum maxime necessitatibus pariatur quas qui quo quod ratione temporibus ullam ut, veritatis voluptate?</p>
        </FluxExpandable>
    </FluxPane>
</template>

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

Custom

The header of an expandable can be overwritten with a slot called header. That slot is provided with an isOpen boolean and three functions to control the expandable.

<template>
    <FluxExpandable>
        <template #header="{close, open, toggle}">
            <FluxButtonStack>
                <FluxSecondaryButton
                    label="Open"
                    @click="open()"/>

                <FluxSecondaryButton
                    label="Close"
                    @click="close()"/>

                <FluxSecondaryButton
                    label="Toggle"
                    @click="toggle()"/>
            </FluxButtonStack>
        </template>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid asperiores, autem dignissimos dolores eligendi error, eum maxime necessitatibus pariatur quas qui quo quod ratione temporibus ullam ut, veritatis voluptate?</p>
    </FluxExpandable>
</template>

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

Used components ​