| <!DOCTYPE html> |
| <html lang="en" ng-app="ui.bootstrap.demo" id="top"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> |
| <link rel="icon" href="assets/favicon.ico" /> |
| <title>Angular directives for Bootstrap</title> |
| <meta name="description" content="AngularJS (Angular) native directives for Bootstrap. Small footprint (5kB gzipped!), no 3rd party JS dependencies (jQuery, bootstrap JS) required! Widgets: <% demoModules.forEach(function(module) { %><%= module.displayName %>, <% }); %>"> |
| <meta name="google-site-verification" content="7lc5HyceLDqpV_6oNHteYFfxDJH7-S3DwnJKtNUKcRg" /> |
| <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script> |
| <script src="//cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.0.0/FileSaver.min.js"></script> |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script> |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular.min.js"></script> |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-animate.min.js"></script> |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-touch.min.js"></script> |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-sanitize.js"></script> |
| <script src="ui-bootstrap-tpls-<%= pkg.version%>.min.js"></script> |
| <script src="assets/plunker.js"></script> |
| <script src="assets/app.js"></script> |
| |
| <link href="//netdna.bootstrapcdn.com/bootstrap/<%= bsversion %>/css/bootstrap.min.css" rel="stylesheet"/> |
| <link rel="stylesheet" href="assets/rainbow.css"/> |
| <link rel="stylesheet" href="assets/demo.css"/> |
| <link rel="author" href="https://github.com/angular-ui/bootstrap/graphs/contributors"> |
| </head> |
| <body class="ng-cloak" ng-controller="MainCtrl"> |
| <header class="navbar navbar-default navbar-fixed-top navbar-inner"> |
| <div class="container"> |
| <div class="navbar-header"> |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" ng-click="isCollapsed = !isCollapsed"> |
| <span class="sr-only">Toggle navigation</span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </button> |
| <a class="navbar-brand visible-xs" href="#">UI Bootstrap</a> |
| </div> |
| <nav class="hidden-xs"> |
| <ul class="nav navbar-nav"> |
| <a href="#top" role="button" class="navbar-brand"> |
| UI Bootstrap |
| </a> |
| <li class="dropdown" uib-dropdown> |
| <a role="button" class="dropdown-toggle" uib-dropdown-toggle> |
| Directives <b class="caret"></b> |
| </a> |
| <ul class="dropdown-menu"> |
| <% demoModules.forEach(function(module) { %><li><a href="#<%= module.name %>"><%= module.displayName %></a></li><% }); %> |
| </ul> |
| </li> |
| <li><a href="#getting_started">Getting started</a></li> |
| <li class="dropdown" uib-dropdown> |
| <a role="button" class="dropdown-toggle" uib-dropdown-toggle> |
| Previous docs <b class="caret"></b> |
| </a> |
| <ul class="dropdown-menu"> |
| <li ng-repeat="version in oldDocs"> |
| <a ng-href="{{version.url}}">{{version.version}}</a> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </nav> |
| <nav class="visible-xs" uib-collapse="!isCollapsed"> |
| <ul class="nav navbar-nav"> |
| <li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li> |
| <li><a href="#directives_small" ng-click="isCollapsed = !isCollapsed">Directives</a></li> |
| </ul> |
| </nav> |
| </div> |
| </header> |
| <div class="header-placeholder"></div> |
| <div role="main"> |
| <header class="bs-header text-center" id="overview"> |
| <div class="container"> |
| <h1> |
| UI Bootstrap |
| </h1> |
| |
| <p>Bootstrap components written in pure <a href="http://angularjs.org">AngularJS</a> by the <a |
| href="http://angular-ui.github.io">AngularUI Team</a></p> |
| |
| <p> |
| <a class="btn btn-outline-inverse btn-lg" href="https://github.com/angular-ui/bootstrap"><i class="icon-github"></i>Code on Github</a> |
| <button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showDownloadModal()"> |
| <i class="glyphicon glyphicon-download-alt"></i> Download <small>(<%= pkg.version%>)</small> |
| </button> |
| <button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showBuildModal()"><i class="glyphicon glyphicon-wrench"></i> Create a Build</button> |
| </p> |
| </div> |
| <div class="bs-social container"> |
| <ul class="bs-social-buttons"> |
| <li> |
| <iframe src="//ghbtns.com/github-btn.html?user=angular-ui&repo=bootstrap&type=watch&count=true" |
| allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe> |
| </li> |
| <li> |
| <iframe src="//ghbtns.com/github-btn.html?user=angular-ui&repo=bootstrap&type=fork&count=true" |
| allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe> |
| </li> |
| <li> |
| <a href="https://twitter.com/share" class="twitter-share-button" |
| data-hashtags="angularjs">Tweet</a> |
| <script>!function (d, s, id) { |
| var js, fjs = d.getElementsByTagName(s)[0]; |
| if (!d.getElementById(id)) { |
| js = d.createElement(s); |
| js.id = id; |
| js.src = "//platform.twitter.com/widgets.js"; |
| fjs.parentNode.insertBefore(js, fjs); |
| } |
| }(document, "script", "twitter-wjs");</script> |
| </li> |
| <li> |
| <!-- Place this tag where you want the +1 button to render. --> |
| <div class="g-plusone" data-size="medium"></div> |
| |
| <!-- Place this tag after the last +1 button tag. --> |
| <script type="text/javascript"> |
| (function () { |
| var po = document.createElement('script'); |
| po.type = 'text/javascript'; |
| po.async = true; |
| po.src = 'https://apis.google.com/js/plusone.js'; |
| var s = document.getElementsByTagName('script')[0]; |
| s.parentNode.insertBefore(po, s); |
| })(); |
| </script> |
| </li> |
| </ul> |
| </div> |
| </header> |
| <div class="container"> |
| <div class="row"> |
| <div class="col-md-12"> |
| <section class="bs-sidebar visible-xs" id="directives_small"> |
| <ul class="nav bs-sidenav"> |
| <li><a href="#"><strong>Directives</strong></a></li> |
| <% demoModules.forEach(function(module) { %> |
| <li><a href="#<%= module.name %>"><%= module.displayName %></a></li> |
| <% }); %> |
| </ul> |
| </section> |
| |
| <section id="getting_started"> |
| <div class="page-header"> |
| <h1>Getting started</h1> |
| </div> |
| <h3>Dependencies</h3> |
| <p> |
| This repository contains a set of <strong>native AngularJS directives</strong> based on |
| Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's |
| JavaScript is required. The <strong>only required dependencies</strong> are: |
| </p> |
| <ul> |
| <li><a href="http://angularjs.org" target="_blank">AngularJS</a> (requires AngularJS 1.3.x, tested with <%= ngversion %>). |
| 0.12.0 is the last version of this library that supports AngularJS 1.2.x.</li> |
| <li><a href="http://getbootstrap.com" target="_blank">Bootstrap CSS</a> (tested with version <%= bsversion %>). |
| This version of the library (<%= pkg.version%>) works only with Bootstrap CSS in version 3.x. |
| 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x. |
| </li> |
| </ul> |
| <h3>Files to download</h3> |
| <p> |
| Build files for all directives are distributed in several flavours: minified for production usage, un-minified |
| for development, with or without templates. All the options are described and can be |
| <a href="https://github.com/angular-ui/bootstrap/tree/gh-pages">downloaded from here</a>. It should be noted that the <code>-tpls</code> files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ <a href="https://github.com/angular-ui/bootstrap/wiki/FAQ#full-explanation">here</a> and the README <a href="https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files">here</a>. |
| </p> |
| <p>Alternativelly, if you are only interested in a subset of directives, you can |
| <a ng-click="showBuildModal()">create your own build</a>. |
| </p> |
| <p>Whichever method you choose the good news that the overall size of a download is very small: |
| <76kB for all directives (~20kB with gzip compression!)</p> |
| <h3>Installation</h3> |
| <p>As soon as you've got all the files downloaded and included in your page you just need to declare |
| a dependency on the <code>ui.bootstrap</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br> |
| <pre><code>angular.module('myModule', ['ui.bootstrap']);</code></pre> |
| </p> |
| <p>You can fork one of the plunkers from this page to see a working example of what is described here.</p> |
| <h3>CSS</h3> |
| <p>Original Bootstrap's CSS depends on empty <code>href</code> attributes to style cursors for several components (pagination, tabs etc.). |
| But in AngularJS adding empty <code>href</code> attributes to link tags will cause unwanted route changes. This is why we need to remove empty <code>href</code> attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application: <pre><code>.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }</code></pre> |
| </p> |
| <h3>FAQ</h3> |
| <p>Please check <a href="https://github.com/angular-ui/bootstrap/wiki/FAQ" target="_blank">our FAQ section</a> for common problems / solutions.</p> |
| <h3>Reading the documentation</h3> |
| <p> |
| Each of the components provided in <code>ui-bootstrap</code> have documentation and interactive Plunker examples. |
| </p> |
| <p> |
| For the directives, we list the different attributes with their default values, and whether they are readonly. In addition to this, some settings |
| have an eye icon next to them like this <i class="glyphicon glyphicon-eye-open"></i>. The eye means that the setting has an Angular |
| <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch" title="Angular $watch" target="_blank">$watch</a> listener applied to it. |
| </p> |
| <p> |
| For the services (you will recognize them with the <code>$</code> prefix), we list all the possible parameters you can pass to them and their default values if any. |
| </p> |
| <p> |
| Also, some components have default values that you can override globally within a <code>.config</code> function for example. |
| </p> |
| </section> |
| <% demoModules.forEach(function(module) { %> |
| <section id="<%= module.name %>"> |
| <div class="page-header"> |
| <h1><%= module.displayName %><small> |
| (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/<%= module.name %>">ui.bootstrap.<%= module.name %></a>) |
| </small></h1> |
| </div> |
| <div class="row"> |
| <div class="col-md-6 show-grid"> |
| <%= module.docs.html %> |
| </div> |
| <div class="col-md-6"> |
| <%= module.docs.md %> |
| </div> |
| </div> |
| <hr> |
| <div class="row code"> |
| <div class="col-md-12" ng-controller="PlunkerCtrl"> |
| <div class="pull-right"> |
| <button type="button" class="btn btn-info plunk-btn" ng-click="edit('<%= ngversion%>', '<%= bsversion %>', '<%= pkg.version%>', '<%= module.name %>')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button> |
| </div> |
| <uib-tabset> |
| <uib-tab heading="Markup"> |
| <div plunker-content="markup"> |
| <pre ng-non-bindable><code data-language="html"><%- module.docs.html %></code></pre> |
| </div> |
| </uib-tab> |
| <uib-tab heading="JavaScript"> |
| <div plunker-content="javascript"> |
| <pre ng-non-bindable><code data-language="javascript"><%- module.docs.js %></code></pre> |
| </div> |
| </uib-tab> |
| </uib-tabset> |
| </div> |
| </div> |
| </section> |
| <script><%= module.docs.js %></script> |
| <% }); %> |
| </div> |
| </div> |
| </div><!-- /.container --> |
| </div><!-- /.main --> |
| <footer class="footer"> |
| <div class="container"> |
| <p>Designed and built by <a href="https://github.com/angular-ui?tab=members" target="_blank">Angular-UI team</a> and <a href="https://github.com/angular-ui/bootstrap/graphs/contributors" target="_blank">contributors</a>.</p> |
| <p>Code licensed under <a href="https://github.com/angular-ui/bootstrap/blob/master/LICENSE"><%= pkg.license %> License</a>.</p> |
| <p><a href="https://github.com/angular-ui/bootstrap/issues?state=open">Issues</a></p> |
| </div> |
| </footer> |
| <script src="assets/rainbow.js"></script> |
| <script src="assets/rainbow-generic.js"></script> |
| <script src="assets/rainbow-javascript.js"></script> |
| <script src="assets/rainbow-html.js"></script> |
| <script type="text/ng-template" id="downloadModal.html"> |
| <div class="modal-header"><h4 class="modal-title">Download Angular UI Bootstrap</h4></div> |
| <div class="modal-body"> |
| <form class="form-horizontal"> |
| <div class="form-group"> |
| <label class="col-sm-3 control-label"><strong>Build</strong></label> |
| <div class="col-sm-9"> |
| <span class="btn-group"> |
| <button type="button" class="btn btn-default" ng-model="options.minified" uib-btn-radio="true">Minified</button> |
| <button type="button" class="btn btn-default" ng-model="options.minified" uib-btn-radio="false">Uncompressed</button> |
| </span> |
| <small class="help-block">Use <b>Minified</b> version in your deployed application. <b>Uncompressed</b> source code is useful only for debugging and development purpose.</small> |
| </div> |
| </div> |
| <div class="form-group"> |
| <label class="col-sm-3 control-label"><strong>Include Templates</strong></label> |
| <div class="col-sm-9"> |
| <span class="btn-group"> |
| <button type="button" class="btn btn-default" ng-model="options.tpls" uib-btn-radio="true">Yes</button> |
| <button type="button" class="btn btn-default" ng-model="options.tpls" uib-btn-radio="false">No</button> |
| </span> |
| <small class="help-block">Whether you want to include the <i>default templates</i>, bundled with most of the directives. These templates are based on Bootstrap's markup and CSS.</small> |
| </div> |
| </div> |
| <div class="form-group"> |
| <label class="col-sm-3 control-label"><strong>Bower</strong></label> |
| <div class="col-sm-9"> |
| <small>If you are using Bower just run:</small> |
| <pre style="margin-bottom:0;">bower install angular-bootstrap</pre> |
| <small class="help-block"><a href="http://bower.io/" target="_blank">Bower</a> is a package manager for the web.</small> |
| </div> |
| </div> |
| </form> |
| </div> |
| <div class="modal-footer"> |
| <a class="btn btn-default" ng-click="cancel()">Close</a> |
| <a class="btn btn-primary" ng-href="{{download('<%= pkg.version%>')}}" download><i class="glyphicon glyphicon-download-alt"></i> Download <%= pkg.version %></a> |
| </div> |
| </script> |
| <script type="text/ng-template" id="buildModal.html"> |
| <div class="modal-header"> |
| <h4> |
| Create a Custom Build |
| <br> |
| <small>Select the modules you wish to download</small> |
| </h4> |
| </div> |
| <div class="modal-body"> |
| <div ng-show="isOldBrowser()"> |
| Your current browser doesn't support creating custom builds. |
| Please take a second to <a href="http://browsehappy.com/">upgrade to a |
| more modern browser</a> (other than Safari). |
| </div> |
| <div ng-show="buildErrorText"> |
| <h4 style="text-align: center;">{{buildErrorText}}</h4> |
| </div> |
| <div ng-hide="buildErrorText || isOldBrowser()"> |
| <% modules.forEach(function(module,i) { %> |
| <% if (i % 3 === 0) {%> |
| <div class="btn-group" style="width: 100%;"> |
| <% } %> |
| <button type="button" class="btn btn-default" |
| style="width: 33%; border-radius: 0;" |
| ng-class="{'btn-primary': module.<%= module.name %>}" |
| ng-model="module.<%= module.name %>" |
| uib-btn-checkbox |
| ng-change="selectedChanged('<%= module.name %>', module.<%= module.name %>)"> |
| <%= module.displayName %> |
| </button> |
| <% if ((i+1) % 3 === 0) { //end button group%> |
| </div> |
| <% } %> |
| <% }); %> |
| </div> |
| </div> |
| <div class="modal-footer"> |
| <a class="btn btn-default" ng-click="cancel()">Close</a> |
| <a class="btn btn-primary" ng-hide="isOldBrowser()" |
| ng-disabled="isOldBrowser() !== false && !selectedModules.length" |
| ng-click="selectedModules.length && build(selectedModules, '<%= pkg.version %>')"> |
| <i class="glyphicon glyphicon-download-alt"></i> Download {{selectedModules.length}} Modules |
| </a> |
| </div> |
| </script> |
| |
| <script type="text/javascript"> |
| |
| var _gaq = _gaq || []; |
| _gaq.push(['_setAccount', 'UA-37467169-1']); |
| _gaq.push(['_trackPageview']); |
| |
| (function() { |
| var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
| ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
| var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
| })(); |
| |
| </script> |
| <script src="assets/smoothscroll-angular-custom.js"></script> |
| <script src="assets/uglifyjs.js"></script> |
| </body> |
| </html> |