Flux

Appearance

Action bar ​

Action bars are toolbars commonly used alongside data tables. They can display a primary action, a search bar, and a filter button. Filters are typically displayed within a flyout containing a window.

Filter
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque neque nobis quasi recusandae reprehenderit. Ad amet, blanditiis, delectus dolorem dolorum error, esse expedita explicabo mollitia quam quia quisquam reiciendis temporibus?

Required icons

filter
xmark

Props

is-resettable?: boolean
Indicates that the applied filter is resettable.

Emits

reset: []
Triggered when the filter reset button is clicked. This is not available if a custom filter opener button is used.

Slots

primary
A place for the primary action.

actions-end
The space at the end of the action bar.

actions-start
The space at the start of the action bar.

actions-after-search
The space after the search bar.

actions-before-search
The space before the search bar.

search
A place for the search bar.

filter ({
    readonly paneX: number;
    readonly paneY: number;
    readonly openerWidth: number;
    readonly openerHeight: number;
    close(): void;
})
A place for the filter, which is shown in a flyout.

filter-opener ({
    close(): void;
    open(): void;
    toggle(): void;
})
A place for the filter opener button.

Examples ​

Basic

A simple and basic action bar.

<template>
    <FluxActionBar>
        <template #primary>
            <FluxPrimaryButton
                icon-leading="circle-plus"
                label="Event"/>
        </template>

        <template #filter>
            <FluxPaneBody>
                Filter contents.
            </FluxPaneBody>
        </template>

        <template #filterOpener="{open}">
            <FluxSecondaryButton
                icon-leading="filter"
                @click="open()"/>
        </template>

        <template #search>
            <FluxFormInput
                v-model="searchQuery"
                type="search"
                icon-leading="magnifying-glass"
                placeholder="Search anything..."/>
        </template>

        <template #actionsBeforeSearch>
            <FluxSecondaryButton
                icon-leading="arrow-down-to-line"
                label="Download"/>
            <FluxSeparator direction="vertical"/>
        </template>
    </FluxActionBar>
</template>

<script
    setup
    lang="ts">
    import { ref } from 'vue';
    import { FluxActionBar, FluxFormInput, FluxPaneBody, FluxPrimaryButton, FluxSecondaryButton, FluxSeparator } from '@flux-ui/components';

    const searchQuery = ref('');
</script>

Datatable

Using an action bar with a datatable.

Iphone's
Name
Price
Status
Apple Iphone 10
€ 900
In stock
Apple Iphone 11
€ 1000
Not in stock
Apple Iphone 12
€ 1100
In stock
Apple Iphone 13
€ 1200
Not in stock
Apple Iphone 14
€ 1300
In stock

<template>
    <FluxPane>
        <FluxPaneHeader title="Iphone's"/>

        <FluxActionBar>
            <template #primary>
                <FluxFormInput
                    v-model="searchQuery"
                    type="search"
                    icon-leading="magnifying-glass"
                    placeholder="Search anything..."/>
            </template>

            <template #filter>
                <FluxPaneBody>
                    Filter contents.
                </FluxPaneBody>
            </template>

            <template #filterOpener="{open}">
                <FluxSecondaryButton
                    icon-leading="filter"
                    @click="open()"/>
            </template>
        </FluxActionBar>

        <FluxDataTable
            :items="filteredItems"
            :total="items.length"
            :page="1"
            :per-page="5"
            :limits="[5, 10, 25, 50]"
            is-hoverable>
            <template #header>
                <FluxTableHeader>Name</FluxTableHeader>
                <FluxTableHeader>Price</FluxTableHeader>
                <FluxTableHeader is-shrinking>Status</FluxTableHeader>
            </template>

            <template #name="{item: {name}}">
                <FluxTableCell>{{ name }}</FluxTableCell>
            </template>

            <template #price="{item: {price}}">
                <FluxTableCell>€ {{ price }}</FluxTableCell>
            </template>

            <template #inStock="{item: {inStock}}">
                <FluxTableCell>
                    <FluxBadgeStack>
                        <FluxBadge
                            v-if="inStock"
                            color="success"
                            icon="circle-check"
                            label="In stock"/>

                        <FluxBadge
                            v-else
                            color="danger"
                            icon="circle-xmark"
                            label="Not in stock"/>
                    </FluxBadgeStack>
                </FluxTableCell>
            </template>
        </FluxDataTable>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { ref, computed } from 'vue';
    import { FluxActionBar, FluxBadge, FluxBadgeStack, FluxDataTable, FluxFormInput, FluxPane, FluxPaneBody, FluxPaneHeader, FluxSecondaryButton, FluxTableCell, FluxTableHeader } from '@flux-ui/components';

    const searchQuery = ref('');
    const items = computed(() => Array(5).fill(null).map((_, index) => ({
        id: index,
        name: `Apple Iphone ${10 + index}`,
        price: (900 + index * 100),
        inStock: index % 2 === 0
    })));

    const filteredItems = computed(() => {
        if (!searchQuery.value) {
            return items.value;
        }

        return items.value.filter(item => item.name.toLowerCase().includes(searchQuery.value.toLowerCase()));
    });
</script>

Used components ​