https://github.com/damonbauer/stimulus-toggle-util
An on/off toggle utility for Stimulus
https://github.com/damonbauer/stimulus-toggle-util
stimulus stimulus-js stimulusjs toggle
Last synced: 3 months ago
JSON representation
An on/off toggle utility for Stimulus
- Host: GitHub
- URL: https://github.com/damonbauer/stimulus-toggle-util
- Owner: damonbauer
- License: mit
- Created: 2020-04-13T12:50:08.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T12:01:57.000Z (over 2 years ago)
- Last Synced: 2024-11-14T20:48:25.671Z (7 months ago)
- Topics: stimulus, stimulus-js, stimulusjs, toggle
- Language: JavaScript
- Size: 1.91 MB
- Stars: 23
- Watchers: 2
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
 
# stimulus-toggle-util
An on/off toggle utility for [Stimulus](https://stimulusjs.org/).
[View a demo.](https://codesandbox.io/s/stimulus-toggle-demo-qelx8)
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Options](#options)
- [License](#license)
## Installation
```sh
$ yarn add stimulus-toggle-util
```
### Register the Controller
```js
// ./packs/application.js
import { Application } from 'stimulus';
// import Toggle
import Toggle from 'stimulus-toggle-util';
import { definitionsFromContext } from 'stimulus/webpack-helpers';
const application = Application.start();
const context = require.context('../controllers', true, /\.js$/);
application.load(definitionsFromContext(context));
// Manually register `stimulus-toggle-util` as a stimulus controller
application.register('toggle', Toggle);
```
## Usage
1. Attach the controller to an element. Recommended to attach to a top-level container, like `` or `` so it can be used anywhere.
* **Example:**
```html
...
```
2. Attach an `action` and a `toggle target` to an element that should _perform_ the toggling.
* **Example:**
```html
Toggle
```
* `data-action="toggle#toggle"`: `toggle` is the `ToggleController`, `#toggle` is the _action_ that is performed when this element is clicked.
3. Attach a `toggle name` to an element that should _be toggled_.
* **Example:**
```html
...
```
### Toggle a single element
```html
Toggle Sidebar 1
Here's "Sidebar 1".
```
### Toggle multiple elements
```html
Toggle Sidebar 1
Toggle Sidebar 1 & 2
Here's "Sidebar 1".
Here's "Sidebar 2".
```
### Customize the CSS class
```html
Toggle Sidebar 1
Here's "Sidebar 1".
```
### Options
Option | Type | Required | Default | Description
--- | --- | :---: | --- | ---
`data-hidden-class` | `String` | 🚫 | `is-hidden` | The CSS class to toggle on/off. It's up to you to apply styles to the to this class to hide/show the element.
### License
This project is licensed under the MIT License.