Flux

Appearance

Toolbar group ​

The toolbar group component organizes multiple action elements within a toolbar, grouping them together into a clear and cohesive section. It helps maintain visual structure and makes related controls easier to recognize and use.

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.

TIP

The toolbar group component basically serves as a horizontal Stack.

Slots

default
The content of the toolbar group.

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>
            </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, FluxToolbar, FluxToolbarGroup } from '@flux-ui/components';
</script>

Used components ​