@dpa-id-components/ui-dialog
v0.1.4
Published
UiDialog vue component with dpa Design Kit
Downloads
21
Maintainers
Keywords
Readme
@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. |