Skip to content

Latest commit

 

History

History
68 lines (49 loc) · 2.26 KB

README.md

File metadata and controls

68 lines (49 loc) · 2.26 KB
Raw

Angular collapsible block / ng-transclude demo

Angular collapsible block

Quick Demo

A directive that uses ng-transclude to create collapsible blocks. Read more about it here.

Usage

  1. Include ng-collapsible-block.js.
  2. Include ng-collapsible-block.css.
  3. Add dm.collapsibleBlock as a dependency to your app.
  4. Profit!

... 5. (optional) Include ngAnimate as a dependency to animate the collapsible block toggling.

Bower

Installable via bower:

bower install ng-collapsible-block

Example

See index.html for an example.

[...]
<collapsible collapsible-title="Title">
  <section>
    Collapsible content
  </section>
</collapsible>
[...]

Title icons

You can pass 'title' icons to the directive via the collapsed-icon & expanded-icon attributes. In the example index.html font-awesome is used.

<collapsible collapsible-title="Title" collapsed-icon="fa fa-chevron-down" expanded-icon="fa fa-chevron-up">
  <section>
    Collapsible content
  </section>
</collapsible>

Further customization

The class clps--expanded will be appended to the directive container when it's expanded. To override the directive styles you can customize the following:

  • .clps -> the directive container
  • .clps--expanded -> the directive container when expanded
  • .clps__title -> the directive title
  • .clps__content -> the directive content

Check out index.css for the full list of CSS props.

About ngmilk

ngmilk is the place to go for fresh front-end articles, with a focus on AngularJS. See more on ngmilk.rocks

Follow @ngmilkrocks on Twitter to stay ahead of the game.