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>