Flux

Appearance

Item actions ​

The item actions area holds buttons or other controls that act on the item, such as edit or delete buttons.

Bas MiliusEngineer

TIP

This component is best used within an Item.

Props

is-center?: boolean
Vertically centers the actions within the item.

Slots

default
The action buttons or controls for the item.

Snippet ​

vue
<template>
    <Preview>
        <FluxPane style="width: min(100%, 480px)">
            <FluxItem>
                <FluxItemMedia
                    is-center
                    :size="40">
                    <FluxAvatar
                        alt="Bas Milius"
                        :size="40"
                        src="https://avatars.githubusercontent.com/u/978257?v=4"/>
                </FluxItemMedia>

                <FluxItemContent is-center>
                    <strong>Bas Milius</strong>
                    <span style="font-size: .875rem; opacity: .6">Engineer</span>
                </FluxItemContent>

                <FluxItemActions is-center>
                    <FluxAction
                        icon="pen"
                        aria-label="Edit"/>
                    <FluxAction
                        is-destructive
                        icon="trash"
                        aria-label="Remove"/>
                </FluxItemActions>
            </FluxItem>
        </FluxPane>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxAction, FluxAvatar, FluxItem, FluxItemActions, FluxItemContent, FluxItemMedia, FluxPane } from '@flux-ui/components';
</script>

Used components ​