Pane group

The pane group is used to visually connect multiple panes in a vertical stack. Instead of adding spacing, it applies a subtle 1px border between each pane to create clear separation while maintaining a seamless, continuous layout.

@flux-ui/components

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, blanditiis distinctio dolore eaque, eveniet fuga laborum maxime molestiae nemo nostrum, quis quo totam ullam. Accusantium animi aperiam cupiditate esse nisi.

@flux-ui/dashboard

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, blanditiis distinctio dolore eaque, eveniet fuga laborum maxime molestiae nemo nostrum, quis quo totam ullam. Accusantium animi aperiam cupiditate esse nisi.

@flux-ui/internals

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, blanditiis distinctio dolore eaque, eveniet fuga laborum maxime molestiae nemo nostrum, quis quo totam ullam. Accusantium animi aperiam cupiditate esse nisi.

Slots

default
The content of the grouped pane.

Examples

Basic

A basic grouped pane.

Preview

@flux-ui/components

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, blanditiis distinctio dolore eaque, eveniet fuga laborum maxime molestiae nemo nostrum, quis quo totam ullam. Accusantium animi aperiam cupiditate esse nisi.

@flux-ui/dashboard

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, blanditiis distinctio dolore eaque, eveniet fuga laborum maxime molestiae nemo nostrum, quis quo totam ullam. Accusantium animi aperiam cupiditate esse nisi.

@flux-ui/internals

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, blanditiis distinctio dolore eaque, eveniet fuga laborum maxime molestiae nemo nostrum, quis quo totam ullam. Accusantium animi aperiam cupiditate esse nisi.

Code

<template>
    <FluxPane>
        <FluxPaneGroup>
            <FluxPaneHeader title="@flux-ui/components"/>

            <FluxPaneBody>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, blanditiis distinctio dolore eaque, eveniet fuga laborum maxime molestiae nemo nostrum, quis quo totam ullam. Accusantium animi aperiam cupiditate esse nisi.
            </FluxPaneBody>
        </FluxPaneGroup>

        <FluxPaneGroup>
            <FluxPaneHeader title="@flux-ui/dashboard"/>

            <FluxPaneBody>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, blanditiis distinctio dolore eaque, eveniet fuga laborum maxime molestiae nemo nostrum, quis quo totam ullam. Accusantium animi aperiam cupiditate esse nisi.
            </FluxPaneBody>
        </FluxPaneGroup>

        <FluxPaneGroup>
            <FluxPaneHeader title="@flux-ui/internals"/>

            <FluxPaneBody>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, blanditiis distinctio dolore eaque, eveniet fuga laborum maxime molestiae nemo nostrum, quis quo totam ullam. Accusantium animi aperiam cupiditate esse nisi.
            </FluxPaneBody>
        </FluxPaneGroup>
    </FluxPane>
</template>

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