Remove

The remove component is a simple and intuitive Vue component that allows users to easily remove other components within a larger system. With a single button and a clear "X" icon, users can quickly and easily remove components with a single click.

Required icons

xmark

Props

icon?: FluxIconName
The icon to use for the remove button.
Default: xmark

is-hidden?: boolean
If the remove button is hidden.

Emits

remove: [MouseEvent]
Triggered when the remove button is clicked.

Examples

Basic

A basic component remover.

Preview

Pane 1

Pane 2

Pane 3

Pane 4

Pane 5

Code

<template>
    <FluxGrid
        :columns="5">
        <FluxGridColumn
            :xs="1"
            v-for="(pane, index) in panes"
            v-show="!pane.isHidden"
            :key="index">
            <FluxPane>
                <FluxRemove
                    :is-hidden="index === 0"
                    @click="pane.isHidden = true"/>
                <FluxPaneBody style="display: flex; justify-content: center;">
                    {{ pane.title }}
                </FluxPaneBody>
            </FluxPane>
        </FluxGridColumn>
    </FluxGrid>
</template>

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

    const panes = ref([
        { title: 'Pane 1', isHidden: false },
        { title: 'Pane 2', isHidden: false },
        { title: 'Pane 3', isHidden: false },
        { title: 'Pane 4', isHidden: false },
        { title: 'Pane 5', isHidden: false }
    ]);
</script>

Used components

• Icon