Pane body

The pane body is the main content area of a pane. It provides comfortable padding and space for displaying text, forms, controls, or any other user interface elements.

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?

Slots

default
The content of the pane body.

Examples

Basic

A basic pane body.

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>

Multiple

Multiple pane bodies.

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?

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>
            <FluxBoxedIcon
                color="info"
                :size="48"
                name="rocket"/>
        </FluxPaneBody>

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

        <FluxSeparator/>

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