@empathyco/x-components
Version:
Empathy X Components
92 lines (68 loc) • 2.63 kB
Markdown
---
title: 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 |
| -------------------- | --------------------------------------------- | ------------------- | ------------- |
| <code>modalId</code> | The modalId of the modal that will be closed. | <code>string</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------------------ | ----------------------------------------- |
| <code>default</code> | (Required) Button content with a text, an icon or both | None |
## Events
A list of events that the component will emit:
- [`UserClickedCloseModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
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`.
```vue
<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`.
```vue
<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>
```