Layer pane

A layer pane groups related content in a structured panel. Secondary sections provide a contrasting gray header or footer around the primary content.

Getting Started

Quick start guide for new users

Props

color?: FluxColor
The color of the layer pane.
Default: gray

Slots

default
The content of the layer pane.

Examples

Basic

A layer pane with a secondary header and a single pane.

Preview

Getting Started

Quick start guide for new users

Code

<template>
    <FluxLayerPane>
        <FluxLayerPaneSecondary>Getting Started</FluxLayerPaneSecondary>

        <FluxPane>
            <FluxPaneBody>Quick start guide for new users</FluxPaneBody>
        </FluxPane>
    </FluxLayerPane>
</template>

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

Colors

Use the `color` prop to convey meaning, such as severity or status.

Preview

Resources

Browse documentation, release notes and developer guides for your team.

Upgrade to Pro

Unlock advanced analytics, unlimited seats and priority support.

Update available

Version 2.5.0 is ready to install. Restart the application to apply the update.

Backup completed

Your latest backup finished successfully and is stored securely in the cloud.

Scheduled maintenance

The platform will be unavailable on Sunday between 02:00 and 04:00 UTC.

Payment failed

We could not process your last invoice. Update your billing details to avoid service interruption.

Code

<template>
    <FluxFlex
        direction="vertical"
        :gap="9">
        <FluxLayerPane>
            <FluxPaneHeader
                icon="file-lines"
                title="Resources"/>

            <FluxPane>
                <FluxPaneBody>Browse documentation, release notes and developer guides for your team.</FluxPaneBody>
            </FluxPane>
        </FluxLayerPane>

        <FluxLayerPane color="primary">
            <FluxPaneHeader
                icon="sparkles"
                title="Upgrade to Pro"/>

            <FluxPane>
                <FluxPaneBody>Unlock advanced analytics, unlimited seats and priority support.</FluxPaneBody>
            </FluxPane>
        </FluxLayerPane>

        <FluxLayerPane color="info">
            <FluxPaneHeader
                icon="circle-info"
                title="Update available"/>

            <FluxPane>
                <FluxPaneBody>Version 2.5.0 is ready to install. Restart the application to apply the update.</FluxPaneBody>
            </FluxPane>
        </FluxLayerPane>

        <FluxLayerPane color="success">
            <FluxPaneHeader
                icon="circle-check"
                title="Backup completed"/>

            <FluxPane>
                <FluxPaneBody>Your latest backup finished successfully and is stored securely in the cloud.</FluxPaneBody>
            </FluxPane>
        </FluxLayerPane>

        <FluxLayerPane color="warning">
            <FluxPaneHeader
                icon="hourglass-clock"
                title="Scheduled maintenance"/>

            <FluxPane>
                <FluxPaneBody>The platform will be unavailable on Sunday between 02:00 and 04:00 UTC.</FluxPaneBody>
            </FluxPane>
        </FluxLayerPane>

        <FluxLayerPane color="danger">
            <FluxPaneHeader
                icon="circle-exclamation"
                title="Payment failed"/>

            <FluxPane>
                <FluxPaneBody>We could not process your last invoice. Update your billing details to avoid service interruption.</FluxPaneBody>
            </FluxPane>
        </FluxLayerPane>
    </FluxFlex>
</template>

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

With footer

Secondary sections can be placed at the top, bottom, or both.

Preview

Resources

Documentation

Changelog

v2.4.0

Code

<template>
    <FluxLayerPane>
        <FluxLayerPaneSecondary>Resources</FluxLayerPaneSecondary>

        <FluxPane>
            <FluxPaneBody>Documentation</FluxPaneBody>
        </FluxPane>

        <FluxPane>
            <FluxPaneBody>Changelog</FluxPaneBody>
        </FluxPane>

        <FluxLayerPaneSecondary>v2.4.0</FluxLayerPaneSecondary>
    </FluxLayerPane>
</template>

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

With buttons

A layer pane containing action buttons.

Preview

Quick Actions

Code

<template>
    <FluxLayerPane>
        <FluxLayerPaneSecondary>Quick Actions</FluxLayerPaneSecondary>

        <FluxPane>
            <FluxPaneBody>
                <FluxButtonStack direction="vertical">
                    <FluxSecondaryButton
                        is-filled
                        icon-leading="file-plus"
                        label="New document"/>

                    <FluxSecondaryButton
                        is-filled
                        icon-leading="upload"
                        label="Import file"/>

                    <FluxDestructiveButton
                        is-filled
                        icon-leading="trash"
                        label="Delete all"/>
                </FluxButtonStack>
            </FluxPaneBody>
        </FluxPane>
    </FluxLayerPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxButtonStack, FluxDestructiveButton, FluxLayerPane, FluxLayerPaneSecondary, FluxPane, FluxPaneBody, FluxSecondaryButton } from '@flux-ui/components';
</script>

With items

A layer pane with a list of items, avatars, and badges.

Preview

Team members

Bas MiliusEngineer

Active

Jane DoeDesigner

Active

John DoeProduct manager

Away

Code

<template>
    <FluxLayerPane>
        <FluxLayerPaneSecondary>Team members</FluxLayerPaneSecondary>

        <FluxPane>
            <FluxItemStack>
                <FluxItem
                    v-for="member in members"
                    :key="member.name">
                    <FluxItemMedia
                        is-center
                        :size="36">
                        <FluxAvatar
                            :alt="member.name"
                            fallback-icon="user"
                            :size="36"/>
                    </FluxItemMedia>

                    <FluxItemContent is-center>
                        <strong>{{ member.name }}</strong>
                        <span>{{ member.role }}</span>
                    </FluxItemContent>

                    <FluxItemActions is-center>
                        <FluxBadge
                            :color="member.color"
                            :label="member.status"/>
                    </FluxItemActions>
                </FluxItem>
            </FluxItemStack>
        </FluxPane>
    </FluxLayerPane>
