Modal

npm license npm download GitHub top language GitHub issues npm version

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, default 500, the duration of the transition animation
  • portal - string, optional, default modals, the query selector for the portal of the modal.

Slots

Has a default scopedSlot that exposes the close method.

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 here
  • body, the card body contents go here
  • footer, 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!

License

ISC