Angular help block directive

Quick Demo

A directive that will help you display your help blocks inline. Read more about it here.

Usage

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

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

Bower

Installable via bower:

bower install ng-help-block

Example

See index.html for an example.

[...]
<section help-block help-block-title="Here to help" help-block-content="Help content"></section>
[...]

Title icon

You can pass a 'title' icon to the directive via the help-block-icon-class attribute. In the example index.html font-awesome is used.

<section help-block help-block-title="{{title}}" help-block-content="{{content}}" help-block-icon-class="fa fa-question-circle"></section>

Further customization

The class expanded will be appended to the directive container when the help block is toggled. To override the directive styles you can customize the following:

• .hb-row -> the directive container
• .hb-row.expanded -> the directive container when toggled
• .hb-title -> the directive title
• .hb-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.