Overlay

Overlays can be used to reveal larger contents or options that are hidden behind a button or a similar component. The content is animated on top of the document and the rest of the interface is blocked.

Props

is-closeable?: boolean
If the overlay is closeable with the escape key.

size?: FluxSize
The size of the overlay.
Default: small

Emits

close: []
Emitted when the overlay is closed.

Slots

default
The contents of the overlay. For the best result, use a with a v-if to control its visibility.

Examples

Basic

A basic overlay.

Preview

Code

<template>
    <FluxSecondaryButton
        icon-leading="copy"
        label="Open overlay"
        @click="isOpen = true"/>

    <FluxOverlay size="medium">
        <FluxPane v-if="isOpen">
            <FluxPaneHeader title="Overlay"/>

            <FluxPaneBody>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur, consequuntur debitis eligendi eum magnam necessitatibus nulla perferendis sequi voluptate. Aut consequatur ducimus, quaerat quos ratione sequi veniam? Quis, rem.</p>
                <p>Alias dolorum laboriosam pariatur qui ut. Debitis distinctio expedita impedit ipsam voluptatem? Asperiores assumenda dolorem ducimus earum nam placeat ut velit. Ab debitis dicta in itaque quos ut veritatis voluptatum.</p>
                <p>Ducimus nemo officiis, quas saepe sequi tempora unde! Debitis dolores eos exercitationem itaque laboriosam magni nam, neque officiis, pariatur quis ratione recusandae reiciendis repudiandae tempore temporibus veritatis vero, voluptates? Earum?</p>
            </FluxPaneBody>

            <FluxPaneFooter>
                <FluxSecondaryButton
                    label="Close"
                    @click="isOpen = false"/>
            </FluxPaneFooter>
        </FluxPane>
    </FluxOverlay>
</template>

<script
    setup
    lang="ts">
    import { FluxOverlay, FluxPane, FluxPaneBody, FluxPaneFooter, FluxPaneHeader, FluxSecondaryButton } from '@flux-ui/components';
    import { ref } from 'vue';

    const isOpen = ref(false);
</script>

Re-authenticatie

A re-authentication overlay.

Preview

Code

<template>
    <FluxDestructiveButton
        icon-leading="lock"
        label="Re-authenticate"
        @click="isOpen = true"/>

    <FluxOverlay size="small">
        <FluxPane v-if="isOpen">
            <FluxForm>

                <FluxPaneBody>
                    <h2>You've been signed out.</h2>
                </FluxPaneBody>

                <FluxPaneBody>
                    <p>To continue using your account, please sign in again using your password.</p>
                </FluxPaneBody>

                <FluxPaneBody>
                    <FluxFormColumn>
                        <FluxFormField label="Username">
                            <FluxFormInput type="email" model-value="[email protected]" disabled is-readonly/>
                        </FluxFormField>

                        <FluxFormField label="Password">
                            <FluxFormInput type="password" model-value="12345678"/>
                        </FluxFormField>
                    </FluxFormColumn>
                </FluxPaneBody>

                <FluxPaneFooter>
                    <FluxButtonStack
                        is-fill
                        direction="vertical">
                        <FluxPrimaryButton
                            icon-trailing="user-key"
                            label="Sign in"/>
                        <FluxSecondaryButton
                            label="Cancel"
                            @click="isOpen = false"/>
                    </FluxButtonStack>
                </FluxPaneFooter>
            </FluxForm>
        </FluxPane>
    </FluxOverlay>
</template>

<script
    setup
    lang="ts">
    import { FluxButtonStack, FluxDestructiveButton, FluxForm, FluxFormColumn, FluxFormField, FluxFormInput, FluxOverlay, FluxPane, FluxPaneBody, FluxPaneFooter, FluxPrimaryButton, FluxSecondaryButton } from '@flux-ui/components';
    import { ref } from 'vue';

    const isOpen = ref(false);
</script>