Flux

Appearance

Pane deck ​

The pane deck is used to group multiple panes together into a cohesive layout. It manages spacing and alignment between panes, helping create organized sections of information or features.

Pane 1
Pane 2
Pane 3

Props

min-column-width: number
The minimal width of each pane.

Slots

default
The panes that should be grouped.

Examples ​

Basic

A basic pane deck.

Pane 1
Pane 2
Pane 3 

<template>
    <FluxPaneDeck
        :min-column-width="150"
        style="width: 90%; margin: 0 auto;">
        <FluxPane>
            <FluxPaneBody>
                Pane 1
            </FluxPaneBody>
        </FluxPane>

        <FluxPane>
            <FluxPaneBody>
                Pane 2
            </FluxPaneBody>
        </FluxPane>

        <FluxPane>
            <FluxPaneBody>
                Pane 3
            </FluxPaneBody>
        </FluxPane>
    </FluxPaneDeck>
</template>

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

Used components ​