Clickable pane header
The clickable pane header is a pressable variant of the Pane header. The entire header acts as a button, link or router link depending on the type prop, making it ideal for a Layer pane section that navigates to a detail view. A trailing chevron signals that the header is navigable.
TIP
Because the whole header is a single interactive element, it can't contain interactive elements such as buttons. If you need trailing actions, use the regular Pane header instead.
Required icons
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.
disabled?: boolean
If the header is disabled, blocking interaction and dimming its content.
tabindex?: string | number
The tabindex of the header, works exactly the same as html.
type?: FluxPressableType
The rendering type of the header, determining the underlying element (button, link, route or none).
href?: string
The URL of the header when type is link. It's the same as the <a> HTML element.
rel?: string
This prop is enabled when href is set. It's the same as the <a> HTML element.
target?: string
This prop is enabled when href is set. It's the same as the <a> HTML element.
to?: FluxTo
The router link target when type is route. This integrates with Vue Router.
Emits
click: [MouseEvent]
Triggered when the header is clicked.
Slots
before
The content to be displayed before the title and icon.
Examples
Basic
A clickable pane header that acts as a link.
<template>
<FluxPane style="max-width: 390px">
<FluxClickablePaneHeader
type="link"
icon="book-sparkles"
title="Flux documentation"
sub-title="Browse the component guide"
href="#"/>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxClickablePaneHeader, FluxPane } from '@flux-ui/components';
</script>Layer pane
A clickable header as the entry point of a layer pane section.
<template>
<FluxLayerPane style="max-width: 390px">
<FluxClickablePaneHeader
type="link"
icon="folder"
title="Documents"
sub-title="24 files"
href="#"/>
<FluxPane>
<FluxPaneBody>
Open the documents section to manage your files.
</FluxPaneBody>
</FluxPane>
</FluxLayerPane>
</template>
<script
setup
lang="ts">
import { FluxClickablePaneHeader, FluxLayerPane, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>Colors
Use the layer pane color prop to convey meaning. The header and hover state adapt to the color.
<template>
<FluxFlex
direction="vertical"
:gap="9">
<FluxLayerPane>
<FluxClickablePaneHeader
type="link"
icon="file-lines"
title="Resources"
href="#"/>
<FluxPane>
<FluxPaneBody>Browse documentation, release notes and developer guides for your team.</FluxPaneBody>
</FluxPane>
</FluxLayerPane>
<FluxLayerPane color="primary">
<FluxClickablePaneHeader
type="link"
icon="sparkles"
title="Upgrade to Pro"
href="#"/>
<FluxPane>
<FluxPaneBody>Unlock advanced analytics, unlimited seats and priority support.</FluxPaneBody>
</FluxPane>
</FluxLayerPane>
<FluxLayerPane color="info">
<FluxClickablePaneHeader
type="link"
icon="circle-info"
title="Update available"
href="#"/>
<FluxPane>
<FluxPaneBody>Version 2.5.0 is ready to install. Restart the application to apply the update.</FluxPaneBody>
</FluxPane>
</FluxLayerPane>
<FluxLayerPane color="success">
<FluxClickablePaneHeader
type="link"
icon="circle-check"
title="Backup completed"
href="#"/>
<FluxPane>
<FluxPaneBody>Your latest backup finished successfully and is stored securely in the cloud.</FluxPaneBody>
</FluxPane>
</FluxLayerPane>
<FluxLayerPane color="warning">
<FluxClickablePaneHeader
type="link"
icon="hourglass-clock"
title="Scheduled maintenance"
href="#"/>
<FluxPane>
<FluxPaneBody>The platform will be unavailable on Sunday between 02:00 and 04:00 UTC.</FluxPaneBody>
</FluxPane>
</FluxLayerPane>
<FluxLayerPane color="danger">
<FluxClickablePaneHeader
type="link"
icon="circle-exclamation"
title="Payment failed"
href="#"/>
<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 { FluxClickablePaneHeader, FluxFlex, FluxLayerPane, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>With avatar
Place an avatar in the before slot to build a profile or account entry point.
<template>
<FluxLayerPane style="max-width: 390px">
<FluxClickablePaneHeader
type="link"
title="Bas Milius"
sub-title="View your profile"
href="#">
<template #before>
<FluxAvatar
alt="Bas Milius"
fallback-icon="user"
:size="36"/>
</template>
</FluxClickablePaneHeader>
<FluxPane>
<FluxPaneBody>Manage your account details, security and preferences.</FluxPaneBody>
</FluxPane>
</FluxLayerPane>
</template>
<script
lang="ts"
setup>
import { FluxAvatar, FluxClickablePaneHeader, FluxLayerPane, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>Disabled
A disabled header blocks interaction and dims its content.
<template>
<FluxPane style="max-width: 390px">
<FluxClickablePaneHeader
type="link"
disabled
icon="lock"
title="Restricted section"
sub-title="You don't have access"
href="#"/>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxClickablePaneHeader, FluxPane } from '@flux-ui/components';
</script>