jangolano/slidey

Fit more content onto your pages by nesting slideys indefinitely!

Slidey

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>