Angular directive to display a inline help block, quick demo here: http://ng-milk.github.io/angular-help-block-directive/
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
LICENSE
README.md
bower.json
gulpfile.js
index.html
package.json

README.md

Angular help block directive

Angular help block directive demo

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.