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> |