Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Angular directive to display a inline help block, quick demo here: http://ng-milk.github.io/angular-help-block-directive/

Topics

Resources

License

Packages

No packages published