Flux

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.

The toolbar renders with role="toolbar" and manages a horizontal focus zone: its focusable controls are reachable with the arrow keys as a single tab stop. Provide an aria-label to give it a meaningful accessible name.

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>

In a pane

A flat toolbar placed between a pane header and its body acts as a context bar for the content below.

Document
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>
    <FluxPane style="width: 390px">
        <FluxPaneHeader
            title="Document"/>

        <FluxToolbar aria-label="Text formatting">
            <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="list-ul"
                    aria-label="Bulleted list"/>

                <FluxAction
                    icon="list-ol"
                    aria-label="Numbered list"/>
            </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>
</template>

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

Used components ​