Flux

Appearance

Application ​

The application component provides the overall layout structure for the application interface. It defines regions for the menu sidebar, the main content, and an optional side panel. This component also manages the collapsed state of the menu and the active context level, and shares that state with child components through useApplicationInjection.

Props

context-menu-name?: string
The named route view that holds the context menu component for each level of the route tree.
Default: menu

show-desktop-menu-toggle?: boolean
Whether the menu toggle button is visible on desktop. By default the menu is always shown on desktop.

Slots

default
The main content of the application — typically a top bar followed by content.

menu
The menu sidebar of the application.

side
The right-hand side panel of the application.

Snippet ​

vue
<template>
    <FluxApplication>
        <template #menu>
            <FluxApplicationMenu>
                <!-- Menu items. -->
            </FluxApplicationMenu>
        </template>

        <FluxApplicationTop title="Page title"/>

        <FluxApplicationContent>
            <!-- Your application content here. -->
        </FluxApplicationContent>

        <template #side>
            <FluxApplicationSide>
                <!-- Side bar content. -->
            </FluxApplicationSide>
        </template>
    </FluxApplication>
</template>

<script
    setup
    lang="ts">
    import { FluxApplication, FluxApplicationContent, FluxApplicationMenu, FluxApplicationSide, FluxApplicationTop } from '@flux-ui/application';
</script>