Flux

Appearance

Clickable pane ​

A clickable pane is a pressable variant of the Pane component. It can act as a button, a link, or a router link, making it suitable for navigable card-style UI elements.

TIP

This component is best used within a Pane group.

Props

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

tag?: string
A tag that is shown in the top-right corner of the pane.

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

type?: FluxPressableType
The interaction type of the clickable pane.

tabindex?: string | number
The tabindex of the pane, works exactly the same as html.

href?: string
This prop is enabled if the type is set to link. It's the same as the <a> HTML element.

rel?: string
This prop is enabled if the type is set to link. It's the same as the <a> HTML element.

target?: string
This prop is enabled if the type is set to link. It's the same as the <a> HTML element.

to?: FluxTo
This prop is enabled if the type is set to route. This integrates with Vue Router.

Slots

default
The content of the pane.

loader
A custom loader to show while is-loading is active.

Examples ​

A clickable pane that opens an external URL in a new tab.

Flux UIOpen the documentation in a new tab.

<template>
    <Preview>
        <FluxClickablePane
            type="link"
            href="https://flux-ui.dev"
            target="_blank"
            rel="noopener"
            style="width: 280px">
            <FluxPaneBody>
                <FluxStack :gap="3">
                    <strong>Flux UI</strong>
                    <span style="font-size: .875rem; opacity: .6">Open the documentation in a new tab.</span>
                </FluxStack>
            </FluxPaneBody>
        </FluxClickablePane>
    </Preview>
</template>

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

Used components ​