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

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>

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>

Used components

• Pane
  • Body