Permalink
Cannot retrieve contributors at this time
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Angular help block demo</title> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script> | |
| <!-- Optional: include ng-animate for some extra sugar --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-animate.js"></script> | |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
| <link href="dist/ng-help-block.css" rel="stylesheet" type="text/css" /> | |
| <!-- Optional: include font-awesome to display an icon next to the help block title --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> | |
| <!-- Just some body style to space things up --> | |
| <style> | |
| body{ | |
| padding: 120px 60px; | |
| color:white; | |
| /* So much gradient, check out -> http://uigradients.com */ | |
| background: -webkit-linear-gradient(90deg, #000000 10%, #53346D 90%); /* Chrome 10+, Saf5.1+ */ | |
| background: -moz-linear-gradient(90deg, #000000 10%, #53346D 90%); /* FF3.6+ */ | |
| background: -ms-linear-gradient(90deg, #000000 10%, #53346D 90%); /* IE10 */ | |
| background: -o-linear-gradient(90deg, #000000 10%, #53346D 90%); /* Opera 11.10+ */ | |
| background: linear-gradient(90deg, #000000 10%, #53346D 90%); /* W3C */ | |
| } | |
| h1{ | |
| font-size:1.6em; | |
| font-weight: 300; | |
| margin-bottom:30px; | |
| } | |
| footer{ | |
| margin-top:30px; | |
| padding-top: 15px; | |
| border-top: 1px solid rgba(48, 39, 56, 0.4); | |
| } | |
| /* Change directive expanded style */ | |
| .hb-row.expanded { | |
| border-left: 4px solid #452B5A; | |
| } | |
| </style> | |
| </head> | |
| <body ng-app="app" ng-controller="ctrl"> | |
| <header class="col-xs-12"> | |
| <h1>Angular help block demo</h1> | |
| </header> | |
| <section class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> | |
| <section help-block help-block-title="{{title}}" help-block-content="{{content}}" help-block-icon-class="fa fa-question-circle"></section> | |
| </section> | |
| <footer class="col-xs-12"> | |
| <a class="btn btn-primary" href="https://github.com/ng-milk/angular-help-block-directive"><i class="fa fa-code-fork"></i> Fork on Github</a> | |
| <a class="btn btn-default" href="https://github.com/ng-milk/angular-help-block-directive/issues"><i class="fa fa-bug"></i> Submit an issue</a> | |
| </footer> | |
| <!-- Local JS --> | |
| <script src="dist/ng-help-block.js"></script> | |
| <script> | |
| angular | |
| .module('app', ['ngAnimate', 'dm.helpBlock']) | |
| .controller('ctrl', ['$scope', function($scope){ | |
| $scope.title = "Press me for help"; | |
| $scope.content = "Inline expansion within the current content area is a great idea for a help block. This approach presents a non-interruptive option while maintaining the current context."; | |
| }]); | |
| </script> | |
| </body> | |
| </html> |