Permalink
Cannot retrieve contributors at this time
Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.
Sign up
Fetching contributors…
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> |