Pane

A pane component is a container used to display content in a visually distinct section of a user interface. It serves as a way to separate and organize information. A pane is built with other Pane elements that each have their own purpose.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis id omnis placeat saepe soluta! Accusantium dolor facilis veritatis! Ab ad autem eaque earum error facere inventore quod sint soluta?

Props

is-loading?: boolean
If the pane is in a loading state.

tag?: string
The tag of the pane.

variant?: "default" | "flat" | "well"
The variant of the pane.
Default: default

Slots

default
The content of the pane.

loader
The loader of the pane.

Examples

Basic

A basic pane.

Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis id omnis placeat saepe soluta! Accusantium dolor facilis veritatis! Ab ad autem eaque earum error facere inventore quod sint soluta?

Code

<template>
    <FluxPane>
        <FluxPaneBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis id omnis placeat saepe soluta! Accusantium dolor facilis veritatis! Ab ad autem eaque earum error facere inventore quod sint soluta?
        </FluxPaneBody>
    </FluxPane>
</template>

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

Loading

A pane with a loading state.

Preview

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis id omnis placeat saepe soluta! Accusantium dolor facilis veritatis! Ab ad autem eaque earum error facere inventore quod sint soluta?

Code

<template>
    <FluxPane
        is-loading>
        <FluxPaneBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis id omnis placeat saepe soluta! Accusantium dolor facilis veritatis! Ab ad autem eaque earum error facere inventore quod sint soluta?
        </FluxPaneBody>
    </FluxPane>
</template>

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

Tag

A pane with a tag.

Preview

New Flux release!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis id omnis placeat saepe soluta! Accusantium dolor facilis veritatis! Ab ad autem eaque earum error facere inventore quod sint soluta?

v3

Code

<template>
    <FluxPane
        tag="v3">
        <FluxPaneHeader
            title="New Flux release!"/>
        <FluxPaneBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis id omnis placeat saepe soluta! Accusantium dolor facilis veritatis! Ab ad autem eaque earum error facere inventore quod sint soluta?
        </FluxPaneBody>
    </FluxPane>
</template>

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

Used components

• Spinner