Modulus Modal

Enhanced modal component, to be used with @wide/modulus.

Install

``
npm install @wide/modulus-modal --save
`

Usage

Register this component using Modulus:
`js
import modulus from '@wide/modulus'
import Modal from '@wide/modulus-modal'

modulus.component('modal', Modal)
`

Import base scss styles:
`scss
@use '@wide/modulus-modal';
`

And use the provided twig template:
`twig
{% embed '@wide::modulus-modal' with { id: 'modalOne' } %}
{% block content %}
HEY!
{% endblock %}
{% embed %}
`

Or build your own html:
`html


To open the modal from a button:
`html
Open Modal One
`

To open the modal programmatically:
`js
import { seek } from '@wide/modulus'

seek('modalOne').open()
`

Default focused element

To choose which element will be focused when opening, add data-focus attribute:
`html
Confirm
`

By default, if there is no data-focus attribute defined, the first element of type above will be focused.

- button (excluding close button)
- a (with [href] attribute)
- input
- select
- textarea
- Element with [tabindex] attribute (with value different of [tabindex="-1"])
- Close button

Libraries

This package uses :
- hotkeys-js`

Authors

- Aymeric Assier - github.com/myeti
- Julien Martins Da Costa - github.com/jdacosta

License

This project is licensed under the MIT License - see the licence file for details