Layer pane

A layer pane groups related content in a structured panel. Place a Pane header or Pane footer directly inside it to frame the primary content with a contrasting tinted band.

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 header and a single pane.

Preview

Getting Started

Quick start guide for new users

Code

<template>
    <FluxLayerPane>
        <FluxPaneHeader title="Getting Started"/>

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

<script
    lang="ts"
    setup>
    import { FluxLayerPane, FluxPane, FluxPaneBody, FluxPaneHeader } 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

A header at the top and a footer at the bottom of the layer pane.

Preview

Resources

Documentation

Changelog

v2.4.0

Code

<template>
    <FluxLayerPane>
        <FluxPaneHeader title="Resources"/>

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

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

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

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

With buttons

A layer pane containing action buttons.

Preview

Quick Actions

Code

<template>
    <FluxLayerPane>
        <FluxPaneHeader title="Quick Actions"/>

        <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, FluxPane, FluxPaneBody, FluxPaneHeader, FluxSecondaryButton } from '@flux-ui/components';
</script>

With button group

A segmented button group as a view switcher in the pane header.

Preview

Calendar

Showing your schedule for this week.

Code

<template>
    <FluxLayerPane>
        <FluxPaneHeader title="Calendar">
            <template #after>
                <FluxButtonGroup>
                    <FluxSecondaryButton label="Day"/>

                    <FluxPrimaryButton label="Week"/>

                    <FluxSecondaryButton label="Month"/>
                </FluxButtonGroup>
            </template>
        </FluxPaneHeader>

        <FluxPane>
            <FluxPaneBody>Showing your schedule for this week.</FluxPaneBody>
        </FluxPane>
    </FluxLayerPane>
</template>

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

With items

A header with a trailing action, above a list of items with avatars and badges.

Preview

Team members

Bas MiliusEngineer

Active

Jane DoeDesigner

Active

John DoeProduct manager

Away

Code

<template>
    <FluxLayerPane>
        <FluxPaneHeader title="Team members">
            <template #after>
                <FluxSecondaryButton
                    icon-leading="user-plus"
                    label="Invite"/>
            </template>
        </FluxPaneHeader>

        <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, FluxPane, FluxPaneHeader, FluxSecondaryButton } 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>

With icon

A Pane header with an icon for a prominent section heading.

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
  • Footer