Skip to content

Fit more content onto your pages by nesting slideys indefinitely!

License

Notifications You must be signed in to change notification settings

BerkleyTechnologyServices/slidey

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Slidey

NPM Version NPM Downloads Travis Coveralls

semantic-release

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

$ npm install @bts/slidey

Then add a <script> to your index.html:

<script src="/node_modules/@bts/slidey/dist/slidey.js"></script>

Or require('@bts/slidey') from your code.

bower

$ bower install BerkleyTechnologyServices/slidey

Then add a <script> to your index.html:

<script src="/bower_components/slidey/dist/slidey.js"></script>

Example

Live Demo

Usage

<bts-slidey opened="someBooleanValue">
  My content that will appear in the aside
  <bts-slidey opened="someOtherBooleanValue">
    My content that will appear in the nested aside
  </bts-slidey>
</bts-slidey>

Bindings

Opened

Default: false

Description

Determines whether the slidey is opened or closed.

Example

<bts-slidey opened="true">
  My super cool content!
</bts-slidey>

Content Width

Default: 80%

Description

Determines the width of the slidey when opened.

Example

<bts-slidey content-width="200px">
  My super cool content!
</bts-slidey>

Reflow Container

Default: undefined

Description

Adjusts the height of the container to the height of the active slidey.

Example

<div id="modal">
  <bts-slidey reflow-container="modal">
    My super cool content!
  </bts-slidey>
</div>

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

<bts-slidey on-close="$ctrl.onClose()">
  My super cool content!
</bts-slidey>

Close Finished

Description

Fires off when the closing animation finishes.

Example

<bts-slidey on-close-finished="$ctrl.onCloseFinished()">
  My super cool content!
</bts-slidey>