Flux

Appearance

Toolbar ​

The toolbar component is used for actions within a certain context. For example, when you have a stack of products, toolbars can be used to display actions for each product. A toolbar can have groups, buttons and separators within them.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.

Props

floating-mode?: "free" | "top-start" | "top-end" | "bottom-start" | "bottom-end"
The placement of the toolbar.

Slots

default
The toolbar content.

Examples ​

Basic

A basic toolbar.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde. 

<template>
    <div style="padding-top: 10px;">
        <FluxPane>
            <FluxToolbar
                floating-mode="top-end">
                <FluxToolbarGroup>
                    <FluxAction
                        icon="grip"/>

                    <FluxAction
                        icon="angle-up"/>

                    <FluxAction
                        icon="angle-down"/>
                </FluxToolbarGroup>

                <FluxSeparator
                    direction="vertical"/>

                <FluxAction
                    is-destructive
                    icon="trash"/>
            </FluxToolbar>

            <FluxPaneBody>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
            </FluxPaneBody>
        </FluxPane>
    </div>
</template>

<script
    setup
    lang="ts">
    import { FluxAction, FluxPane, FluxPaneBody, FluxSeparator, FluxToolbar, FluxToolbarGroup } from '@flux-ui/components';
</script>

Used components ​