Registers filter components allowing for a single input and output!
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
You can install this package either with npm
or with bower
.
$ 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 install BerkleyTechnologyServices/slidey
Then add a <script>
to your index.html:
<script src="/bower_components/slidey/dist/slidey.js"></script>
<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>
Default: false
Description
Determines whether the slidey is opened or closed.
Example
<bts-slidey opened="true">
My super cool content!
</bts-slidey>
Default: 80%
Description
Determines the width of the slidey when opened.
Example
<bts-slidey content-width="200px">
My super cool content!
</bts-slidey>
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.
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>
Description
Fires off when the closing animation finishes.
Example
<bts-slidey on-close-finished="$ctrl.onCloseFinished()">
My super cool content!
</bts-slidey>