Miss any of our Open RFC calls?Watch the recordings here! »

slidingjs

1.1.0 • Public • Published

slidingjs

Library fol simple sliding in/out some HTML element.

Important

Library write with using ES2015 sintax

Install

For install use npm i slidingjs

Usage

For use it exist two way:

Reactive update

Immediately update data-slide-state attribute for changing state of element. Fot that use function 'init' when initialize project

Vue example

  <template>
    <input type="button" value="Change state" v-on:click="toggleState">
    <div id="expandDiv" v-bind:data-slide-state="state"></div>
  </template>
 
  <script>
    import slidingjs from 'slidingjs';
 
    ...
    mounted() {
      slidingjs.init('#expandDiv');
    },
    data() {
      return {
        state: 'open'
      }
    },
    methods: {
      toggleState() {
        this.state = this.state === 'open' ? 'close' : 'open';
      }
    }
    ...
  </script>

Immediately update

Also you can use:

  • slideToggle - switch state of element
  • slideUp - collapse element
  • slideDown - open element

Vue example

  <template>
    <input type="button" value="Change state" v-on:click="toggleState">
    <div id="expandDiv"></div>
  </template>
 
  <script>
    import slidingjs from 'slidingjs';
 
    ...
    methods: {
      toggleState() {
        slidingjs.toggleState('#expandDiv');
      }
    }
    ...
  </script>

Input parameters

All functions take two parameters:

  • sel - element selector (*)
  • timeMs - execution time in milliseconds (default value 500 ms)

Install

npm i slidingjs

DownloadsWeekly Downloads

4

Version

1.1.0

License

MIT

Unpacked Size

7.96 kB

Total Files

10

Last publish

Collaborators

  • avatar