BaseEventsModalOpen

Component contains an event button that emits XEventsTypes.UserClickedOpenEventsModal when clicked. It has a default slot to customize its contents.

Props

Name	Description	Type	Default
openingEvent	Event name to use for opening the modal.	PropsWithType<XEventsTypes, void>	'UserClickedOpenEventsModal'

Slots

Name	Description	Bindings (name - type - description)
default	(Required) Button content with a text, an icon or both	None

Events

A list of events that the component will emit:

• UserClickedOpenEventsModal (opens new window): the event is emitted after the user clicks the button.

Examples

This component serves to open the BaseEventsModal.

Basic example

On clicked, the component closes the BaseEventsModal. The only needed thing is the content that the button should render, that can be any thing: a text, an image, an icon, a combination of the two of them...

<template>
  <BaseEventsModalOpen>
    <img src="./open-button-icon.svg" />
    <span>Open</span>
  </BaseEventsModalOpen>
</template>
<script>
  import { BaseEventsModalOpen } from '@empathyco/x-components';
  export default {
    name: 'BaseEventsModalOpenTest',
    components: {
      BaseEventsModalOpen
    }
  };
</script>

Defining another event to emit when clicking the button

By default it uses the same openingEvent that the BaseEventsModal is listening by default too. This event can be changed using the openingEvent prop, but remember to change it in the target BaseEventsModal too.

<template>
  <BaseEventsModalOpen openingEvent="UserOpenedEmpathize">
    <span>Open</span>
  </BaseEventsModalOpen>
</template>
<script>
  import { BaseEventsModalOpen } from '@empathyco/x-components';
  export default {
    name: 'BaseEventsModalOpenTest',
    components: {
      BaseEventsModalOpen
    }
  };
</script>