Flux

Appearance

Split button ​

Split buttons are buttons that have one primary action and multiple secondary actions. A common usecase for this component is a download button with more options for that download.

Required icons

ellipsis-h

Props

button-icon?: FluxIconName
The icon that is used for the more button.
Default: ellipsis-h

flyout-direction?: FluxDirection
The direction of the flyout.

flyout-is-auto-width: boolean
If the flyout width should be the same as the opener.

flyout-margin?: number
The margin offset from the opener to the flyout.

flyout-width?: number
The width of the flyout.

Slots

button ({
    close(): void;
    open(): void;
    toggle(): void;
})
The button with the primary action.

flyout ({
    close(): void;
    readonly paneX: number;
    readonly paneY: number;
    readonly openerWidth: number;
    readonly openerHeight: number;
})
The content of the flyout.

Examples ​

Basic

A basic split button.

<template>
    <FluxSplitButton>
        <template #button>
            <FluxSecondaryButton
                label="Download"/>
        </template>

        <template #flyout>
            <FluxMenu>
                <FluxMenuItem
                    icon-leading="rectangle-sd"
                    label="Download in SD"/>
                <FluxMenuItem
                    icon-leading="rectangle-hd"
                    label="Download in HD"/>

                <FluxSeparator/>

                <FluxMenuItem
                    icon-leading="rectangle-4k"
                    label="Download in 4K"/>
            </FluxMenu>
        </template>
    </FluxSplitButton>
</template>

<script
    setup
    lang="ts">
    import { FluxMenu, FluxMenuItem, FluxSecondaryButton, FluxSeparator, FluxSplitButton } from '@flux-ui/components';
</script>

Used components ​