Flux

Appearance

Menu options ​

This component provides a container for grouping menu items that behave like options, allowing only one to be selected at a time. Its layout can be adjusted based on the isHorizontal prop. When set to horizontal, it applies a specific style; otherwise, it defaults to a vertical layout.

Props

is-horizontal?: boolean
Indicates that the items should flow horizontally.

Slots

default
The content of the options group.

Examples ​

Alignment

Horizontal option menus can be used to allow users to select an alignment.

Result = left

<template>
    <FluxStack :gap="12">
        <FluxPane style="width: 270px">
            <FluxMenu>
                <FluxMenuOptions
                    v-model="alignment"
                    is-horizontal>
                    <FluxMenuItem icon-leading="align-left"/>
                    <FluxMenuItem icon-leading="align-center"/>
                    <FluxMenuItem icon-leading="align-right"/>
                    <FluxMenuItem icon-leading="align-justify"/>
                </FluxMenuOptions>
            </FluxMenu>
        </FluxPane>

        <small><kbd>Result = {{ ALIGNMENTS[alignment] }}</kbd></small>
    </FluxStack>
</template>

<script
    lang="ts"
    setup>
    import { FluxMenu, FluxMenuItem, FluxMenuOptions, FluxPane, FluxStack } from '@flux-ui/flux';
    import { ref } from 'vue';

    const ALIGNMENTS = {
        0: 'left',
        1: 'center',
        2: 'right',
        3: 'justify'
    } as const;

    const alignment = ref<keyof typeof ALIGNMENTS>(0);
</script>

Option

Vertical option menus can be used to allow the user to switch between different view modes.

Result = list

<template>
    <FluxStack :gap="12">
        <FluxPane style="width: 270px">
            <FluxMenu>
                <FluxMenuOptions
                    v-model="view"
                    mode="select">
                    <FluxMenuItem
                        icon-leading="list"
                        label="List"/>

                    <FluxMenuItem
                        icon-leading="grid-2"
                        label="Grid"/>
                </FluxMenuOptions>
            </FluxMenu>
        </FluxPane>

        <small><kbd>Result = {{ VIEWS[view] }}</kbd></small>
    </FluxStack>
</template>

<script
    lang="ts"
    setup>
    import { FluxMenu, FluxMenuItem, FluxMenuOptions, FluxPane, FluxStack } from '@flux-ui/flux';
    import { ref } from 'vue';

    const VIEWS = {
        0: 'list',
        1: 'grid'
    } as const;

    const view = ref<keyof typeof VIEWS>(0);
</script>

Used components ​