2.2.2 • Published 2 years ago
@wide/modulus-modal v2.2.2
Modulus Modal
Enhanced modal component, to be used with @wide/modulus
.
Install
npm install @wide/modulus-modal --save
Usage
Register this component using Modulus
:
import modulus from '@wide/modulus'
import Modal from '@wide/modulus-modal'
modulus.component('modal', Modal)
Import base scss
styles:
@use '@wide/modulus-modal';
And use the provided twig
template:
{% embed '@wide::modulus-modal' with { id: 'modalOne' } %}
{% block content %}
HEY!
{% endblock %}
{% embed %}
Or build your own html
:
<div class="modal" role="dialog" id="modalOne">
<div class="modal_body">
<button class="modal_close" data-modal.close></button>
<div class="modal_content" data-modal.content>
HEY!
</div>
</div>
<div class="modal_backdrop" data-modal.close></div>
</div>
Open modal
To open the modal from a button:
<button data-modal="modalOne">Open Modal One</button>
To open the modal programmatically:
import { seek } from '@wide/modulus'
seek('modalOne').open()
Default focused element
To choose which element will be focused when opening, add data-focus
attribute:
<button class="btn-primary" data-focus>Confirm</button>
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 :
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
2.2.1
2 years ago
2.2.2
2 years ago
2.2.0
3 years ago
2.1.2
3 years ago
2.1.1
3 years ago
2.1.0
3 years ago
2.0.4
3 years ago
2.0.3
3 years ago
2.0.2
3 years ago
2.0.1
4 years ago
2.0.0
4 years ago
0.0.1-beta.4
4 years ago
0.0.1-beta.3
4 years ago
0.0.1-beta.2
4 years ago
0.0.1-beta.1
4 years ago
0.0.1-beta.0
4 years ago