# @ianwalter/sled

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

Latest version **5.0.0** (published 2020-06-17) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install @ianwalter/sled
pnpm add @ianwalter/sled
yarn add @ianwalter/sled
bun add @ianwalter/sled
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2020-06-17 |
| First published | 2018-08-14 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ian Walter |
| Maintainers | ianwalter |
| Keywords | slide, height, transition, toggle, collapse |

## Links

- npm: https://www.npmjs.com/package/@ianwalter/sled
- Repository: https://github.com/ianwalter/sled
- Homepage: https://sled.iankwalter.com/
- Issues: https://github.com/ianwalter/sled/issues
- npm.io page: https://npm.io/package/@ianwalter/sled

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 5.0.0 (latest) — 2020-06-17
- 4.0.0 — 2019-06-27
- 3.0.0 — 2019-04-29
- 2.3.0 — 2019-03-13
- 2.2.0 — 2019-03-13
- 2.1.1 — 2019-02-02
- 2.1.0 — 2019-02-02
- 2.0.0 — 2019-02-01
- 1.0.2 — 2018-09-12
- 1.0.1 — 2018-08-14
- 1.0.0 — 2018-08-14

## README

# @ianwalter/sled
> A JavaScript micro-library for animating an element's height to create
> a slide effect

[![npm page][npmImage]][npmUrl]

## 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][demoUrl] to see the demo.

## Installation

```console
npm install @ianwalter/sled --save
```

## Usage

**Vanilla JavaScript example:**

```js
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:**

```js
import Sled from '@ianwalter/sled'

let sled

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

## Related

* [`@ianwalter/power-sled`][powerSledUrl] - A JavaScript micro-library for
adding dropdown menu functionality to elements

## License

Apache 2.0 with Commons Clause - See [LICENSE][licenseUrl]

 

Created by [Ian Walter](https://iankwalter.com)

[bootstrapUrl]: https://getbootstrap.com
[demoUrl]: https://sled.iankwalter.com
[npmImage]: https://img.shields.io/npm/v/@ianwalter/sled.svg
[npmUrl]: https://www.npmjs.com/package/@ianwalter/sled
[powerSledUrl]: https://github.com/ianwalter/power-sled
[licenseUrl]: https://github.com/ianwalter/sled/blob/master/LICENSE

---
_Source: https://npm.io/package/@ianwalter/sled · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._