Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/berkleytechnologyservices/slidey
Fit more content onto your pages by nesting slideys indefinitely!
https://github.com/berkleytechnologyservices/slidey
Last synced: 2 days ago
JSON representation
Fit more content onto your pages by nesting slideys indefinitely!
- Host: GitHub
- URL: https://github.com/berkleytechnologyservices/slidey
- Owner: BerkleyTechnologyServices
- License: apache-2.0
- Created: 2017-04-28T20:02:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T11:58:50.000Z (almost 2 years ago)
- Last Synced: 2024-12-19T17:49:36.061Z (6 days ago)
- Language: JavaScript
- Size: 399 KB
- Stars: 3
- Watchers: 5
- Forks: 2
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Slidey
[![NPM Version][npm-version-image]][npm-url]
[![NPM Downloads][npm-downloads-image]][npm-url]
[![Travis][travis-ci-image]][travis-ci-url]
[![Coveralls][coveralls-image]][coveralls-url]
[![semantic-release][semantic-release-image]][semantic-release-url]
Registers filter components allowing for a single input and output!
## Supported Browsers
_If a version isn't specified that means we test on the latest and greatest, however most versions of that browser should work._
- Chrome
- Firefox
- Safari 8+
- Edge
- IE 11
## Install
You can install this package either with `npm` or with `bower`.
## npm
```sh
$ npm install @bts/slidey
```
Then add a `` to your index.html:
```html
<script src="/node_modules/@bts/slidey/dist/slidey.js">
```
Or `require('@bts/slidey')` from your code.
## bower
```sh
$ bower install BerkleyTechnologyServices/slidey
```
Then add a `` to your index.html:
```html
<script src="/bower_components/slidey/dist/slidey.js">
```
## Example
[Live Demo](https://jsbin.com/mujosep/edit?html,js,output)
## Usage
```html
My content that will appear in the aside
My content that will appear in the nested aside
```
## Bindings
### Opened
**Default:** `false`
**Description**
Determines whether the slidey is opened or closed.
**Example**
```html
My super cool content!
```
### Content Width
**Default:** `80%`
**Description**
Determines the width of the slidey when opened.
**Example**
```html
My super cool content!
```
### Reflow Container
**Default:** `undefined`
**Description**
Adjusts the height of the container to the height of the active slidey.
**Example**
```html
My super cool content!
```
**Known Issues**
- When a transition is placed on `height` it is not animated in all cases unless the container has a height specified.
## Events
### Close
**Description**
Fires off when the opened binding changes from true to false.
**Example**
```html
My super cool content!
```
### Close Finished
**Description**
Fires off when the closing animation finishes.
**Example**
```html
My super cool content!
```
[npm-version-image]: http://img.shields.io/npm/v/@bts/slidey.svg?style=flat
[npm-downloads-image]: http://img.shields.io/npm/dm/@bts/slidey.svg?style=flat
[npm-url]: https://npmjs.org/package/@bts/slidey
[travis-ci-image]: https://travis-ci.org/BerkleyTechnologyServices/slidey.svg?branch=master
[travis-ci-url]: https://travis-ci.org/BerkleyTechnologyServices/slidey
[coveralls-image]: https://img.shields.io/coveralls/BerkleyTechnologyServices/slidey/master.svg
[coveralls-url]: https://coveralls.io/github/BerkleyTechnologyServices/slidey
[semantic-release-url]: https://github.com/semantic-release/semantic-release
[semantic-release-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg