Matteo Scandolo | 46b5610 | 2015-12-16 14:23:08 -0800 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html lang="en" ng-app="ui.bootstrap.demo" id="top"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> |
| 7 | <link rel="icon" href="assets/favicon.ico" /> |
| 8 | <title>Angular directives for Bootstrap</title> |
| 9 | <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 %>, <% }); %>"> |
| 10 | <meta name="google-site-verification" content="7lc5HyceLDqpV_6oNHteYFfxDJH7-S3DwnJKtNUKcRg" /> |
| 11 | <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script> |
| 12 | <script src="//cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.0.0/FileSaver.min.js"></script> |
| 13 | <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script> |
| 14 | <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular.min.js"></script> |
| 15 | <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-animate.min.js"></script> |
| 16 | <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-touch.min.js"></script> |
| 17 | <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-sanitize.js"></script> |
| 18 | <script src="ui-bootstrap-tpls-<%= pkg.version%>.min.js"></script> |
| 19 | <script src="assets/plunker.js"></script> |
| 20 | <script src="assets/app.js"></script> |
| 21 | |
| 22 | <link href="//netdna.bootstrapcdn.com/bootstrap/<%= bsversion %>/css/bootstrap.min.css" rel="stylesheet"/> |
| 23 | <link rel="stylesheet" href="assets/rainbow.css"/> |
| 24 | <link rel="stylesheet" href="assets/demo.css"/> |
| 25 | <link rel="author" href="https://github.com/angular-ui/bootstrap/graphs/contributors"> |
| 26 | </head> |
| 27 | <body class="ng-cloak" ng-controller="MainCtrl"> |
| 28 | <header class="navbar navbar-default navbar-fixed-top navbar-inner"> |
| 29 | <div class="container"> |
| 30 | <div class="navbar-header"> |
| 31 | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" ng-click="isCollapsed = !isCollapsed"> |
| 32 | <span class="sr-only">Toggle navigation</span> |
| 33 | <span class="icon-bar"></span> |
| 34 | <span class="icon-bar"></span> |
| 35 | <span class="icon-bar"></span> |
| 36 | </button> |
| 37 | <a class="navbar-brand visible-xs" href="#">UI Bootstrap</a> |
| 38 | </div> |
| 39 | <nav class="hidden-xs"> |
| 40 | <ul class="nav navbar-nav"> |
| 41 | <a href="#top" role="button" class="navbar-brand"> |
| 42 | UI Bootstrap |
| 43 | </a> |
| 44 | <li class="dropdown" uib-dropdown> |
| 45 | <a role="button" class="dropdown-toggle" uib-dropdown-toggle> |
| 46 | Directives <b class="caret"></b> |
| 47 | </a> |
| 48 | <ul class="dropdown-menu"> |
| 49 | <% demoModules.forEach(function(module) { %><li><a href="#<%= module.name %>"><%= module.displayName %></a></li><% }); %> |
| 50 | </ul> |
| 51 | </li> |
| 52 | <li><a href="#getting_started">Getting started</a></li> |
| 53 | <li class="dropdown" uib-dropdown> |
| 54 | <a role="button" class="dropdown-toggle" uib-dropdown-toggle> |
| 55 | Previous docs <b class="caret"></b> |
| 56 | </a> |
| 57 | <ul class="dropdown-menu"> |
| 58 | <li ng-repeat="version in oldDocs"> |
| 59 | <a ng-href="{{version.url}}">{{version.version}}</a> |
| 60 | </li> |
| 61 | </ul> |
| 62 | </li> |
| 63 | </ul> |
| 64 | </nav> |
| 65 | <nav class="visible-xs" uib-collapse="!isCollapsed"> |
| 66 | <ul class="nav navbar-nav"> |
| 67 | <li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li> |
| 68 | <li><a href="#directives_small" ng-click="isCollapsed = !isCollapsed">Directives</a></li> |
| 69 | </ul> |
| 70 | </nav> |
| 71 | </div> |
| 72 | </header> |
| 73 | <div class="header-placeholder"></div> |
| 74 | <div role="main"> |
| 75 | <header class="bs-header text-center" id="overview"> |
| 76 | <div class="container"> |
| 77 | <h1> |
| 78 | UI Bootstrap |
| 79 | </h1> |
| 80 | |
| 81 | <p>Bootstrap components written in pure <a href="http://angularjs.org">AngularJS</a> by the <a |
| 82 | href="http://angular-ui.github.io">AngularUI Team</a></p> |
| 83 | |
| 84 | <p> |
| 85 | <a class="btn btn-outline-inverse btn-lg" href="https://github.com/angular-ui/bootstrap"><i class="icon-github"></i>Code on Github</a> |
| 86 | <button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showDownloadModal()"> |
| 87 | <i class="glyphicon glyphicon-download-alt"></i> Download <small>(<%= pkg.version%>)</small> |
| 88 | </button> |
| 89 | <button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showBuildModal()"><i class="glyphicon glyphicon-wrench"></i> Create a Build</button> |
| 90 | </p> |
| 91 | </div> |
| 92 | <div class="bs-social container"> |
| 93 | <ul class="bs-social-buttons"> |
| 94 | <li> |
| 95 | <iframe src="//ghbtns.com/github-btn.html?user=angular-ui&repo=bootstrap&type=watch&count=true" |
| 96 | allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe> |
| 97 | </li> |
| 98 | <li> |
| 99 | <iframe src="//ghbtns.com/github-btn.html?user=angular-ui&repo=bootstrap&type=fork&count=true" |
| 100 | allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe> |
| 101 | </li> |
| 102 | <li> |
| 103 | <a href="https://twitter.com/share" class="twitter-share-button" |
| 104 | data-hashtags="angularjs">Tweet</a> |
| 105 | <script>!function (d, s, id) { |
| 106 | var js, fjs = d.getElementsByTagName(s)[0]; |
| 107 | if (!d.getElementById(id)) { |
| 108 | js = d.createElement(s); |
| 109 | js.id = id; |
| 110 | js.src = "//platform.twitter.com/widgets.js"; |
| 111 | fjs.parentNode.insertBefore(js, fjs); |
| 112 | } |
| 113 | }(document, "script", "twitter-wjs");</script> |
| 114 | </li> |
| 115 | <li> |
| 116 | <!-- Place this tag where you want the +1 button to render. --> |
| 117 | <div class="g-plusone" data-size="medium"></div> |
| 118 | |
| 119 | <!-- Place this tag after the last +1 button tag. --> |
| 120 | <script type="text/javascript"> |
| 121 | (function () { |
| 122 | var po = document.createElement('script'); |
| 123 | po.type = 'text/javascript'; |
| 124 | po.async = true; |
| 125 | po.src = 'https://apis.google.com/js/plusone.js'; |
| 126 | var s = document.getElementsByTagName('script')[0]; |
| 127 | s.parentNode.insertBefore(po, s); |
| 128 | })(); |
| 129 | </script> |
| 130 | </li> |
| 131 | </ul> |
| 132 | </div> |
| 133 | </header> |
| 134 | <div class="container"> |
| 135 | <div class="row"> |
| 136 | <div class="col-md-12"> |
| 137 | <section class="bs-sidebar visible-xs" id="directives_small"> |
| 138 | <ul class="nav bs-sidenav"> |
| 139 | <li><a href="#"><strong>Directives</strong></a></li> |
| 140 | <% demoModules.forEach(function(module) { %> |
| 141 | <li><a href="#<%= module.name %>"><%= module.displayName %></a></li> |
| 142 | <% }); %> |
| 143 | </ul> |
| 144 | </section> |
| 145 | |
| 146 | <section id="getting_started"> |
| 147 | <div class="page-header"> |
| 148 | <h1>Getting started</h1> |
| 149 | </div> |
| 150 | <h3>Dependencies</h3> |
| 151 | <p> |
| 152 | This repository contains a set of <strong>native AngularJS directives</strong> based on |
| 153 | Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's |
| 154 | JavaScript is required. The <strong>only required dependencies</strong> are: |
| 155 | </p> |
| 156 | <ul> |
| 157 | <li><a href="http://angularjs.org" target="_blank">AngularJS</a> (requires AngularJS 1.3.x, tested with <%= ngversion %>). |
| 158 | 0.12.0 is the last version of this library that supports AngularJS 1.2.x.</li> |
| 159 | <li><a href="http://getbootstrap.com" target="_blank">Bootstrap CSS</a> (tested with version <%= bsversion %>). |
| 160 | This version of the library (<%= pkg.version%>) works only with Bootstrap CSS in version 3.x. |
| 161 | 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x. |
| 162 | </li> |
| 163 | </ul> |
| 164 | <h3>Files to download</h3> |
| 165 | <p> |
| 166 | Build files for all directives are distributed in several flavours: minified for production usage, un-minified |
| 167 | for development, with or without templates. All the options are described and can be |
| 168 | <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>. |
| 169 | </p> |
| 170 | <p>Alternativelly, if you are only interested in a subset of directives, you can |
| 171 | <a ng-click="showBuildModal()">create your own build</a>. |
| 172 | </p> |
| 173 | <p>Whichever method you choose the good news that the overall size of a download is very small: |
| 174 | <76kB for all directives (~20kB with gzip compression!)</p> |
| 175 | <h3>Installation</h3> |
| 176 | <p>As soon as you've got all the files downloaded and included in your page you just need to declare |
| 177 | a dependency on the <code>ui.bootstrap</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br> |
| 178 | <pre><code>angular.module('myModule', ['ui.bootstrap']);</code></pre> |
| 179 | </p> |
| 180 | <p>You can fork one of the plunkers from this page to see a working example of what is described here.</p> |
| 181 | <h3>CSS</h3> |
| 182 | <p>Original Bootstrap's CSS depends on empty <code>href</code> attributes to style cursors for several components (pagination, tabs etc.). |
| 183 | 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> |
| 184 | </p> |
| 185 | <h3>FAQ</h3> |
| 186 | <p>Please check <a href="https://github.com/angular-ui/bootstrap/wiki/FAQ" target="_blank">our FAQ section</a> for common problems / solutions.</p> |
| 187 | <h3>Reading the documentation</h3> |
| 188 | <p> |
| 189 | Each of the components provided in <code>ui-bootstrap</code> have documentation and interactive Plunker examples. |
| 190 | </p> |
| 191 | <p> |
| 192 | For the directives, we list the different attributes with their default values, and whether they are readonly. In addition to this, some settings |
| 193 | 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 |
| 194 | <a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch" title="Angular $watch" target="_blank">$watch</a> listener applied to it. |
| 195 | </p> |
| 196 | <p> |
| 197 | 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. |
| 198 | </p> |
| 199 | <p> |
| 200 | Also, some components have default values that you can override globally within a <code>.config</code> function for example. |
| 201 | </p> |
| 202 | </section> |
| 203 | <% demoModules.forEach(function(module) { %> |
| 204 | <section id="<%= module.name %>"> |
| 205 | <div class="page-header"> |
| 206 | <h1><%= module.displayName %><small> |
| 207 | (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/<%= module.name %>">ui.bootstrap.<%= module.name %></a>) |
| 208 | </small></h1> |
| 209 | </div> |
| 210 | <div class="row"> |
| 211 | <div class="col-md-6 show-grid"> |
| 212 | <%= module.docs.html %> |
| 213 | </div> |
| 214 | <div class="col-md-6"> |
| 215 | <%= module.docs.md %> |
| 216 | </div> |
| 217 | </div> |
| 218 | <hr> |
| 219 | <div class="row code"> |
| 220 | <div class="col-md-12" ng-controller="PlunkerCtrl"> |
| 221 | <div class="pull-right"> |
| 222 | <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> |
| 223 | </div> |
| 224 | <uib-tabset> |
| 225 | <uib-tab heading="Markup"> |
| 226 | <div plunker-content="markup"> |
| 227 | <pre ng-non-bindable><code data-language="html"><%- module.docs.html %></code></pre> |
| 228 | </div> |
| 229 | </uib-tab> |
| 230 | <uib-tab heading="JavaScript"> |
| 231 | <div plunker-content="javascript"> |
| 232 | <pre ng-non-bindable><code data-language="javascript"><%- module.docs.js %></code></pre> |
| 233 | </div> |
| 234 | </uib-tab> |
| 235 | </uib-tabset> |
| 236 | </div> |
| 237 | </div> |
| 238 | </section> |
| 239 | <script><%= module.docs.js %></script> |
| 240 | <% }); %> |
| 241 | </div> |
| 242 | </div> |
| 243 | </div><!-- /.container --> |
| 244 | </div><!-- /.main --> |
| 245 | <footer class="footer"> |
| 246 | <div class="container"> |
| 247 | <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> |
| 248 | <p>Code licensed under <a href="https://github.com/angular-ui/bootstrap/blob/master/LICENSE"><%= pkg.license %> License</a>.</p> |
| 249 | <p><a href="https://github.com/angular-ui/bootstrap/issues?state=open">Issues</a></p> |
| 250 | </div> |
| 251 | </footer> |
| 252 | <script src="assets/rainbow.js"></script> |
| 253 | <script src="assets/rainbow-generic.js"></script> |
| 254 | <script src="assets/rainbow-javascript.js"></script> |
| 255 | <script src="assets/rainbow-html.js"></script> |
| 256 | <script type="text/ng-template" id="downloadModal.html"> |
| 257 | <div class="modal-header"><h4 class="modal-title">Download Angular UI Bootstrap</h4></div> |
| 258 | <div class="modal-body"> |
| 259 | <form class="form-horizontal"> |
| 260 | <div class="form-group"> |
| 261 | <label class="col-sm-3 control-label"><strong>Build</strong></label> |
| 262 | <div class="col-sm-9"> |
| 263 | <span class="btn-group"> |
| 264 | <button type="button" class="btn btn-default" ng-model="options.minified" uib-btn-radio="true">Minified</button> |
| 265 | <button type="button" class="btn btn-default" ng-model="options.minified" uib-btn-radio="false">Uncompressed</button> |
| 266 | </span> |
| 267 | <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> |
| 268 | </div> |
| 269 | </div> |
| 270 | <div class="form-group"> |
| 271 | <label class="col-sm-3 control-label"><strong>Include Templates</strong></label> |
| 272 | <div class="col-sm-9"> |
| 273 | <span class="btn-group"> |
| 274 | <button type="button" class="btn btn-default" ng-model="options.tpls" uib-btn-radio="true">Yes</button> |
| 275 | <button type="button" class="btn btn-default" ng-model="options.tpls" uib-btn-radio="false">No</button> |
| 276 | </span> |
| 277 | <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> |
| 278 | </div> |
| 279 | </div> |
| 280 | <div class="form-group"> |
| 281 | <label class="col-sm-3 control-label"><strong>Bower</strong></label> |
| 282 | <div class="col-sm-9"> |
| 283 | <small>If you are using Bower just run:</small> |
| 284 | <pre style="margin-bottom:0;">bower install angular-bootstrap</pre> |
| 285 | <small class="help-block"><a href="http://bower.io/" target="_blank">Bower</a> is a package manager for the web.</small> |
| 286 | </div> |
| 287 | </div> |
| 288 | </form> |
| 289 | </div> |
| 290 | <div class="modal-footer"> |
| 291 | <a class="btn btn-default" ng-click="cancel()">Close</a> |
| 292 | <a class="btn btn-primary" ng-href="{{download('<%= pkg.version%>')}}" download><i class="glyphicon glyphicon-download-alt"></i> Download <%= pkg.version %></a> |
| 293 | </div> |
| 294 | </script> |
| 295 | <script type="text/ng-template" id="buildModal.html"> |
| 296 | <div class="modal-header"> |
| 297 | <h4> |
| 298 | Create a Custom Build |
| 299 | <br> |
| 300 | <small>Select the modules you wish to download</small> |
| 301 | </h4> |
| 302 | </div> |
| 303 | <div class="modal-body"> |
| 304 | <div ng-show="isOldBrowser()"> |
| 305 | Your current browser doesn't support creating custom builds. |
| 306 | Please take a second to <a href="http://browsehappy.com/">upgrade to a |
| 307 | more modern browser</a> (other than Safari). |
| 308 | </div> |
| 309 | <div ng-show="buildErrorText"> |
| 310 | <h4 style="text-align: center;">{{buildErrorText}}</h4> |
| 311 | </div> |
| 312 | <div ng-hide="buildErrorText || isOldBrowser()"> |
| 313 | <% modules.forEach(function(module,i) { %> |
| 314 | <% if (i % 3 === 0) {%> |
| 315 | <div class="btn-group" style="width: 100%;"> |
| 316 | <% } %> |
| 317 | <button type="button" class="btn btn-default" |
| 318 | style="width: 33%; border-radius: 0;" |
| 319 | ng-class="{'btn-primary': module.<%= module.name %>}" |
| 320 | ng-model="module.<%= module.name %>" |
| 321 | uib-btn-checkbox |
| 322 | ng-change="selectedChanged('<%= module.name %>', module.<%= module.name %>)"> |
| 323 | <%= module.displayName %> |
| 324 | </button> |
| 325 | <% if ((i+1) % 3 === 0) { //end button group%> |
| 326 | </div> |
| 327 | <% } %> |
| 328 | <% }); %> |
| 329 | </div> |
| 330 | </div> |
| 331 | <div class="modal-footer"> |
| 332 | <a class="btn btn-default" ng-click="cancel()">Close</a> |
| 333 | <a class="btn btn-primary" ng-hide="isOldBrowser()" |
| 334 | ng-disabled="isOldBrowser() !== false && !selectedModules.length" |
| 335 | ng-click="selectedModules.length && build(selectedModules, '<%= pkg.version %>')"> |
| 336 | <i class="glyphicon glyphicon-download-alt"></i> Download {{selectedModules.length}} Modules |
| 337 | </a> |
| 338 | </div> |
| 339 | </script> |
| 340 | |
| 341 | <script type="text/javascript"> |
| 342 | |
| 343 | var _gaq = _gaq || []; |
| 344 | _gaq.push(['_setAccount', 'UA-37467169-1']); |
| 345 | _gaq.push(['_trackPageview']); |
| 346 | |
| 347 | (function() { |
| 348 | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
| 349 | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
| 350 | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
| 351 | })(); |
| 352 | |
| 353 | </script> |
| 354 | <script src="assets/smoothscroll-angular-custom.js"></script> |
| 355 | <script src="assets/uglifyjs.js"></script> |
| 356 | </body> |
| 357 | </html> |