BaseIdModalClose
BaseIdModalClose
Component that allows to close a modal by emitting XEventsTypes.UserClickedCloseModal. It allows full customization with the 'closing-element' slot and exposes the 'closeModal' function.
Props
Name | Description | Type | Default |
---|---|---|---|
modalId | The modalId of the modal that will be closed. | string |
|
Slots
Name | Description | Bindings (name - type - description) |
---|---|---|
closing-element | closing-element. It's the element that will trigger the modal closing. It's a | closeModal Function - The function to close the modal. |
default | (Required) Button content with a text, an icon or both | None |
Events
A list of events that the component will emit:
UserClickedCloseModal
(opens new window): the event is emitted after the user clicks the button. The event payload is the id of the modal that is going to be closed.
Examples
Component containing an event button that emits UserClickedCloseModal
when clicked with the
modalId as payload. It has a default slot to customize its contents and can also be fully
customized, replacing the default button with any other element.
Basic example
The component renders whatever is passed to it in the default slot inside the button and closes the
modal with modalId my-modal
.
<template>
<BaseIdModalClose modalId="my-modal">
<img src="./close-button-icon.svg" />
</BaseIdModalClose>
</template>
<script>
import { BaseIdModalClose } from '@empathyco/x-components';
export default {
name: 'BaseIdModalCloseTest',
components: {
BaseIdModalClose
}
};
</script>
Replacing the default button
The component renders whatever element is passed, replacing the default button and exposing the
function to close the modal with modalId my-modal
.
<template>
<BaseIdModalClose modalId="my-modal">
<template #closing-element="{ closeModal }">
<ul>
<li @click="closeModal">Close here</li>
<li>Not here</li>
</ul>
</template>
</BaseIdModalClose>
</template>
<script>
import { BaseIdModalClose } from '@empathyco/x-components';
export default {
name: 'BaseIdModalCloseTest',
components: {
BaseIdModalClose
}
};
</script>