Toggle elements with Stimulus and transitions
Stimulus controller to hide/show elements with optional transitions
``shell`
$ yarn add stimulus-reveal
Register the controller with Stimulus:
`javascript
// application.js
import { Application } from 'stimulus';
import RevealController from 'stimulus-reveal'
const application = Application.start()
application.register('reveal', RevealController)
`
Initialize the controller on a container element, add an action to toggle elements, and add data-reveal attributes to elements you want to toggle:
`html`
I toggle
* Using stimulus-reveal on tags will no longer prevent the default event chain. If you are using tags, consider changing to
#### Top Level options
##### data-reveal-target-selector-value (default: [data-reveal])
Setting this attribute to a selector will allow you to change the selector pattern for toggling elements.
##### data-reveal-toggle-keys-value
Setting this attribute to a comma separated list of lower-case key names will toggle the reveal when they're pressed.
###### Example:
#####
Setting this attribute to a comma separated list of lower-case key names will show the reveal when they're pressed.###### Example:
#####
Setting this attribute to a comma separated list of lower-case key names will close the reveal when they're pressed.###### Example:
#####
Setting this attribute will close the reveal when the user clicks away from the reveal element.#####
(default: false)
Setting this attribute to "true" will tell the controller that the default state is open for the reveal. The next toggle will close it.#### Trigger element options
#####
data-reveal-prevent-default
If set on the trigger element, this will prevent the default action from being handled.#####
If set on the trigger element, this will prevent the default action from being propagated.#### Element options
You can set options per element to change how each one behaves.
#####
If set, this will enable transitions. A default transition will apply:In:
- Opacity: 0 -> 1
- Transform Scale: 95% -> 100%
- Duration: 200ms
Out:
- Opacity: 1 -> 0
- Transform Scale: 100% -> 95%
- Duration: 150ms
###### Example
html
I toggle with transitions
`#####
, data-transition-(enter|leave)-start, data-transition-(enter|leave)-end
These options can be used to override the default transitions by setting classes at transition points.###### Example
html
data-transition-enter="transition transform ease-out duration-200"
data-transition-enter-start="opacity-0 -translate-y-6 bg-transparent"
data-transition-enter-end="opacity-100 translate-y-0 bg-transparent"
data-transition-leave="transition transform ease-out duration-150"
data-transition-leave-start="opacity-100 translate-y-0 bg-transparent"
data-transition-leave-end="opacity-0 -translate-y-6 bg-transparent">
I toggle with custom transitions
#####
These attributes allow you to toggle an element before or after the main transition. For instance if you need to unhide
and element before an enter transition and hide it after a leave transition.###### Example
html
data-transition-enter="transition transform ease-out duration-200"
data-transition-enter-start="opacity-0 -translate-y-6 bg-transparent"
data-transition-enter-end="opacity-100 translate-y-0 bg-transparent"
data-transition-leave="transition transform ease-out duration-150"
data-transition-leave-start="opacity-100 translate-y-0 bg-transparent"
data-transition-leave-end="opacity-0 -translate-y-6 bg-transparent">
I toggle with custom transitions
$3
####
This will show toggled elements.
##### Example
html
I can't be hidden again
`####
This will hide toggled elements.
##### Example
html
I can't be shown again
`####
This will toggle toggled elements.
##### Example
html
I will show and hide again and again and again
`####
This will stop the event from bubbling to parent elements.
##### Example
html
I get hidden along with the inner div when the first button is pressed
I get hidden but the outer div does not hide if the second button is pressed
I also get hidden but the outer div does not hide if the second button is pressed
`$3
Stimulus Reveal emits a number of events during the lifecycle of a transition. They are listed below in the order in which they happen:
| Name | Description |
| ---- | ----------- |
|
| Emits before the show transition starts, on each target element |
| reveal:hide | Emits before the hide transition starts, on each target element |
| reveal:shown | Emits at the end of the show transition, on each target element |
| reveal:hidden | Emits at the end of the hide transition, on each target element |
| reveal:complete | Emits at the end of the transition, regardless of whether it is shown or hidden, on each target element |Contributing
Fork the project.
Install dependencies
`shell
$ yarn install
``Write some tests, and add your feature. Send a PR.