A JavaScript micro-library for animating an element's height to create a slide effect
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Initial commit Aug 14, 2018
site
tests Adding travis config, switching to yarn Oct 19, 2018
.gitignore Initial commit Aug 14, 2018
Dockerfile Refactoring site Nov 24, 2018
LICENSE Fixing license Nov 21, 2018
README.md
azure-pipelines.yml Refactoring site Nov 24, 2018
index.js Making default height empty string Aug 14, 2018
package.json Bump css-loader from 1.0.1 to 2.0.0 Dec 11, 2018
station.yml Adding station config Nov 28, 2018
webpack.config.js Switching content back to site/index.html Dec 11, 2018
yarn.lock

README.md

@ianwalter/sled

A JavaScript micro-library for animating an element's height to create a slide effect

npm page build status

About

I created Sled because I wanted to use [Bootstrap's][boostrapUrl] collapsible navbar menu without having to import a bunch of unnecessary code. Sled is 20 lines of code, 182 bytes, and has no dependencies.

Demo

Click here to see the demo.

Installation

npm install @ianwalter/sled --save

Usage

Vanilla JavaScript example:

import Sled from '@ianwalter/sled'
const sled = new Sled(document.querySelector('#myEl'))

// Slide to a specific height:
sled.slide('100px')

// Toggle between 0 height and the elements natural height.
sled.toggle()

Vue.js example:

import Sled from '@ianwalter/sled'

let sled

export default {
  mounted () {
    sled = new Sled(this.$refs.menu)
  },
  methods: {
    toggleMenu: () => sled.toggle()
  }
}

License

Apache 2.0 with Commons Clause - See LICENSE

 

Created by Ian Walter