1 min read
BaseEventsModalClose
BaseEventsModalClose
Component contains an event button that emits XEventsTypes.UserClickedCloseEventsModal when clicked. It has a default slot to customize its contents.
Props
Name | Description | Type | Default |
---|---|---|---|
closingEvent | Event name to use for closing the modal. | PropsWithType<XEventsTypes, void> | 'UserClickedCloseEventsModal' |
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:
UserClickedCloseEventsModal
(opens new window): the event is emitted after the user clicks the button.
Examples
The BaseEventsModalClose
component can be used to close the BaseEventsModal
component.
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>
<BaseEventsCloseButton>
<img src="./close-button-icon.svg" />
</BaseEventsCloseButton>
</template>
<script>
import { BaseEventsModalClose } from '@empathyco/x-components';
export default {
name: 'BaseEventsModalCloseTest',
components: {
BaseEventsModalClose
}
};
</script>
Defining another event to emit when clicking the button
By default it uses the same closingEvent
that the BaseEventsModal
is listening by default too.
This event can be changed using the closingEvent
prop.
<template>
<BaseEventsModalClose closingEvent="UserClosedEmpathize">×</BaseEventsModalClose>
</template>
<script>
import { BaseEventsModalClose } from '@empathyco/x-components';
export default {
name: 'BaseEventsModalCloseTest',
components: {
BaseEventsModalClose
}
};
</script>