Reusable toggler controller for Stimulus Stimulus.
$ yarn add @davidjr82/stimulus-utils-togglerimport { Controller } from '@hotwired/stimulus';
import Toggler from '@davidjr82/stimulus-utils-toggler';
// ...
// Manually register `@davidjr82/stimulus-utils-toggler` as a stimulus controller
application.register('toggler', Toggler);- Attach the controller to an element. Recommended to attach to a top-level container, like
<body>or<main>so it can be used anywhere.
data-action="click@window->toggler#away touch@window->toggler#away"can be attached to top-level container to use the "hide on click away" utility.- Example:
<main data-controller="toggler" data-action="click@window->toggler#away touch@window->toggler#away">...</main>
-
Attach an
actionand adata-[show|hide|toggle]data attribute to an element that should perform the toggling.- Example:
<button data-action='click->toggler#all touch->toggler#all' data-toggler-toggle="block1">Toggle</button>
- More than one target element can be specified with spaces.
- More than one action can be used in the same trigger.
- Example:
<button data-action='click->toggler#all touch->toggler#all' data-toggler-toggle="block1 block2" data-toggler-show="block3" data-toggler-hide="block4 block5">Toggle 1 & 2, Show 3, Hide 4 & 5</button>
toggle#allexecutes toggle, show and hide, buttoggle#show,toggle#hide,toggle#togglecan be called alone- Example:
<button data-action='click->toggler#all touch->toggler#all click@window->toggler#hide touch@window->toggler#hide' data-toggler-toggle="block4" data-toggler-hide="block4">Toggle 4 and hide when click outside</button>
-
Attach a
data-toggler-nameto an element that should be toggled. The element is closed by default. If the element should start opened, adddata-toggler-opento the element.- Example:
<div data-toggler-name="block1" data-toggler-open>Block 1</div>
-
Attach a
data-toggler-away="dropdown1"to an element if is wanted that, when clicked outside that element, other element is wanted to be hidden.- Can be used within multiple elements
data-toggler-away="dropdown1 dropdown2 sidebar3" - Example:
<div data-toggler-away="dropdown1">When clicking outside this element, data-togler-name="dropdown1" will be hidden</div>
- Can be used within multiple elements
<main data-controller="toggler">
<button data-action="toggler#all" data-toggler-toggle="block1">
Toggle Block 1
</button>
<div data-toggler-name="block1">
<p>This is the block1</p>
</div>
</main><main data-controller="toggler">
<button data-action="toggler#all" data-toggler-toggle="block1 block2" data-toggler-show="block3" data-toggler-hide="block4 block5">
Toggle 1 & 2, Show 3, Hide 4 & 5
</button>
<div data-toggler-name="block1"><p>This is the block1</p></div>
<div data-toggler-name="block2"><p>This is the block2</p></div>
<div data-toggler-name="block3"><p>This is the block3</p></div>
<div data-toggler-name="block4"><p>This is the block4</p></div>
<div data-toggler-name="block5"><p>This is the block5</p></div>
</main><main data-controller="toggler">
<div class="border-b border-gray-200">
<nav class="-mb-px flex space-x-8 mx-auto">
<div
data-action="click->toggler#all touch->toggler#all"
data-toggler-tab="tab-demo"
data-toggler-show="tab-demo-content-1"
data-toggler-on-class="border-purple-500 text-purple-600"
data-toggler-off-class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
class="cursor-pointer whitespace-nowrap border-b-2 py-4 px-1 font-medium"
data-toggler-open>
Tab 1 </div>
<div
data-action="click->toggler#all touch->toggler#all"
data-toggler-tab="tab-demo"
data-toggler-show="tab-demo-content-2"
data-toggler-on-class="border-purple-500 text-purple-600"
data-toggler-off-class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
class="cursor-pointer whitespace-nowrap border-b-2 py-4 px-1 font-medium">
Tab 2 </div>
</nav>
</div>
<div data-toggler-name="tab-demo-content-1" data-toggler-open>
Tab 1 Content
</div>
<div data-toggler-name="tab-demo-content-2">
Tab 2 Content
</div>
</main><main data-controller="toggler" data-toggler-debug-value>
...
</main>npm run testnpm run build- Tests dispatch events feature
- Add data-toggler-target to react when new item is added to dom
- This project is licensed under the MIT License.