Flux

Appearance

Tree view ​

A standalone tree view component that renders a hierarchical list of nodes with expand/collapse support. Nodes emit click and dblclick events so the parent can react to user interaction. The tree is rendered inline (not in a popup) and includes connecting lines and per-level color indicators.

Required icons

angle-down
angle-right

Props

level-colors?: (FluxColor | string)[]
An array of colors per depth level. Index 0 = root level, index 1 = first child level, etc. Each entry can be a `FluxColor` name (e.g. `primary`, `danger`) or any CSS color string (e.g. `#6366f1`). Levels without an entry show no color dot.

options: FluxTreeViewOption[]
The tree structure of nodes to display.

Emits

click: [FluxTreeViewOption]
Triggered when a node is clicked.

dblclick: [FluxTreeViewOption]
Triggered when a node is double-clicked. Also toggles expand/collapse if the node has children.

Option object ​

Each entry in the options array (and nested children arrays) is a FluxTreeViewOption:

Property
Type
Description
id
string | number
Unique identifier for the node. Included in emitted events.
label
string
Display label for the node.
icon
FluxIconName
Optional icon shown before the label.
children
FluxTreeViewOption[]
Nested child nodes. A node with children shows an expand/collapse chevron.

Keyboard navigation ​

Key
Action
Arrow Down
Move highlight to the next visible node.
Arrow Up
Move highlight to the previous visible node.
Arrow Right
Expand the highlighted node (if collapsed). If already expanded, moves to its first child.
Arrow Left
Collapse the highlighted node (if expanded). If already collapsed, moves to its parent.
Enter / Space
Emit click for the highlighted node.
Any letter
Jump to the first visible node whose label starts with that letter.

Examples ​

Basic

A tree view with per-level colors.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxTreeView
                :level-colors="['primary', 'info', 'success']"
                :options="options"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    lang="ts"
    setup>
    import { FluxPane, FluxPaneBody, FluxTreeView } from '@flux-ui/components';
    import type { FluxTreeViewOption } from '@flux-ui/types';

    const options: FluxTreeViewOption[] = [
        {
            id: 1,
            label: 'Electronics',
            children: [
                {
                    id: 2,
                    label: 'Computers',
                    children: [
                        { id: 3, label: 'Laptops' },
                        { id: 4, label: 'Desktops' },
                        { id: 5, label: 'Tablets' }
                    ]
                },
                {
                    id: 6,
                    label: 'Phones',
                    children: [
                        { id: 7, label: 'Smartphones' },
                        { id: 8, label: 'Feature phones' }
                    ]
                }
            ]
        },
        {
            id: 9,
            label: 'Clothing',
            children: [
                { id: 10, label: 'Men' },
                { id: 11, label: 'Women' },
                { id: 12, label: 'Kids' }
            ]
        },
        {
            id: 13,
            label: 'Home & Garden',
            children: [
                { id: 14, label: 'Furniture' },
                { id: 15, label: 'Garden tools' }
            ]
        }
    ];
</script>

Events

Responding to click and double-click events.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxTreeView
                :level-colors="['primary', 'info', 'success']"
                :options="options"
                @click="onItemClick"
                @dblclick="onItemDblClick"/>
        </FluxPaneBody>
        <FluxPaneBody v-if="lastEvent">
            <p style="font-size: 14px; margin: 0;">
                <strong>{{ lastEvent.type }}</strong> — {{ lastEvent.label }}
                <span style="color: var(--foreground-secondary);">(id: {{ lastEvent.id }})</span>
            </p>
        </FluxPaneBody>
    </FluxPane>
</template>

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

    const lastEvent = ref<{ type: string; id: string | number; label: string } | null>(null);

    const options: FluxTreeViewOption[] = [
        {
            id: 1,
            label: 'Electronics',
            children: [
                { id: 2, label: 'Laptops' },
                { id: 3, label: 'Desktops' },
                { id: 4, label: 'Smartphones' }
            ]
        },
        {
            id: 5,
            label: 'Clothing',
            children: [
                { id: 6, label: 'Men' },
                { id: 7, label: 'Women' }
            ]
        }
    ];

    function onItemClick(option: FluxTreeViewOption): void {
        lastEvent.value = { type: 'click', id: option.id, label: option.label };
    }

    function onItemDblClick(option: FluxTreeViewOption): void {
        lastEvent.value = { type: 'dblclick', id: option.id, label: option.label };
    }
</script>

Used components ​