@dpa-id-components/ui-dialog

UiDialog Vue 2.x dialog component based on the dpa Design Kit

Installation

yarn add @dpa-id-components/ui-dialog

Usage

<!-- SomeComponent.vue using UiDialog -->
<template>
    <button @click="dialogIsVisible = true">Show Dialog</button>
    <ui-dialog
            v-if="dialogIsVisible"
            @close="handleEvent('close')"
    >
        <template #header>
            Header Slot content
        </template>
        Default Slot content
        <template #footer>
            Footer Slot content
        </template>
    </ui-dialog>
</template>

<script>
    import UiDialog from "@dpa-id-components/ui-dialog";

    export default {
        components: {
            UiDialog,
        },
        data() {
            return {
                dialogIsVisible: false
            };
        },
        methods: {
            handleEvent: console.log,
        },
    };
</script>

Demo

View a demo of <ui-dialog> on Storybook

API

Props

Name	Type	Default	Description
scrollable	Boolean	false	Toggle if dialog content should be scrollable or not.
maxHeight	String	null	Optional maximum height for the dialog.
roundedBorder	Boolean	false	Toggle if dialog should have a rounded border or not.

Slots

Name	Description
header	Optional slot for the header part of the dialog.
footer	Optional slot for the footer part of the dialog.

Events

Name	Type	Description
close		Emitted when the background is closed.