Modal
Simple Modal Component
The component can be used outside of the Enso ecosystem.
Installation
Install the package:
yarn add @enso-ui/modal
(within Enso, remember to cd
into the client
folder before installing front-end assets)
Exports
@enso-ui/modal/bulma
:
Modal
ModalCard
@enso-ui/modal/renderless
:
CoreModal
Usage
Import the desired component(s):
import { Modal, ModalCard } from '@enso-ui/modal/bulma';
import { CoreModal } from '@enso-ui/modal/renderless';
CoreModal.vue
This modal component renders its contents within a card and is built upon the renderless modal component.
Props
transitionDuration
-Number
, optional, default500
, the duration of the transition animationportal
-string
, optional, defaultmodals
, the query selector for the portal of the modal.
Slots
Has a default scopedSlot that exposes the close
method.
Modal
The bulma styled modal component built on top of its renderless version.
Example:
<modal v-if="visible"
@close="doSomethingElse">
<div class="box">
<h5 class="subtitle is-5">
{{ i18n("Are you sure?") }}
</h5>
<hr>
<div class="level">
<div class="level-left">
<div class="level-item">
<button class="button is-outlined"
@click="cancel">
{{ i18n('Cancel') }}
</button>
</div>
</div>
<div class="level-right">
<div class="level-item">
<button class="button is-danger has-margin-left-small"
@click="doSomething">
{{ i18n('Yes') }}
</button>
</div>
</div>
</div>
</div>
</modal>
Props
All the props from CoreModal
can be provided here
Slots:
default
, all content goes here
ModalCard
This modal component renders its contents within a card and is built upon the renderless modal component.
Props
All the props from CoreModal
can be provided here
Slots:
header
, the card header contents go herebody
, the card body contents go herefooter
, the card header contents go here
Questions & Issues
For questions and support please use the issues functionality for this package's github repository.
Please make sure to search for existing issues before creating a new issue, and when opening a new issue, fill the required information in the issue template.
Issues not conforming to the guidelines may be closed immediately.
Contributions
are welcome. Pull requests are great, but issues are good too.
Thank you to all the people who already contributed to Enso!