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>

Standalone

A standalone text-formatting toolbar with multiple action groups.

<template>
    <FluxToolbar>
        <FluxToolbarGroup>
            <FluxAction
                icon="bold"
                aria-label="Bold"/>

            <FluxAction
                icon="italic"
                aria-label="Italic"/>

            <FluxAction
                icon="underline"
                aria-label="Underline"/>
        </FluxToolbarGroup>

        <FluxSeparator direction="vertical"/>

        <FluxToolbarGroup>
            <FluxAction
                icon="align-left"
                aria-label="Align left"/>

            <FluxAction
                icon="align-center"
                aria-label="Align center"/>

            <FluxAction
                icon="align-right"
                aria-label="Align right"/>
        </FluxToolbarGroup>
    </FluxToolbar>
</template>

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

Used components ​