https://github.com/kanety/stimulus-splitter

https://github.com/kanety/stimulus-splitter

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/kanety/stimulus-splitter
• Owner: kanety
• License: mit
• Created: 2021-10-14T11:54:10.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-06-27T07:30:47.000Z (7 months ago)
• Last Synced: 2024-10-16T11:03:47.668Z (3 months ago)
• Language: JavaScript
• Size: 40 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# stimulus-splitter

A stimulus controller for simple splitter.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

    $ npm install @kanety/stimulus-splitter --save

## Usage

Register controller:

```javascript

import { Application } from '@hotwired/stimulus';

import SplitterController from '@kanety/stimulus-splitter';

const application = Application.start();

application.register('splitter', SplitterController);

```

Import css:

```css

@import '@kanety/stimulus-splitter';

```

Build html as follows for vertical splitter:

```html



  


    
content 1

  

  


  


    
content 2

  

  


  


    
content 3

  



```


You can also specify horizontal splitter:

```html



  


    
content 1

  

  


  


    
content 2

  

  


  


    
content 3

  



```


You can also use for resizable table headers as the following example:

```html

  

    header 1

    
header 2

    
header 3

    
header 4

  

  

    data 1

    data 2

    data 3

    data 4

  


```

### Options

#### resize-target

By default the previous element adjacent with splitter is resized.

If your container has fixed size, you can resize both elements adjacent with the splitter:

```html





```


#### store-key

Save element size to `sessionStorage`:

```html





```


### Callbacks

Run callbacks when elements are resized by splitter:

```javascript

let element = document.querySelector('[data-controller="splitter"]');

element.addEventListener('splitter:resized', e => {

  console.log("resized: " + e.detail.splitter);

});

```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).