Flux

Appearance

Pane header ​

The pane header provides a structured title area for the pane. It supports optional icons and styled text to clearly communicate the purpose of the pane.

Flux documentation

Props

icon?: FluxIconName
The icon of the pane header.

title?: string
The title of the pane header.

sub-title?: string
The subtitle of the pane header.

Slots

before
The content to be displayed before the title and icon.

after
The content to be displayed after the title and icon.

Examples ​

Basic

A basic pane header.

Flux documentation

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneHeader
            title="Flux documentation"/>
    </FluxPane>
</template>

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

Icon

A pane header with an icon.

Flux documentation

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneHeader
            icon="book-sparkles"
            title="Flux documentation"/>
    </FluxPane>
</template>

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

Sub title

A pane header with an sub title.

Flux documentationA component library for Vue 3

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneHeader
            icon="book-sparkles"
            title="Flux documentation"
            sub-title="A component library for Vue 3"/>
    </FluxPane>
</template>

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

Used components ​