Legend

The legend component displays a list of labeled color indicators, helping users quickly understand the meaning of different statuses, categories, or data groups.

ComponentsDashboardInternalsTypes

Props

direction?: string
The direction of the legend.
Default: horizontal

items: FluxLegendObject[]
The items of the legend.

Examples

Horizontal

A horizontal legend.

Preview

ComponentsDashboardInternalsTypes

Code

<template>
    <FluxPane>
        <FluxPaneBody>
            <FluxLegend
                :items="items"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxLegend, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { ref } from 'vue';

    const items = ref([
        { label: 'Components', color: '#12B87A' },
        { label: 'Dashboard', color: '#3F6AF4' },
        { label: 'Internals', color: '#E85A9A' },
        { label: 'Types', color: '#F4C23D' },
    ]);
</script>

Vertical

A vertical legend.

Preview

ComponentsDashboardInternalsTypes

Code

<template>
    <FluxPane style="max-width: max-content">
        <FluxPaneBody>
            <FluxLegend
                direction="vertical"
                :items="items"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxLegend, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { ref } from 'vue';

    const items = ref([
        { label: 'Components', color: '#12B87A' },
        { label: 'Dashboard', color: '#3F6AF4' },
        { label: 'Internals', color: '#E85A9A' },
        { label: 'Types', color: '#F4C23D' },
    ]);
</script>