Start your content search
2 min read

BaseEventsModal

BaseEventsModal

Component containing a modal that emits a XEventsTypes.UserClickedCloseEventsModal when clicking outside the content rendered in the default slot and can receive, through the eventsToCloseModal prop, a list of XEvent to listen to in order to close also the modal, eventsToOpenModal prop, another list of XEvent to customize the events to listen to open the modal and a prop, displayOverlay, to display an overlay over the rest of the html. The default slot offers the possibility to customize the modal content.

Props

Name Description Type Default
animation Animation to use for opening/closing the modal. union
eventsToOpenModal Array of XEvent to listen to open the modal. Array (): XEvent[] => ['UserClickedOpenEventsModal']
eventsToCloseModal Array of XEvent to listen to close the modal. Array (): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']
bodyClickEvent Event to emit when any part of the website out of the modal has been clicked. XEvent 'UserClickedOutOfEventsModal'

Slots

Name Description Bindings
(name - type - description)
default None

Events

A list of events that the component will emit:

Examples

The BaseEventsModal component handles the modal open/close state via the events passed via props. Its configured by default to work as a modal for a whole search application, but if the events are changed, it can work as a modal that is opened/closed when the events it is listening are emitted.

Basic usage

The component interacts with the open and close components, which are preconfigured by default to emit the same events that the BaseEventsModal component is listening to:

<template>
  <div>
    <BaseEventsModalOpen>Open</BaseEventsModalOpen>
    <BaseEventsModal>
      <BaseEventsModalClose>Close</BaseEventsModalClose>
      <img src="success.png" />
    </BaseEventsModal>
  </div>
</template>
<script>
  import { BaseEventsModalOpen, BaseEventsModal } from '@empathyco/x-components';
  export default {
    name: 'ModalTest',
    components: {
      BaseEventsModalOpen,
      BaseEventsModal
    }
  };
</script>

Customizing the events

If needed, the events to open/close the modal can be changed. The modal can listen one or more events. To do so, the eventsToCloseModal and eventsToOpenModal props can be used. Below you can see a full example on how this would work with custom events.

<template>
  <div>
    <BaseEventsModalOpen openingEvent="UserClickedOpenMyCustomModal">Open</BaseEventsModalOpen>
    <BaseEventsModal
      :eventsToCloseModal="eventsToCloseModal"
      :eventsToOpenModal="eventsToOpenModal"
    >
      <BaseEventsModalClose closingEvent="UserClickedCloseMyCustomModalFromHeader">
        Close from header
      </BaseEventsModalClose>
      <img src="success.png" />
      <BaseEventsModalClose closingEvent="UserClickedCloseMyCustomModalFromFooter">
        Close from footer
      </BaseEventsModalClose>
    </BaseEventsModal>
  </div>
</template>
<script>
  import {
    BaseEventsModalOpen,
    BaseEventsModal,
    BaseEventsModalClose
  } from '@empathyco/x-components';
  export default {
    name: 'ModalTest',
    components: {
      BaseEventsModalOpen,
      BaseEventsModal,
      BaseEventsModalClose
    }
  };
</script>

Customizing the content with classes

The contentClass prop can be used to add classes to the modal content.

<template>
  <div>
    <BaseEventsModalOpen>Open</BaseEventsModalOpen>
    <BaseEventsModal contentClass="x-bg-neutral-75">
      <BaseEventsModalClose>Close</BaseEventsModalClose>
      <img src="success.png" />
    </BaseEventsModal>
  </div>
</template>
<script>
  import { BaseEventsModalOpen, BaseEventsModal } from '@empathyco/x-components';
  export default {
    name: 'ModalTest',
    components: {
      BaseEventsModalOpen,
      BaseEventsModal
    }
  };
</script>
Cookie-Less