</template>

<script
    lang="ts"
    setup>
    import type { FluxColor } from '@flux-ui/types';
    import { FluxAvatar, FluxBadge, FluxItem, FluxItemActions, FluxItemContent, FluxItemMedia, FluxItemStack, FluxLayerPane, FluxLayerPaneSecondary, FluxPane } from '@flux-ui/components';

    const members: { name: string; role: string; status: string; color: FluxColor }[] = [
        {name: 'Bas Milius', role: 'Engineer', status: 'Active', color: 'success'},
        {name: 'Jane Doe', role: 'Designer', status: 'Active', color: 'success'},
        {name: 'John Doe', role: 'Product manager', status: 'Away', color: 'warning'}
    ];
</script>

Secondary with button

A button inside the secondary section to trigger an action.

Preview

Team members

Bas MiliusEngineer

Jane DoeDesigner

John DoeProduct manager

Code

<template>
    <FluxLayerPane>
        <FluxLayerPaneSecondary>
            Team members

            <FluxSpacer/>

            <FluxSecondaryButton
                icon-leading="user-plus"
                label="Invite"/>
        </FluxLayerPaneSecondary>

        <FluxPane>
            <FluxItemStack>
                <FluxItem
                    v-for="member in members"
                    :key="member.name">
                    <FluxItemMedia
                        is-center
                        :size="36">
                        <FluxAvatar
                            :alt="member.name"
                            fallback-icon="user"
                            :size="36"/>
                    </FluxItemMedia>

                    <FluxItemContent is-center>
                        <strong>{{ member.name }}</strong>
                        <span>{{ member.role }}</span>
                    </FluxItemContent>
                </FluxItem>
            </FluxItemStack>
        </FluxPane>
    </FluxLayerPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxAvatar, FluxItem, FluxItemContent, FluxItemMedia, FluxItemStack, FluxLayerPane, FluxLayerPaneSecondary, FluxPane, FluxSecondaryButton, FluxSpacer } from '@flux-ui/components';

    const members = [
        {name: 'Bas Milius', role: 'Engineer'},
        {name: 'Jane Doe', role: 'Designer'},
        {name: 'John Doe', role: 'Product manager'}
    ];
</script>

Secondary with badge

A badge inside the secondary section to show a count.

Preview

Notifications

3

Deployment finishedProduction environment updated successfully

New commentJane left a comment on your pull request

Invite acceptedJohn joined your workspace

Code

<template>
    <FluxLayerPane>
        <FluxLayerPaneSecondary>
            Notifications
            <FluxSpacer/>
            <FluxBadge
                color="danger"
                label="3"/>
        </FluxLayerPaneSecondary>

        <FluxPane>
            <FluxItemStack>
                <FluxItem>
                    <FluxItemContent>
                        <strong>Deployment finished</strong>
                        <span>Production environment updated successfully</span>
                    </FluxItemContent>
                </FluxItem>

                <FluxItem>
                    <FluxItemContent>
                        <strong>New comment</strong>
                        <span>Jane left a comment on your pull request</span>
                    </FluxItemContent>
                </FluxItem>

                <FluxItem>
                    <FluxItemContent>
                        <strong>Invite accepted</strong>
                        <span>John joined your workspace</span>
                    </FluxItemContent>
                </FluxItem>
            </FluxItemStack>
        </FluxPane>
    </FluxLayerPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxBadge, FluxItem, FluxItemContent, FluxItemStack, FluxLayerPane, FluxLayerPaneSecondary, FluxPane, FluxSpacer } from '@flux-ui/components';
</script>

With pane header

Use a [Pane header](./header) instead of a secondary section when you need a prominent title with an icon and optional subtitle.

Preview

Performance

RevenueTotal revenue this period

+12%

OrdersNumber of orders placed

+4%

RefundsRefunds processed

-2%

Code

<template>
    <FluxLayerPane>
        <FluxPaneHeader
            icon="chart-line"
            title="Performance"/>

        <FluxPane>
            <FluxItemStack>
                <FluxItem
                    v-for="metric in metrics"
                    :key="metric.label">
                    <FluxItemContent>
                        <strong>{{ metric.label }}</strong>
                        <span>{{ metric.description }}</span>
                    </FluxItemContent>

                    <FluxItemActions is-center>
                        <FluxBadge
                            :color="metric.color"
                            :label="metric.value"/>
                    </FluxItemActions>
                </FluxItem>
            </FluxItemStack>
        </FluxPane>
    </FluxLayerPane>
</template>

<script
    lang="ts"
    setup>
    import type { FluxColor } from '@flux-ui/types';
    import { FluxBadge, FluxItem, FluxItemActions, FluxItemContent, FluxItemStack, FluxLayerPane, FluxPane, FluxPaneHeader } from '@flux-ui/components';

    const metrics: { label: string; description: string; value: string; color: FluxColor }[] = [
        {label: 'Revenue', description: 'Total revenue this period', value: '+12%', color: 'success'},
        {label: 'Orders', description: 'Number of orders placed', value: '+4%', color: 'success'},
        {label: 'Refunds', description: 'Refunds processed', value: '-2%', color: 'danger'}
    ];
</script>

Used components

• Pane
  • Body
  • Header