angular-slideables

A "pure" Angular implementation of jQuery-style toggleSlide().

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-slideables
111.0.07 years ago7 years agoMinified + gzip package size for angular-slideables in KB

Readme

AngularSlideables ================= A �pure� Angular implementation of jQuery-style toggleSlide(). See http://jsfiddle.net/3sVz8/19/ for an example. USAGE: Link to the library in your index (or require.js), and add 'angularSlideables' to your app modules. No CSS is necessary. Add the �slideable� class to any hidden, slideable content. Add a slide-toggle attribute to any trigger. This directive currently only works on single targetted IDs. I�ll expand it to cover classes if there�s demand. EXAMPLES:
<article ng-app="angularSlideables">
<h1 slide-toggle="#derp" >Click here for Hipster Ipsum.</h1>
<div id="derp" class="slideable">
<p>Bespoke aesthetic Bushwick craft beer. Qui aesthetic butcher, cardigan ex scenester Neutra American Apparel mumblecore.</p>
<p>Ethical adipisicing before they sold out, sriracha Thundercats cardigan dolor deep v placeat. Flannel tattooed meggings direct trade banh mi tousled sriracha. Portland VHS ut dreamcatcher. Butcher eu irony, Banksy leggings eiusmod Pinterest hashtag Etsy asymmetrical lo-fi Helvetica quis incididunt adipisicing. YOLO cliche minim mlkshk dreamcatcher excepteur, Austin McSweeney's.</p>
<p>Coded @ Kinfolk Studios in Williamsburg, Brooklyn, 2013.</p>
</div>
<p>Your fresh artisinal Ipsum will appear above this paragraph. </p>
</article>
The ID can be dynamically generated�
<ul>
<li ng-repeat="row in data">
<span slide-toggle="#row_{{$index}}" >expand row #{{$index}}.</span>
<div id="row_{{$index}}" class="slideable">
<p>How are YOU doing?</p>
</div>
</li>
</ul>
OPTIONAL ATTRIBUTES:
<div id="derp" class="slideable" easing="linear" duration="5s">�</div>