Dale Cameron
6540 lines
327 KiB
HTML
6540 lines
327 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" ng-app="ui.bootstrap.demo" id="top">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="icon" href="assets/favicon.ico" />
|
|
<title>Angular directives for Bootstrap 4</title>
|
|
<meta name="description" content="AngularJS (Angular) native directives for Bootstrap 4. Small footprint (5kB gzipped!), no 3rd party JS dependencies (jQuery, bootstrap JS) required! Widgets: Accordion, Alert, Buttons, Carousel, Collapse, Dateparser, Datepicker, Datepicker Popup, Dropdown, Modal, Pager, Pagination, Popover, Position, Progressbar, Rating, Tabs, Timepicker, Tooltip, Typeahead, ">
|
|
<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/1.6.1/angular.min.js"></script>
|
|
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
|
|
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-touch.min.js"></script>
|
|
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
|
|
<script src="ui-bootstrap-tpls-3.0.6.min.js"></script>
|
|
<script src="assets/plunker.js"></script>
|
|
<script src="assets/app.js"></script>
|
|
|
|
<link href="//netdna.bootstrapcdn.com/bootstrap/4.1.1/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-light sticky-top navbar-expand-md bg-light">
|
|
<div class="container">
|
|
<a class="navbar-brand visible-xs" href="#">UI Bootstrap 4</a>
|
|
<button type="button" class="navbar-toggler" ng-click="isCollapsed = !isCollapsed">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" uib-collapse="isCollapsed">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item dropdown" uib-dropdown>
|
|
<a class="nav-link dropdown-toggle" uib-dropdown-toggle id="directivesMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Directives
|
|
</a>
|
|
<div class="dropdown-menu" uib-dropdown-menu aria-labelledby="directivesMenuLink">
|
|
<a class="dropdown-item" href="#accordion">Accordion</a><a class="dropdown-item" href="#alert">Alert</a><a class="dropdown-item" href="#buttons">Buttons</a><a class="dropdown-item" href="#carousel">Carousel</a><a class="dropdown-item" href="#collapse">Collapse</a><a class="dropdown-item" href="#dateparser">Dateparser</a><a class="dropdown-item" href="#datepicker">Datepicker</a><a class="dropdown-item" href="#datepickerPopup">Datepicker Popup</a><a class="dropdown-item" href="#dropdown">Dropdown</a><a class="dropdown-item" href="#modal">Modal</a><a class="dropdown-item" href="#pager">Pager</a><a class="dropdown-item" href="#pagination">Pagination</a><a class="dropdown-item" href="#popover">Popover</a><a class="dropdown-item" href="#position">Position</a><a class="dropdown-item" href="#progressbar">Progressbar</a><a class="dropdown-item" href="#rating">Rating</a><a class="dropdown-item" href="#tabs">Tabs</a><a class="dropdown-item" href="#timepicker">Timepicker</a><a class="dropdown-item" href="#tooltip">Tooltip</a><a class="dropdown-item" href="#typeahead">Typeahead</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#getting_started">Getting started</a>
|
|
</li>
|
|
<li class="nav-item dropdown" uib-dropdown>
|
|
<a class="nav-link dropdown-toggle" uib-dropdown-toggle id="previousDocsMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Previous docs
|
|
</a>
|
|
<div class="dropdown-menu" uib-dropdown-menu aria-labelledby="previousDocsMenuLink">
|
|
<a class="dropdown-item" ng-href="{{version.url}}" ng-repeat="version in oldDocs">{{version.version}}</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div role="main">
|
|
<header class="bs-header text-center" id="overview">
|
|
<h1 class="text-center">UI Bootstrap 4</h1>
|
|
|
|
<p class="text-center">
|
|
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 class="text-center">
|
|
<small>Ported to Bootstrap 4 by <a href="https://github.com/Morgul">Morgul</a></small>
|
|
</p>
|
|
<div class="container">
|
|
<p>
|
|
<a class="btn btn-outline-inverse btn-lg" href="https://github.com/Morgul/ui-bootstrap4">
|
|
<i class="icon-github"></i>
|
|
Code on Github
|
|
</a>
|
|
<button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showDownloadModal()">
|
|
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M1344 1344q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm256 0q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm128-224v320q0 40-28 68t-68 28h-1472q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h465l135 136q58 56 136 56t136-56l136-136h464q40 0 68 28t28 68zm-325-569q17 41-14 70l-448 448q-18 19-45 19t-45-19l-448-448q-31-29-14-70 17-39 59-39h256v-448q0-26 19-45t45-19h256q26 0 45 19t19 45v448h256q42 0 59 39z"/>
|
|
</svg>
|
|
</i>
|
|
Download <small>(3.0.6)</small>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showBuildModal()">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M448 1472q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm644-420l-682 682q-37 37-90 37-52 0-91-37l-106-108q-38-36-38-90 0-53 38-91l681-681q39 98 114.5 173.5t173.5 114.5zm634-435q0 39-23 106-47 134-164.5 217.5t-258.5 83.5q-185 0-316.5-131.5t-131.5-316.5 131.5-316.5 316.5-131.5q58 0 121.5 16.5t107.5 46.5q16 11 16 28t-16 28l-293 169v224l193 107q5-3 79-48.5t135.5-81 70.5-35.5q15 0 23.5 10t8.5 25z"/>
|
|
</svg>
|
|
</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=morgul&repo=ui-bootstrap4&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=morgul&repo=ui-bootstrap4&type=fork&count=true"
|
|
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<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.4.x or higher, tested with 1.6.1).
|
|
0.14.3 is the last version of this library that supports AngularJS 1.3.x and
|
|
0.12.0 is the last version that supports AngularJS 1.2.x.</li>
|
|
<li><a href="http://angularjs.org" target="_blank">Angular-animate</a> (the version should match with your angular's, tested with 1.6.1) if you plan in using animations, you need to load angular-animate as well.</li>
|
|
<li><a href="http://angularjs.org" target="_blank">Angular-touch</a> (the version should match with your angular's, tested with 1.6.1) if you plan in using swipe actions, you need to load angular-touch as well.</li>
|
|
<li><a href="http://getbootstrap.com" target="_blank">Bootstrap CSS</a> (tested with version 4.0.0).
|
|
This version of the library (3.0.6) works only with Bootstrap CSS in version 4.x.
|
|
2.5.0 is the last version of this library that supports Bootstrap CSS in version 3.x.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 fairly small:
|
|
122K minified for all directives with templates and 98K without (~31kB with gzip
|
|
compression, with templates, and 28K gzipped without)</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>If you are using UI Bootstrap in the CSP mode, e.g. in an extension, make sure you link to the <code>ui-bootstrap-csp.css</code> in your HTML manually.</p>
|
|
<p>You can fork one of the plunkers from this page to see a working example of what is described here.</p>
|
|
<h3>Migration to prefixes</h3>
|
|
<p>Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier,
|
|
check our <a href="https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes">migration guide</a>.</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, .card-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. In addition to this, some settings have a badge on it:
|
|
|
|
<ul>
|
|
<li>
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z"/></svg>
|
|
</i>
|
|
- This setting has an angular $watch listener applied to it.
|
|
</li>
|
|
<li><small class="badge">B</small> - This setting is a boolean. It doesn't need a parameter.</li>
|
|
<li><small class="badge">C</small> - This setting can be configured globally in a constant service*.</li>
|
|
<li><small class="badge">$</small> - This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.</li>
|
|
<li><small class="badge">readonly</small> - This setting is readonly.</li>
|
|
</ul>
|
|
</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>
|
|
* Some directives have a config service that follows the next pattern: <code>uibDirectiveConfig</code>. The service's settings use camel case. The services can be configured in a <code>.config</code> function for example.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="accordion">
|
|
<div class="page-header">
|
|
<h1>Accordion<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/accordion">ui.bootstrap.accordion</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="AccordionDemoCtrl">
|
|
<script type="text/ng-template" id="group-template.html">
|
|
<div class="card-header">
|
|
<h4 class="card-title" style="color:#fa39c3">
|
|
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
|
|
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
|
|
{{heading}}
|
|
</span>
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div class="card-collapse collapse" uib-collapse="!isOpen">
|
|
<div class="card-body" style="text-align: right" ng-transclude></div>
|
|
</div>
|
|
</script>
|
|
|
|
<p>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="status.open = !status.open">Toggle last card</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first card</button>
|
|
</p>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="oneAtATime">
|
|
Open only one at a time
|
|
</label>
|
|
</div>
|
|
<uib-accordion close-others="oneAtATime">
|
|
<div uib-accordion-group class="mt-1" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
|
|
This content is straight in the template.
|
|
</div>
|
|
<div uib-accordion-group class="mt-1" heading="{{group.title}}" ng-repeat="group in groups">
|
|
{{group.content}}
|
|
</div>
|
|
<div uib-accordion-group class="mt-1" heading="Dynamic Body Content">
|
|
<p>The body of the uib-accordion group grows to fit the contents</p>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="addItem()">Add Item</button>
|
|
<div ng-repeat="item in items">{{item}}</div>
|
|
</div>
|
|
<div uib-accordion-group class="mt-1" heading="Custom template" template-url="group-template.html">
|
|
Hello
|
|
</div>
|
|
<div uib-accordion-group class="mt-1" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
|
|
<uib-accordion-heading>
|
|
Custom template with custom header template <i class="float-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
|
|
</uib-accordion-heading>
|
|
World
|
|
</div>
|
|
<div uib-accordion-group class="bg-danger" heading="Delete account">
|
|
<p>Please, to delete your account, click the button below</p>
|
|
<button class="btn btn-danger">Delete</button>
|
|
</div>
|
|
<div uib-accordion-group class="mt-1" is-open="status.open">
|
|
<uib-accordion-heading>
|
|
I can have markup, too! <i class="float-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
|
|
</uib-accordion-heading>
|
|
This is just some content to illustrate fancy headings.
|
|
</div>
|
|
</uib-accordion>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>The <strong>accordion directive</strong> builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.</p>
|
|
<p>The body of each accordion group is transcluded into the body of the collapsible element.</p>
|
|
<h3 id="uib-accordion-settings">uib-accordion settings</h3>
|
|
<ul>
|
|
<li><p><code>close-others</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Control whether expanding an item will cause the other items to close.</p>
|
|
</li>
|
|
<li><p><code>template-url</code>
|
|
<em>(Default: <code>template/accordion/accordion.html</code>)</em> -
|
|
Add the ability to override the template used on the component.</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="uib-accordion-group-settings">uib-accordion-group settings</h3>
|
|
<ul>
|
|
<li><p><code>heading</code>
|
|
<em>(Default: <code>none</code>)</em> -
|
|
The clickable text on the group's header. You need one to be able to click on the header for toggling.</p>
|
|
</li>
|
|
<li><p><code>is-disabled</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether the accordion group is disabled or not.</p>
|
|
</li>
|
|
<li><p><code>is-open</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether accordion group is open or closed.</p>
|
|
</li>
|
|
<li><p><code>template-url</code>
|
|
<em>(Default: <code>uib/template/accordion/accordion-group.html</code>)</em> -
|
|
Add the ability to override the template used on the component.</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="accordion-heading">Accordion heading</h3>
|
|
<p>Instead of the <code>heading</code> attribute on the <code>uib-accordion-group</code>, you can use an <code>uib-accordion-heading</code> element inside a group that will be used as the group's header.</p>
|
|
<p>If you're using a custom template for the <code>uib-accordion-group</code>, you'll need to have an element for the heading to be transcluded into using <code>uib-accordion-header</code> (e.g. <code><div uib-accordion-header></div></code>).</p>
|
|
<h3 id="known-issues">Known issues</h3>
|
|
<p>To use clickable elements within the accordion, you have to override the accordion-group template to use div elements instead of anchor elements, and add <code>cursor: pointer</code> in your CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.</p>
|
|
<p>If custom classes on the accordion-group element are desired, one needs to either modify the template to remove the <code>ng-class</code> usage in the accordion-group template and use ng-class on the accordion-group element (not recommended), or use an interpolated expression in the class attribute, i.e. <code><uib-accordion-group class="{{customClass()}}"></uib-accordion-group></code>.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'accordion')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="AccordionDemoCtrl">
|
|
<script type="text/ng-template" id="group-template.html">
|
|
<div class="card-header">
|
|
<h4 class="card-title" style="color:#fa39c3">
|
|
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
|
|
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
|
|
{{heading}}
|
|
</span>
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div class="card-collapse collapse" uib-collapse="!isOpen">
|
|
<div class="card-body" style="text-align: right" ng-transclude></div>
|
|
</div>
|
|
</script>
|
|
|
|
<p>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="status.open = !status.open">Toggle last card</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first card</button>
|
|
</p>
|
|
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="oneAtATime">
|
|
Open only one at a time
|
|
</label>
|
|
</div>
|
|
<uib-accordion close-others="oneAtATime">
|
|
<div uib-accordion-group class="mt-1" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
|
|
This content is straight in the template.
|
|
</div>
|
|
<div uib-accordion-group class="mt-1" heading="{{group.title}}" ng-repeat="group in groups">
|
|
{{group.content}}
|
|
</div>
|
|
<div uib-accordion-group class="mt-1" heading="Dynamic Body Content">
|
|
<p>The body of the uib-accordion group grows to fit the contents</p>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="addItem()">Add Item</button>
|
|
<div ng-repeat="item in items">{{item}}</div>
|
|
</div>
|
|
<div uib-accordion-group class="mt-1" heading="Custom template" template-url="group-template.html">
|
|
Hello
|
|
</div>
|
|
<div uib-accordion-group class="mt-1" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
|
|
<uib-accordion-heading>
|
|
Custom template with custom header template <i class="float-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
|
|
</uib-accordion-heading>
|
|
World
|
|
</div>
|
|
<div uib-accordion-group class="bg-danger" heading="Delete account">
|
|
<p>Please, to delete your account, click the button below</p>
|
|
<button class="btn btn-danger">Delete</button>
|
|
</div>
|
|
<div uib-accordion-group class="mt-1" is-open="status.open">
|
|
<uib-accordion-heading>
|
|
I can have markup, too! <i class="float-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
|
|
</uib-accordion-heading>
|
|
This is just some content to illustrate fancy headings.
|
|
</div>
|
|
</uib-accordion>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
|
|
$scope.oneAtATime = true;
|
|
|
|
$scope.groups = [
|
|
{
|
|
title: 'Dynamic Group Header - 1',
|
|
content: 'Dynamic Group Body - 1'
|
|
},
|
|
{
|
|
title: 'Dynamic Group Header - 2',
|
|
content: 'Dynamic Group Body - 2'
|
|
}
|
|
];
|
|
|
|
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
|
|
|
|
$scope.addItem = function() {
|
|
var newItemNo = $scope.items.length + 1;
|
|
$scope.items.push('Item ' + newItemNo);
|
|
};
|
|
|
|
$scope.status = {
|
|
isCustomHeaderOpen: false,
|
|
isFirstOpen: true,
|
|
isFirstDisabled: false
|
|
};
|
|
});</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
|
|
$scope.oneAtATime = true;
|
|
|
|
$scope.groups = [
|
|
{
|
|
title: 'Dynamic Group Header - 1',
|
|
content: 'Dynamic Group Body - 1'
|
|
},
|
|
{
|
|
title: 'Dynamic Group Header - 2',
|
|
content: 'Dynamic Group Body - 2'
|
|
}
|
|
];
|
|
|
|
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
|
|
|
|
$scope.addItem = function() {
|
|
var newItemNo = $scope.items.length + 1;
|
|
$scope.items.push('Item ' + newItemNo);
|
|
};
|
|
|
|
$scope.status = {
|
|
isCustomHeaderOpen: false,
|
|
isFirstOpen: true,
|
|
isFirstDisabled: false
|
|
};
|
|
});</script>
|
|
|
|
<section id="alert">
|
|
<div class="page-header">
|
|
<h1>Alert<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/alert">ui.bootstrap.alert</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="AlertDemoCtrl">
|
|
<script type="text/ng-template" id="alert.html">
|
|
<div ng-transclude></div>
|
|
</script>
|
|
|
|
<div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')" close="closeAlert($index)">{{alert.msg}}</div>
|
|
<div uib-alert template-url="alert.html" style="background-color:#fa39c3;color:white">A happy alert!</div>
|
|
<button type="button" class='btn btn-secondary' ng-click="addAlert()">Add Alert</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>This directive can be used both to generate alerts from static and dynamic model data (using the <code>ng-repeat</code> directive).</p>
|
|
<h3 id="uib-alert-settings">uib-alert settings</h3>
|
|
<ul>
|
|
<li><p><code>close()</code>
|
|
<small class="badge">$</small> -
|
|
A callback function that gets fired when an <code>alert</code> is closed. If the attribute exists, a close button is displayed as well.</p>
|
|
</li>
|
|
<li><p><code>dismiss-on-timeout</code>
|
|
<em>(Default: <code>none</code>)</em> -
|
|
Takes the number of milliseconds that specify the timeout duration, after which the alert will be closed. This attribute requires the presence of the <code>close</code> attribute.</p>
|
|
</li>
|
|
<li><p><code>template-url</code>
|
|
<em>(Default: <code>uib/template/alert/alert.html</code>)</em> -
|
|
Add the ability to override the template used in the component.</p>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'alert')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="AlertDemoCtrl">
|
|
<script type="text/ng-template" id="alert.html">
|
|
<div ng-transclude></div>
|
|
</script>
|
|
|
|
<div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')" close="closeAlert($index)">{{alert.msg}}</div>
|
|
<div uib-alert template-url="alert.html" style="background-color:#fa39c3;color:white">A happy alert!</div>
|
|
<button type="button" class='btn btn-secondary' ng-click="addAlert()">Add Alert</button>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
|
|
$scope.alerts = [
|
|
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
|
|
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
|
|
];
|
|
|
|
$scope.addAlert = function() {
|
|
$scope.alerts.push({msg: 'Another alert!'});
|
|
};
|
|
|
|
$scope.closeAlert = function(index) {
|
|
$scope.alerts.splice(index, 1);
|
|
};
|
|
});</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
|
|
$scope.alerts = [
|
|
{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
|
|
{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
|
|
];
|
|
|
|
$scope.addAlert = function() {
|
|
$scope.alerts.push({msg: 'Another alert!'});
|
|
};
|
|
|
|
$scope.closeAlert = function(index) {
|
|
$scope.alerts.splice(index, 1);
|
|
};
|
|
});</script>
|
|
|
|
<section id="buttons">
|
|
<div class="page-header">
|
|
<h1>Buttons<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/buttons">ui.bootstrap.buttons</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="ButtonsCtrl">
|
|
<h4>Single toggle</h4>
|
|
<pre>{{singleModel}}</pre>
|
|
<button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
|
|
Single Toggle
|
|
</button>
|
|
<h4>Checkbox</h4>
|
|
<pre>Model: {{checkModel}}</pre>
|
|
<pre>Results: {{checkResults}}</pre>
|
|
<div class="btn-group">
|
|
<label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
|
|
<label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
|
|
<label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
|
|
</div>
|
|
<h4>Radio & Uncheckable Radio</h4>
|
|
<pre>{{radioModel || 'null'}}</pre>
|
|
<div class="btn-group">
|
|
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
|
|
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
|
|
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
|
|
</div>
|
|
<div class="btn-group">
|
|
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
|
|
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
|
|
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uib-uncheckable="uncheckable">Right</label>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-secondary" ng-click="uncheckable = !uncheckable">
|
|
Toggle uncheckable
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>With the buttons directive, we can make a group of buttons behave like a set of checkboxes (<code>uib-btn-checkbox</code>) or behave like a set of radio buttons (<code>uib-btn-radio</code>).</p>
|
|
<h3 id="uib-btn-checkbox-settings">uib-btn-checkbox settings</h3>
|
|
<ul>
|
|
<li><p><code>btn-checkbox-false</code>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Sets the value for the unchecked status.</p>
|
|
</li>
|
|
<li><p><code>btn-checkbox-true</code>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Sets the value for the checked status.</p>
|
|
</li>
|
|
<li><p><code>ng-model</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
Model where we set the checkbox status. By default <code>true</code> or <code>false</code>.</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="uib-btn-radio-settings">uib-btn-radio settings</h3>
|
|
<ul>
|
|
<li><p><code>ng-model</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
Model where we set the radio status. All radio buttons in a group should use the same <code>ng-model</code>.</p>
|
|
</li>
|
|
<li><p><code>uib-btn-radio</code> -
|
|
<small class="badge">$</small>
|
|
Value to assign to the <code>ng-model</code> if we check this radio button.</p>
|
|
</li>
|
|
<li><p><code>uib-uncheckable</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
An expression that evaluates to a truthy or falsy value that determines whether the <code>uncheckable</code> attribute is present.</p>
|
|
</li>
|
|
<li><p><code>uncheckable</code>
|
|
<small class="badge">B</small> -
|
|
Whether a radio button can be unchecked or not.</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="additional-settings-uibbuttonconfig">Additional settings <code>uibButtonConfig</code></h3>
|
|
<ul>
|
|
<li><p><code>activeClass</code>
|
|
<em>(Default: <code>active</code>)</em> -
|
|
Class to apply to the checked buttons.</p>
|
|
</li>
|
|
<li><p><code>toggleEvent</code>
|
|
<em>(Default: <code>click</code>)</em> -
|
|
Event used to toggle the buttons.</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="known-issues">Known issues</h3>
|
|
<p>To use tooltips or popovers on elements within a <code>btn-group</code>, set the tooltip/popover <code>appendToBody</code> option to <code>true</code>. This is due to Bootstrap CSS styling. See <a href="http://getbootstrap.com/components/#btn-groups">here</a> for more information.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'buttons')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="ButtonsCtrl">
|
|
<h4>Single toggle</h4>
|
|
<pre>{{singleModel}}</pre>
|
|
<button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
|
|
Single Toggle
|
|
</button>
|
|
<h4>Checkbox</h4>
|
|
<pre>Model: {{checkModel}}</pre>
|
|
<pre>Results: {{checkResults}}</pre>
|
|
<div class="btn-group">
|
|
<label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
|
|
<label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
|
|
<label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
|
|
</div>
|
|
<h4>Radio &amp; Uncheckable Radio</h4>
|
|
<pre>{{radioModel || 'null'}}</pre>
|
|
<div class="btn-group">
|
|
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
|
|
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
|
|
<label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
|
|
</div>
|
|
<div class="btn-group">
|
|
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
|
|
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
|
|
<label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uib-uncheckable="uncheckable">Right</label>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-secondary" ng-click="uncheckable = !uncheckable">
|
|
Toggle uncheckable
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope) {
|
|
$scope.singleModel = 1;
|
|
|
|
$scope.radioModel = 'Middle';
|
|
|
|
$scope.checkModel = {
|
|
left: false,
|
|
middle: true,
|
|
right: false
|
|
};
|
|
|
|
$scope.checkResults = [];
|
|
|
|
$scope.$watchCollection('checkModel', function () {
|
|
$scope.checkResults = [];
|
|
angular.forEach($scope.checkModel, function (value, key) {
|
|
if (value) {
|
|
$scope.checkResults.push(key);
|
|
}
|
|
});
|
|
});
|
|
});</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope) {
|
|
$scope.singleModel = 1;
|
|
|
|
$scope.radioModel = 'Middle';
|
|
|
|
$scope.checkModel = {
|
|
left: false,
|
|
middle: true,
|
|
right: false
|
|
};
|
|
|
|
$scope.checkResults = [];
|
|
|
|
$scope.$watchCollection('checkModel', function () {
|
|
$scope.checkResults = [];
|
|
angular.forEach($scope.checkModel, function (value, key) {
|
|
if (value) {
|
|
$scope.checkResults.push(key);
|
|
}
|
|
});
|
|
});
|
|
});</script>
|
|
|
|
<section id="carousel">
|
|
<div class="page-header">
|
|
<h1>Carousel<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/carousel">ui.bootstrap.carousel</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="CarouselDemoCtrl">
|
|
<div style="height: 305px">
|
|
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
|
|
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
|
|
<img ng-src="{{slide.image}}" style="margin:auto;">
|
|
<div class="carousel-caption">
|
|
<h4>Slide {{slide.id}}</h4>
|
|
<p>{{slide.text}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
|
|
<button type="button" class="btn btn-info" ng-click="randomize()">Randomize slides</button>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="noWrapSlides">
|
|
Disable Slide Looping
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
|
|
<br />Enter a negative number or 0 to stop the interval.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>Carousel creates a carousel similar to bootstrap's image carousel.</p>
|
|
<p>The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the <code>ngTouch</code> module as a dependency.</p>
|
|
<p>Use a <code><uib-carousel></code> element with <code><uib-slide></code> elements inside it.</p>
|
|
<h3 id="uib-carousel-settings">uib-carousel settings</h3>
|
|
<ul>
|
|
<li><p><code>active</code>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>Index of first slide</code>)</em> -
|
|
Index of current active slide.</p>
|
|
</li>
|
|
<li><p><code>interval</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>none</code>)</em> -
|
|
Sets an interval to cycle through the slides. You need a number bigger than 0 to make the interval work.</p>
|
|
</li>
|
|
<li><p><code>no-pause</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
The interval pauses on mouseover. Setting this to truthy, disables this pause.</p>
|
|
</li>
|
|
<li><p><code>no-transition</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether to disable the transition animation between slides. Setting this to truthy, disables this transition.</p>
|
|
</li>
|
|
<li><p><code>no-wrap</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Disables the looping of slides. Setting <code>no-wrap</code> to an expression which evaluates to a truthy value will prevent looping.</p>
|
|
</li>
|
|
<li><p><code>template-url</code>
|
|
<em>(Default: <code>uib/template/carousel/carousel.html</code>)</em> -
|
|
Add the ability to override the template used on the component.</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="uib-slide-settings">uib-slide settings</h3>
|
|
<ul>
|
|
<li><p><code>actual</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>none</code>)</em> -
|
|
Use this attribute to bind the slide model (or any object of interest) onto the slide scope, which makes it available for customization in the carousel template.</p>
|
|
</li>
|
|
<li><p><code>index</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>none</code>)</em> -
|
|
The index of the slide. Must be unique.</p>
|
|
</li>
|
|
<li><p><code>template-url</code>
|
|
<em>(Default: <code>uib/template/carousel/slide.html</code>)</em> -
|
|
Add the ability to override the template used on the component.</p>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'carousel')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="CarouselDemoCtrl">
|
|
<div style="height: 305px">
|
|
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
|
|
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
|
|
<img ng-src="{{slide.image}}" style="margin:auto;">
|
|
<div class="carousel-caption">
|
|
<h4>Slide {{slide.id}}</h4>
|
|
<p>{{slide.text}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
|
|
<button type="button" class="btn btn-info" ng-click="randomize()">Randomize slides</button>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="noWrapSlides">
|
|
Disable Slide Looping
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
|
|
<br />Enter a negative number or 0 to stop the interval.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
|
|
$scope.myInterval = 5000;
|
|
$scope.noWrapSlides = false;
|
|
$scope.active = 0;
|
|
var slides = $scope.slides = [];
|
|
var currIndex = 0;
|
|
|
|
$scope.addSlide = function() {
|
|
var newWidth = 600 + slides.length + 1;
|
|
slides.push({
|
|
image: '//unsplash.it/' + newWidth + '/300',
|
|
text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
|
|
id: currIndex++
|
|
});
|
|
};
|
|
|
|
$scope.randomize = function() {
|
|
var indexes = generateIndexesArray();
|
|
assignNewIndexesToSlides(indexes);
|
|
};
|
|
|
|
for (var i = 0; i < 4; i++) {
|
|
$scope.addSlide();
|
|
}
|
|
|
|
// Randomize logic below
|
|
|
|
function assignNewIndexesToSlides(indexes) {
|
|
for (var i = 0, l = slides.length; i < l; i++) {
|
|
slides[i].id = indexes.pop();
|
|
}
|
|
}
|
|
|
|
function generateIndexesArray() {
|
|
var indexes = [];
|
|
for (var i = 0; i < currIndex; ++i) {
|
|
indexes[i] = i;
|
|
}
|
|
return shuffle(indexes);
|
|
}
|
|
|
|
// http://stackoverflow.com/questions/962802#962890
|
|
function shuffle(array) {
|
|
var tmp, current, top = array.length;
|
|
|
|
if (top) {
|
|
while (--top) {
|
|
current = Math.floor(Math.random() * (top + 1));
|
|
tmp = array[current];
|
|
array[current] = array[top];
|
|
array[top] = tmp;
|
|
}
|
|
}
|
|
|
|
return array;
|
|
}
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
|
|
$scope.myInterval = 5000;
|
|
$scope.noWrapSlides = false;
|
|
$scope.active = 0;
|
|
var slides = $scope.slides = [];
|
|
var currIndex = 0;
|
|
|
|
$scope.addSlide = function() {
|
|
var newWidth = 600 + slides.length + 1;
|
|
slides.push({
|
|
image: '//unsplash.it/' + newWidth + '/300',
|
|
text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
|
|
id: currIndex++
|
|
});
|
|
};
|
|
|
|
$scope.randomize = function() {
|
|
var indexes = generateIndexesArray();
|
|
assignNewIndexesToSlides(indexes);
|
|
};
|
|
|
|
for (var i = 0; i < 4; i++) {
|
|
$scope.addSlide();
|
|
}
|
|
|
|
// Randomize logic below
|
|
|
|
function assignNewIndexesToSlides(indexes) {
|
|
for (var i = 0, l = slides.length; i < l; i++) {
|
|
slides[i].id = indexes.pop();
|
|
}
|
|
}
|
|
|
|
function generateIndexesArray() {
|
|
var indexes = [];
|
|
for (var i = 0; i < currIndex; ++i) {
|
|
indexes[i] = i;
|
|
}
|
|
return shuffle(indexes);
|
|
}
|
|
|
|
// http://stackoverflow.com/questions/962802#962890
|
|
function shuffle(array) {
|
|
var tmp, current, top = array.length;
|
|
|
|
if (top) {
|
|
while (--top) {
|
|
current = Math.floor(Math.random() * (top + 1));
|
|
tmp = array[current];
|
|
array[current] = array[top];
|
|
array[top] = tmp;
|
|
}
|
|
}
|
|
|
|
return array;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<section id="collapse">
|
|
<div class="page-header">
|
|
<h1>Collapse<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/collapse">ui.bootstrap.collapse</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<style>
|
|
.horizontal-collapse {
|
|
height: 70px;
|
|
}
|
|
.navbar-collapse.in {
|
|
overflow-y: hidden;
|
|
}
|
|
</style>
|
|
<div ng-controller="CollapseDemoCtrl">
|
|
<p>Resize window to less than 768 pixels to display mobile menu toggle button.</p>
|
|
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
|
|
<a class="navbar-brand" href="#">A menu</a>
|
|
<button class="navbar-toggler" type="button" ng-click="isNavCollapsed = !isNavCollapsed" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link 1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link 2</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<hr>
|
|
<button type="button" class="btn btn-secondary" ng-click="isCollapsed = !isCollapsed">Toggle collapse Vertically</button>
|
|
<hr>
|
|
<div uib-collapse="isCollapsed" class="mb-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
Some content
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-secondary" ng-click="isCollapsedHorizontal = !isCollapsedHorizontal">Toggle collapse Horizontally</button>
|
|
<hr>
|
|
<div class="horizontal-collapse" uib-collapse="isCollapsedHorizontal" horizontal>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
Some content
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p><strong>uib-collapse</strong> provides a simple way to hide and show an element with a css transition</p>
|
|
<h3 id="uib-collapse-settings">uib-collapse settings</h3>
|
|
<ul>
|
|
<li><p><code>collapsed()</code>
|
|
<small class="badge">$</small> -
|
|
An optional expression called after the element finished collapsing.</p>
|
|
</li>
|
|
<li><p><code>collapsing()</code>
|
|
<small class="badge">$</small> -
|
|
An optional expression called before the element begins collapsing.
|
|
If the expression returns a promise, animation won't start until the promise resolves.
|
|
If the returned promise is rejected, collapsing will be cancelled.</p>
|
|
</li>
|
|
<li><p><code>expanded()</code>
|
|
<small class="badge">$</small> -
|
|
An optional expression called after the element finished expanding.</p>
|
|
</li>
|
|
<li><p><code>expanding()</code>
|
|
<small class="badge">$</small> -
|
|
An optional expression called before the element begins expanding.
|
|
If the expression returns a promise, animation won't start until the promise resolves.
|
|
If the returned promise is rejected, expanding will be cancelled.</p>
|
|
</li>
|
|
<li><p><code>uib-collapse</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether the element should be collapsed or not.</p>
|
|
</li>
|
|
<li><p><code>horizontal</code>
|
|
<small class="badge">$</small> -
|
|
An optional attribute that permit to collapse horizontally.</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="known-issues">Known Issues</h3>
|
|
<p>When using the <code>horizontal</code> attribute with this directive, CSS can reflow as the collapse element goes from <code>0px</code> to its desired end width, which can result in height changes. This can cause animations to not appear to run. The best way around this is to set a fixed height via CSS on the horizontal collapse element so that this situation does not occur, and so the animation can run as expected.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'collapse')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><style>
|
|
.horizontal-collapse {
|
|
height: 70px;
|
|
}
|
|
.navbar-collapse.in {
|
|
overflow-y: hidden;
|
|
}
|
|
</style>
|
|
<div ng-controller="CollapseDemoCtrl">
|
|
<p>Resize window to less than 768 pixels to display mobile menu toggle button.</p>
|
|
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
|
|
<a class="navbar-brand" href="#">A menu</a>
|
|
<button class="navbar-toggler" type="button" ng-click="isNavCollapsed = !isNavCollapsed" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link 1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link 2</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<hr>
|
|
<button type="button" class="btn btn-secondary" ng-click="isCollapsed = !isCollapsed">Toggle collapse Vertically</button>
|
|
<hr>
|
|
<div uib-collapse="isCollapsed" class="mb-3">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
Some content
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-secondary" ng-click="isCollapsedHorizontal = !isCollapsedHorizontal">Toggle collapse Horizontally</button>
|
|
<hr>
|
|
<div class="horizontal-collapse" uib-collapse="isCollapsedHorizontal" horizontal>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
Some content
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
|
|
$scope.isNavCollapsed = true;
|
|
$scope.isCollapsed = false;
|
|
$scope.isCollapsedHorizontal = false;
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
|
|
$scope.isNavCollapsed = true;
|
|
$scope.isCollapsed = false;
|
|
$scope.isCollapsedHorizontal = false;
|
|
});
|
|
</script>
|
|
|
|
<section id="dateparser">
|
|
<div class="page-header">
|
|
<h1>Dateparser<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/dateparser">ui.bootstrap.dateparser</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="DateParserDemoCtrl">
|
|
<h4>Formatting codes playground</h4>
|
|
<p class="form-group">
|
|
<label>Define your format</label>
|
|
<input type="text" ng-model="format" class="form-control">
|
|
</p>
|
|
<p class="form-group">
|
|
<label>Result</label>
|
|
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" />
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>The <code>uibDateParser</code> is what the <code>uib-datepicker</code> uses internally to parse the dates. You can use it standalone by injecting the <code>uibDateParser</code> service where you need it.</p>
|
|
<p>The public API for the dateParser is a single method called <code>parse</code>.</p>
|
|
<p>Certain format codes support i18n. Check this <a href="https://docs.angularjs.org/guide/i18n">guide</a> for more information.</p>
|
|
<h3 id="uibdateparser-s-parse-function">uibDateParser's parse function</h3>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li><p><code>input</code>
|
|
<em>(Type: <code>string</code>, Example: <code>2004/Sep/4</code>)</em> -
|
|
The input date to parse.</p>
|
|
</li>
|
|
<li><p><code>format</code>
|
|
<em>(Type: <code>string</code>, Example: <code>yyyy/MMM/d</code>)</em> -
|
|
The format we want to use. Check all the supported formats below.</p>
|
|
</li>
|
|
<li><p><code>baseDate</code>
|
|
<em>(Type: <code>Date</code>, Example: <code>new Date()</code>)</em> -
|
|
If you want to parse a date but maintain the timezone, you can pass an existing date here.</p>
|
|
</li>
|
|
</ul>
|
|
<h5 id="return">return</h5>
|
|
<ul>
|
|
<li>If the specified input matches the format, a new date with the input will be returned, otherwise, it will return undefined.</li>
|
|
</ul>
|
|
<h3 id="uibdateparser-s-format-codes">uibDateParser's format codes</h3>
|
|
<ul>
|
|
<li><p><code>yyyy</code>
|
|
<em>(Example: <code>2015</code>)</em> -
|
|
Parses a 4 digits year.</p>
|
|
</li>
|
|
<li><p><code>yy</code>
|
|
<em>(Example: <code>15</code>)</em> -
|
|
Parses a 2 digits year.</p>
|
|
</li>
|
|
<li><p><code>y</code>
|
|
<em>(Example: <code>15</code>)</em> -
|
|
Parses a year with 1, 2, 3, or 4 digits.</p>
|
|
</li>
|
|
<li><p><code>MMMM</code>
|
|
<em>(Example: <code>February</code>, i18n support)</em> -
|
|
Parses the full name of a month.</p>
|
|
</li>
|
|
<li><p><code>MMM</code>
|
|
<em>(Example: <code>Feb</code>, i18n support)</em> -
|
|
Parses the short name of a month.</p>
|
|
</li>
|
|
<li><p><code>MM</code>
|
|
<em>(Example: <code>12</code>, Leading 0)</em> -
|
|
Parses a numeric month.</p>
|
|
</li>
|
|
<li><p><code>M</code>
|
|
<em>(Example: <code>3</code>)</em> -
|
|
Parses a numeric month.</p>
|
|
</li>
|
|
<li><p><code>M!</code>
|
|
<em>(Example: <code>3</code> or <code>03</code>)</em> -
|
|
Parses a numeric month, but allowing an optional leading zero</p>
|
|
</li>
|
|
<li><p><code>LLLL</code>
|
|
<em>(Example: <code>February</code>, i18n support)</em> - Stand-alone month in year (January-December). Requires Angular version 1.5.1 or higher.</p>
|
|
</li>
|
|
<li><p><code>dd</code>
|
|
<em>(Example: <code>05</code>, Leading 0)</em> -
|
|
Parses a numeric day.</p>
|
|
</li>
|
|
<li><p><code>d</code>
|
|
<em>(Example: <code>5</code>)</em> -
|
|
Parses a numeric day.</p>
|
|
</li>
|
|
<li><p><code>d!</code>
|
|
<em>(Example: <code>3</code> or <code>03</code>)</em> -
|
|
Parses a numeric day, but allowing an optional leading zero</p>
|
|
</li>
|
|
<li><p><code>EEEE</code>
|
|
<em>(Example: <code>Sunday</code>, i18n support)</em> -
|
|
Parses the full name of a day.</p>
|
|
</li>
|
|
<li><p><code>EEE</code>
|
|
<em>(Example: <code>Mon</code>, i18n support)</em> -
|
|
Parses the short name of a day.</p>
|
|
</li>
|
|
<li><p><code>HH</code>
|
|
<em>(Example: <code>14</code>, Leading 0)</em> -
|
|
Parses a 24 hours time.</p>
|
|
</li>
|
|
<li><p><code>H</code>
|
|
<em>(Example: <code>3</code>)</em> -
|
|
Parses a 24 hours time.</p>
|
|
</li>
|
|
<li><p><code>hh</code>
|
|
<em>(Example: <code>11</code>, Leading 0)</em> -
|
|
Parses a 12 hours time.</p>
|
|
</li>
|
|
<li><p><code>h</code>
|
|
<em>(Example: <code>3</code>)</em> -
|
|
Parses a 12 hours time.</p>
|
|
</li>
|
|
<li><p><code>mm</code>
|
|
<em>(Example: <code>09</code>, Leading 0)</em> -
|
|
Parses the minutes.</p>
|
|
</li>
|
|
<li><p><code>m</code>
|
|
<em>(Example: <code>3</code>)</em> -
|
|
Parses the minutes.</p>
|
|
</li>
|
|
<li><p><code>sss</code>
|
|
<em>(Example: <code>094</code>, Leading 0)</em> -
|
|
Parses the milliseconds.</p>
|
|
</li>
|
|
<li><p><code>ss</code>
|
|
<em>(Example: <code>08</code>, Leading 0)</em> -
|
|
Parses the seconds.</p>
|
|
</li>
|
|
<li><p><code>s</code>
|
|
<em>(Example: <code>22</code>)</em> -
|
|
Parses the seconds.</p>
|
|
</li>
|
|
<li><p><code>a</code>
|
|
<em>(Example: <code>10AM</code>)</em> -
|
|
Parses a 12 hours time with AM/PM.</p>
|
|
</li>
|
|
<li><p><code>Z</code>
|
|
<em>(Example: <code>-0800</code>)</em> -
|
|
Parses the timezone offset in a signed 4 digit representation</p>
|
|
</li>
|
|
<li><p><code>ww</code>
|
|
<em>(Example: <code>03</code>, Leading 0)</em> -
|
|
Parses the week number</p>
|
|
</li>
|
|
<li><p><code>w</code>
|
|
<em>(Example: <code>03</code>)</em> -
|
|
Parses the week number</p>
|
|
</li>
|
|
<li><p><code>G</code>, <code>GG</code>, <code>GGG</code>
|
|
<em>(Example: <code>AD</code>)</em> -
|
|
Parses the era (<code>AD</code> or <code>BC</code>)</p>
|
|
</li>
|
|
<li><code>GGGG</code>
|
|
<em>(Example: <code>Anno Domini</code>)</em> -
|
|
Parses the long form of the era (<code>Anno Domini</code> or <code>Before Christ</code>)</li>
|
|
</ul>
|
|
<p>* The ones marked with <code>Leading 0</code>, needs a leading 0 for values less than 10. Exception being milliseconds which needs it for values under 100.</p>
|
|
<p>** It also supports <code>fullDate|longDate|medium|mediumDate|mediumTime|short|shortDate|shortTime</code> as the format for parsing.</p>
|
|
<p>*** It supports template literals as a string between the single quote <code>'</code> character, i.e. <code>'The Date is' MM/DD/YYYY</code>. If one wants the literal single quote character, one must use <code>''''</code>.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'dateparser')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="DateParserDemoCtrl">
|
|
<h4>Formatting codes playground</h4>
|
|
<p class="form-group">
|
|
<label>Define your format</label>
|
|
<input type="text" ng-model="format" class="form-control">
|
|
</p>
|
|
<p class="form-group">
|
|
<label>Result</label>
|
|
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" />
|
|
</p>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('DateParserDemoCtrl', function ($scope, uibDateParser) {
|
|
$scope.format = 'yyyy/MM/dd';
|
|
$scope.date = new Date();
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('DateParserDemoCtrl', function ($scope, uibDateParser) {
|
|
$scope.format = 'yyyy/MM/dd';
|
|
$scope.date = new Date();
|
|
});
|
|
</script>
|
|
|
|
<section id="datepicker">
|
|
<div class="page-header">
|
|
<h1>Datepicker<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/datepicker">ui.bootstrap.datepicker</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<style>
|
|
.full button span {
|
|
background-color: limegreen;
|
|
border-radius: 32px;
|
|
color: black;
|
|
}
|
|
.partially button span {
|
|
background-color: orange;
|
|
border-radius: 32px;
|
|
color: black;
|
|
}
|
|
</style>
|
|
<div ng-controller="DatepickerDemoCtrl">
|
|
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
|
|
|
|
<h4>Inline</h4>
|
|
<div style="display:inline-block; min-height:290px;">
|
|
<div uib-datepicker ng-model="dt" class="card" datepicker-options="options"></div>
|
|
</div>
|
|
|
|
<hr />
|
|
<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
|
|
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>Our datepicker is flexible and fully customizable.</p>
|
|
<p>You can navigate through days, months and years.</p>
|
|
<p>The datepicker has 3 modes:</p>
|
|
<ul>
|
|
<li><code>day</code> - In this mode you're presented with a 6-week calendar for a specified month.</li>
|
|
<li><code>month</code> - In this mode you can select a month within a selected year.</li>
|
|
<li><code>year</code> - In this mode you are presented with a range of years (20 by default).</li>
|
|
</ul>
|
|
<h3 id="uib-datepicker-settings">uib-datepicker settings</h3>
|
|
<ul>
|
|
<li><p><code>ng-model</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
The date object. Must be a Javascript <code>Date</code> object. You may use the <code>uibDateParser</code> service to assist in string-to-object conversion.</p>
|
|
</li>
|
|
<li><p><code>ng-model-options</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>{}</code>)</em> -
|
|
Supported <a href="https://docs.angularjs.org/api/ng/directive/ngModelOptions">angular ngModelOptions</a>:</p>
|
|
<ul>
|
|
<li>allowInvalid</li>
|
|
<li>timezone</li>
|
|
</ul>
|
|
</li>
|
|
<li><p><code>template-url</code>
|
|
<em>(Default: <code>uib/template/datepicker/datepicker.html</code>)</em> -
|
|
Add the ability to override the template used on the component.</p>
|
|
</li>
|
|
</ul>
|
|
<p>Apart from the previous settings, to configure the uib-datepicker you need to create an object in Javascript with all the options and use it on the <code>datepicker-options</code> attribute:</p>
|
|
<ul>
|
|
<li><p><code>datepicker-options</code>
|
|
<small class="badge">$</small> -
|
|
An object to configure the datepicker in one place.</p>
|
|
<ul>
|
|
<li><p><code>customClass ({date: date, mode: mode})</code> -
|
|
An optional expression to add classes based on passing an object with date and current mode properties.</p>
|
|
</li>
|
|
<li><p><code>dateDisabled ({date: date, mode: mode})</code> -
|
|
An optional expression to disable visible options based on passing an object with date and current mode properties.</p>
|
|
</li>
|
|
<li><p><code>datepickerMode</code>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>day</code>)</em> -
|
|
Current mode of the datepicker <em>(day|month|year)</em>. Can be used to initialize the datepicker in a specific mode.</p>
|
|
</li>
|
|
<li><p><code>formatDay</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>dd</code>)</em> -
|
|
Format of day in month.</p>
|
|
</li>
|
|
<li><p><code>formatMonth</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>MMMM</code>)</em> -
|
|
Format of month in year.</p>
|
|
</li>
|
|
<li><p><code>formatYear</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>yyyy</code>)</em> -
|
|
Format of year in year range.</p>
|
|
</li>
|
|
<li><p><code>formatDayHeader</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>EEE</code>)</em> -
|
|
Format of day in week header.</p>
|
|
</li>
|
|
<li><p><code>formatDayTitle</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>MMMM yyyy</code>)</em> -
|
|
Format of title when selecting day.</p>
|
|
</li>
|
|
<li><p><code>formatMonthTitle</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>yyyy</code>)</em> -
|
|
Format of title when selecting month.</p>
|
|
</li>
|
|
<li><p><code>initDate</code>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
The initial date view when no model value is specified.</p>
|
|
</li>
|
|
<li><p><code>maxDate</code>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
Defines the maximum available date. Requires a Javascript Date object.</p>
|
|
</li>
|
|
<li><p><code>maxMode</code>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>year</code>)</em> -
|
|
Sets an upper limit for mode.</p>
|
|
</li>
|
|
<li><p><code>minDate</code>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
Defines the minimum available date. Requires a Javascript Date object.</p>
|
|
</li>
|
|
<li><p><code>minMode</code>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>day</code>)</em> -
|
|
Sets a lower limit for mode.</p>
|
|
</li>
|
|
<li><p><code>monthColumns</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>3</code>)</em> -
|
|
Number of columns displayed in month selection.</p>
|
|
</li>
|
|
<li><p><code>ngModelOptions</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
Sets <code>ngModelOptions</code> for datepicker. This can be overridden through attribute usage</p>
|
|
</li>
|
|
<li><p><code>shortcutPropagation</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
An option to disable the propagation of the keydown event.</p>
|
|
</li>
|
|
<li><p><code>showWeeks</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Whether to display week numbers.</p>
|
|
</li>
|
|
<li><p><code>startingDay</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK</code>)</em> -
|
|
Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).</p>
|
|
</li>
|
|
<li><p><code>yearRows</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>4</code>)</em> -
|
|
Number of rows displayed in year selection.</p>
|
|
</li>
|
|
<li><p><code>yearColumns</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>5</code>)</em> -
|
|
Number of columns displayed in year selection.</p>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<h3 id="keyboard-support">Keyboard support</h3>
|
|
<p>Depending on datepicker's current mode, the date may refer either to day, month or year. Accordingly, the term view refers either to a month, year or year range.</p>
|
|
<ul>
|
|
<li><code>Left</code>: Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.</li>
|
|
<li><code>Right</code>: Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.</li>
|
|
<li><code>Up</code>: Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.</li>
|
|
<li><code>Down</code>: Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.</li>
|
|
<li><code>PgUp</code>: Move focus to the same date of the previous view. If that date does not exist, focus is placed on the last date of the month.</li>
|
|
<li><code>PgDn</code>: Move focus to the same date of the following view. If that date does not exist, focus is placed on the last date of the month.</li>
|
|
<li><code>Home</code>: Move to the first date of the view.</li>
|
|
<li><code>End</code>: Move to the last date of the view.</li>
|
|
<li><code>Enter</code>/<code>Space</code>: Select date.</li>
|
|
<li><code>Ctrl</code>+<code>Up</code>: Move to an upper mode.</li>
|
|
<li><code>Ctrl</code>+<code>Down</code>: Move to a lower mode.</li>
|
|
<li><code>Esc</code>: Will close popup, and move focus to the input.</li>
|
|
</ul>
|
|
<p><strong>Notes</strong></p>
|
|
<p>If the date a user enters falls outside of the min-/max-date range, a <code>dateDisabled</code> validation error will show on the form.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'datepicker')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><style>
|
|
.full button span {
|
|
background-color: limegreen;
|
|
border-radius: 32px;
|
|
color: black;
|
|
}
|
|
.partially button span {
|
|
background-color: orange;
|
|
border-radius: 32px;
|
|
color: black;
|
|
}
|
|
</style>
|
|
<div ng-controller="DatepickerDemoCtrl">
|
|
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
|
|
|
|
<h4>Inline</h4>
|
|
<div style="display:inline-block; min-height:290px;">
|
|
<div uib-datepicker ng-model="dt" class="card" datepicker-options="options"></div>
|
|
</div>
|
|
|
|
<hr />
|
|
<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
|
|
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
|
|
$scope.today = function() {
|
|
$scope.dt = new Date();
|
|
};
|
|
$scope.today();
|
|
|
|
$scope.clear = function() {
|
|
$scope.dt = null;
|
|
};
|
|
|
|
$scope.options = {
|
|
customClass: getDayClass,
|
|
minDate: new Date(),
|
|
showWeeks: true
|
|
};
|
|
|
|
// Disable weekend selection
|
|
function disabled(data) {
|
|
var date = data.date,
|
|
mode = data.mode;
|
|
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
|
|
}
|
|
|
|
$scope.toggleMin = function() {
|
|
$scope.options.minDate = $scope.options.minDate ? null : new Date();
|
|
};
|
|
|
|
$scope.toggleMin();
|
|
|
|
$scope.setDate = function(year, month, day) {
|
|
$scope.dt = new Date(year, month, day);
|
|
};
|
|
|
|
var tomorrow = new Date();
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
var afterTomorrow = new Date(tomorrow);
|
|
afterTomorrow.setDate(tomorrow.getDate() + 1);
|
|
$scope.events = [
|
|
{
|
|
date: tomorrow,
|
|
status: 'full'
|
|
},
|
|
{
|
|
date: afterTomorrow,
|
|
status: 'partially'
|
|
}
|
|
];
|
|
|
|
function getDayClass(data) {
|
|
var date = data.date,
|
|
mode = data.mode;
|
|
if (mode === 'day') {
|
|
var dayToCheck = new Date(date).setHours(0,0,0,0);
|
|
|
|
for (var i = 0; i < $scope.events.length; i++) {
|
|
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
|
|
|
|
if (dayToCheck === currentDay) {
|
|
return $scope.events[i].status;
|
|
}
|
|
}
|
|
}
|
|
|
|
return '';
|
|
}
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
|
|
$scope.today = function() {
|
|
$scope.dt = new Date();
|
|
};
|
|
$scope.today();
|
|
|
|
$scope.clear = function() {
|
|
$scope.dt = null;
|
|
};
|
|
|
|
$scope.options = {
|
|
customClass: getDayClass,
|
|
minDate: new Date(),
|
|
showWeeks: true
|
|
};
|
|
|
|
// Disable weekend selection
|
|
function disabled(data) {
|
|
var date = data.date,
|
|
mode = data.mode;
|
|
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
|
|
}
|
|
|
|
$scope.toggleMin = function() {
|
|
$scope.options.minDate = $scope.options.minDate ? null : new Date();
|
|
};
|
|
|
|
$scope.toggleMin();
|
|
|
|
$scope.setDate = function(year, month, day) {
|
|
$scope.dt = new Date(year, month, day);
|
|
};
|
|
|
|
var tomorrow = new Date();
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
var afterTomorrow = new Date(tomorrow);
|
|
afterTomorrow.setDate(tomorrow.getDate() + 1);
|
|
$scope.events = [
|
|
{
|
|
date: tomorrow,
|
|
status: 'full'
|
|
},
|
|
{
|
|
date: afterTomorrow,
|
|
status: 'partially'
|
|
}
|
|
];
|
|
|
|
function getDayClass(data) {
|
|
var date = data.date,
|
|
mode = data.mode;
|
|
if (mode === 'day') {
|
|
var dayToCheck = new Date(date).setHours(0,0,0,0);
|
|
|
|
for (var i = 0; i < $scope.events.length; i++) {
|
|
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
|
|
|
|
if (dayToCheck === currentDay) {
|
|
return $scope.events[i].status;
|
|
}
|
|
}
|
|
}
|
|
|
|
return '';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<section id="datepickerPopup">
|
|
<div class="page-header">
|
|
<h1>Datepicker Popup<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/datepickerPopup">ui.bootstrap.datepickerPopup</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<style>
|
|
.full button span {
|
|
background-color: limegreen;
|
|
border-radius: 32px;
|
|
color: black;
|
|
}
|
|
.partially button span {
|
|
background-color: orange;
|
|
border-radius: 32px;
|
|
color: black;
|
|
}
|
|
</style>
|
|
<div ng-controller="DatepickerPopupDemoCtrl">
|
|
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
|
|
|
|
<h4>Popup</h4>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p class="input-group">
|
|
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-secondary" ng-click="open1()">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M192 1664h288v-288h-288v288zm352 0h320v-288h-320v288zm-352-352h288v-320h-288v320zm352 0h320v-320h-320v320zm-352-384h288v-288h-288v288zm736 736h320v-288h-320v288zm-384-736h320v-288h-320v288zm768 736h288v-288h-288v288zm-384-352h320v-320h-320v320zm-352-864v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm736 864h288v-320h-288v320zm-384-384h320v-288h-320v288zm384 0h288v-288h-288v288zm32-480v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z"/></svg>
|
|
</i>
|
|
</button>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<p class="input-group">
|
|
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-secondary" ng-click="open2()">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M192 1664h288v-288h-288v288zm352 0h320v-288h-320v288zm-352-352h288v-320h-288v320zm352 0h320v-320h-320v320zm-352-384h288v-288h-288v288zm736 736h320v-288h-320v288zm-384-736h320v-288h-320v288zm768 736h288v-288h-288v288zm-384-352h320v-320h-320v320zm-352-864v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm736 864h288v-320h-288v320zm-384-384h320v-288h-320v288zm384 0h288v-288h-288v288zm32-480v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z"/></svg>
|
|
</i>
|
|
</button>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
|
|
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>The datepicker popup is meant to be used with an input element. To understand usage of the datepicker, please refer to its documentation <a href="https://angular-ui.github.io/bootstrap/#/datepicker">here</a>.</p>
|
|
<h3 id="uib-datepicker-popup-settings">uib-datepicker-popup settings</h3>
|
|
<p>The popup is a wrapper that you can use in an input to toggle a datepicker. To configure the datepicker, use <code>datepicker-options</code> as documented in the <a href="https://angular-ui.github.io/bootstrap/#/datepicker">inline datepicker</a>.</p>
|
|
<ul>
|
|
<li><p><code>alt-input-formats</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>[]</code>)</em> -
|
|
A list of alternate formats acceptable for manual entry.</p>
|
|
</li>
|
|
<li><p><code>clear-text</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>Clear</code>)</em> -
|
|
The text to display for the clear button.</p>
|
|
</li>
|
|
<li><p><code>close-on-date-selection</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Whether to close calendar when a date is chosen.</p>
|
|
</li>
|
|
<li><p><code>close-text</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>Done</code>)</em> -
|
|
The text to display for the close button.</p>
|
|
</li>
|
|
<li><p><code>current-text</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>Today</code>)</em> -
|
|
The text to display for the current day button.</p>
|
|
</li>
|
|
<li><p><code>datepicker-append-to-body</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>false</code>, Config: <code>appendToBody</code>)</em> -
|
|
Append the datepicker popup element to <code>body</code>, rather than inserting after <code>datepicker-popup</code>.</p>
|
|
</li>
|
|
<li><p><code>datepicker-options</code>
|
|
<small class="badge">$</small> -
|
|
An object with any combination of the datepicker settings (in camelCase) used to configure the wrapped datepicker.</p>
|
|
</li>
|
|
<li><p><code>datepicker-popup-template-url</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>uib/template/datepickerPopup/popup.html</code>)</em> -
|
|
Add the ability to override the template used on the component.</p>
|
|
</li>
|
|
<li><p><code>datepicker-template-url</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>uib/template/datepicker/datepicker.html</code>)</em> -
|
|
Add the ability to override the template used on the component (inner uib-datepicker).</p>
|
|
</li>
|
|
<li><p><code>is-open</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether or not to show the datepicker.</p>
|
|
</li>
|
|
<li><p><code>ng-model</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
The date object. Must be a Javascript <code>Date</code> object. You may use the <code>uibDateParser</code> service to assist in string-to-object conversion.</p>
|
|
</li>
|
|
<li><p><code>on-open-focus</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Whether or not to focus the datepicker popup upon opening.</p>
|
|
</li>
|
|
<li><p><code>show-button-bar</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Whether or not to display a button bar underneath the uib-datepicker.</p>
|
|
</li>
|
|
<li><p><code>type</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>text</code>, Config: <code>html5Types</code>)</em> -
|
|
You can override the input type to be <em>(date|datetime-local|month)</em>. That will change the date format of the popup.</p>
|
|
</li>
|
|
<li><p><code>popup-placement</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>auto bottom-left</code>, Config: 'placement')</em> -
|
|
Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popup will attempt to position where it fits in the closest scrollable ancestor. Accepts:</p>
|
|
<ul>
|
|
<li><code>top</code> - popup on top, horizontally centered on input element.</li>
|
|
<li><code>top-left</code> - popup on top, left edge aligned with input element left edge.</li>
|
|
<li><code>top-right</code> - popup on top, right edge aligned with input element right edge.</li>
|
|
<li><code>bottom</code> - popup on bottom, horizontally centered on input element.</li>
|
|
<li><code>bottom-left</code> - popup on bottom, left edge aligned with input element left edge.</li>
|
|
<li><code>bottom-right</code> - popup on bottom, right edge aligned with input element right edge.</li>
|
|
<li><code>left</code> - popup on left, vertically centered on input element.</li>
|
|
<li><code>left-top</code> - popup on left, top edge aligned with input element top edge.</li>
|
|
<li><code>left-bottom</code> - popup on left, bottom edge aligned with input element bottom edge.</li>
|
|
<li><code>right</code> - popup on right, vertically centered on input element.</li>
|
|
<li><code>right-top</code> - popup on right, top edge aligned with input element top edge.</li>
|
|
<li><code>right-bottom</code> - popup on right, bottom edge aligned with input element bottom edge.</li>
|
|
</ul>
|
|
</li>
|
|
<li><p><code>uib-datepicker-popup</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>yyyy-MM-dd</code>, Config: <code>datepickerConfig</code>)</em> -
|
|
The format for displayed dates. This string can take string literals by surrounding the value with single quotes, i.e. <code>yyyy-MM-dd h 'o\'clock'</code>.</p>
|
|
</li>
|
|
</ul>
|
|
<p><strong>Notes</strong></p>
|
|
<p>If using this directive on input type date, a native browser datepicker could also appear.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'datepickerPopup')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><style>
|
|
.full button span {
|
|
background-color: limegreen;
|
|
border-radius: 32px;
|
|
color: black;
|
|
}
|
|
.partially button span {
|
|
background-color: orange;
|
|
border-radius: 32px;
|
|
color: black;
|
|
}
|
|
</style>
|
|
<div ng-controller="DatepickerPopupDemoCtrl">
|
|
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
|
|
|
|
<h4>Popup</h4>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p class="input-group">
|
|
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-secondary" ng-click="open1()">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M192 1664h288v-288h-288v288zm352 0h320v-288h-320v288zm-352-352h288v-320h-288v320zm352 0h320v-320h-320v320zm-352-384h288v-288h-288v288zm736 736h320v-288h-320v288zm-384-736h320v-288h-320v288zm768 736h288v-288h-288v288zm-384-352h320v-320h-320v320zm-352-864v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm736 864h288v-320h-288v320zm-384-384h320v-288h-320v288zm384 0h288v-288h-288v288zm32-480v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z"/></svg>
|
|
</i>
|
|
</button>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<p class="input-group">
|
|
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-secondary" ng-click="open2()">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M192 1664h288v-288h-288v288zm352 0h320v-288h-320v288zm-352-352h288v-320h-288v320zm352 0h320v-320h-320v320zm-352-384h288v-288h-288v288zm736 736h320v-288h-320v288zm-384-736h320v-288h-320v288zm768 736h288v-288h-288v288zm-384-352h320v-320h-320v320zm-352-864v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm736 864h288v-320h-288v320zm-384-384h320v-288h-320v288zm384 0h288v-288h-288v288zm32-480v-288q0-13-9.5-22.5t-22.5-9.5h-64q-13 0-22.5 9.5t-9.5 22.5v288q0 13 9.5 22.5t22.5 9.5h64q13 0 22.5-9.5t9.5-22.5zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z"/></svg>
|
|
</i>
|
|
</button>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
|
|
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
|
|
$scope.today = function() {
|
|
$scope.dt = new Date();
|
|
};
|
|
$scope.today();
|
|
|
|
$scope.clear = function() {
|
|
$scope.dt = null;
|
|
};
|
|
|
|
$scope.inlineOptions = {
|
|
customClass: getDayClass,
|
|
minDate: new Date(),
|
|
showWeeks: true
|
|
};
|
|
|
|
$scope.dateOptions = {
|
|
dateDisabled: disabled,
|
|
formatYear: 'yy',
|
|
maxDate: new Date(2020, 5, 22),
|
|
minDate: new Date(),
|
|
startingDay: 1
|
|
};
|
|
|
|
// Disable weekend selection
|
|
function disabled(data) {
|
|
var date = data.date,
|
|
mode = data.mode;
|
|
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
|
|
}
|
|
|
|
$scope.toggleMin = function() {
|
|
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
|
|
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
|
|
};
|
|
|
|
$scope.toggleMin();
|
|
|
|
$scope.open1 = function() {
|
|
$scope.popup1.opened = true;
|
|
};
|
|
|
|
$scope.open2 = function() {
|
|
$scope.popup2.opened = true;
|
|
};
|
|
|
|
$scope.setDate = function(year, month, day) {
|
|
$scope.dt = new Date(year, month, day);
|
|
};
|
|
|
|
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
|
|
$scope.format = $scope.formats[0];
|
|
$scope.altInputFormats = ['M!/d!/yyyy'];
|
|
|
|
$scope.popup1 = {
|
|
opened: false
|
|
};
|
|
|
|
$scope.popup2 = {
|
|
opened: false
|
|
};
|
|
|
|
var tomorrow = new Date();
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
var afterTomorrow = new Date();
|
|
afterTomorrow.setDate(tomorrow.getDate() + 1);
|
|
$scope.events = [
|
|
{
|
|
date: tomorrow,
|
|
status: 'full'
|
|
},
|
|
{
|
|
date: afterTomorrow,
|
|
status: 'partially'
|
|
}
|
|
];
|
|
|
|
function getDayClass(data) {
|
|
var date = data.date,
|
|
mode = data.mode;
|
|
if (mode === 'day') {
|
|
var dayToCheck = new Date(date).setHours(0,0,0,0);
|
|
|
|
for (var i = 0; i < $scope.events.length; i++) {
|
|
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
|
|
|
|
if (dayToCheck === currentDay) {
|
|
return $scope.events[i].status;
|
|
}
|
|
}
|
|
}
|
|
|
|
return '';
|
|
}
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
|
|
$scope.today = function() {
|
|
$scope.dt = new Date();
|
|
};
|
|
$scope.today();
|
|
|
|
$scope.clear = function() {
|
|
$scope.dt = null;
|
|
};
|
|
|
|
$scope.inlineOptions = {
|
|
customClass: getDayClass,
|
|
minDate: new Date(),
|
|
showWeeks: true
|
|
};
|
|
|
|
$scope.dateOptions = {
|
|
dateDisabled: disabled,
|
|
formatYear: 'yy',
|
|
maxDate: new Date(2020, 5, 22),
|
|
minDate: new Date(),
|
|
startingDay: 1
|
|
};
|
|
|
|
// Disable weekend selection
|
|
function disabled(data) {
|
|
var date = data.date,
|
|
mode = data.mode;
|
|
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
|
|
}
|
|
|
|
$scope.toggleMin = function() {
|
|
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
|
|
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
|
|
};
|
|
|
|
$scope.toggleMin();
|
|
|
|
$scope.open1 = function() {
|
|
$scope.popup1.opened = true;
|
|
};
|
|
|
|
$scope.open2 = function() {
|
|
$scope.popup2.opened = true;
|
|
};
|
|
|
|
$scope.setDate = function(year, month, day) {
|
|
$scope.dt = new Date(year, month, day);
|
|
};
|
|
|
|
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
|
|
$scope.format = $scope.formats[0];
|
|
$scope.altInputFormats = ['M!/d!/yyyy'];
|
|
|
|
$scope.popup1 = {
|
|
opened: false
|
|
};
|
|
|
|
$scope.popup2 = {
|
|
opened: false
|
|
};
|
|
|
|
var tomorrow = new Date();
|
|
tomorrow.setDate(tomorrow.getDate() + 1);
|
|
var afterTomorrow = new Date();
|
|
afterTomorrow.setDate(tomorrow.getDate() + 1);
|
|
$scope.events = [
|
|
{
|
|
date: tomorrow,
|
|
status: 'full'
|
|
},
|
|
{
|
|
date: afterTomorrow,
|
|
status: 'partially'
|
|
}
|
|
];
|
|
|
|
function getDayClass(data) {
|
|
var date = data.date,
|
|
mode = data.mode;
|
|
if (mode === 'day') {
|
|
var dayToCheck = new Date(date).setHours(0,0,0,0);
|
|
|
|
for (var i = 0; i < $scope.events.length; i++) {
|
|
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
|
|
|
|
if (dayToCheck === currentDay) {
|
|
return $scope.events[i].status;
|
|
}
|
|
}
|
|
}
|
|
|
|
return '';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<section id="dropdown">
|
|
<div class="page-header">
|
|
<h1>Dropdown<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/dropdown">ui.bootstrap.dropdown</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
|
|
<div ng-controller="DropdownCtrl">
|
|
<div>
|
|
<!-- Simple dropdown -->
|
|
<span uib-dropdown on-toggle="toggled(open)" class="mb-2">
|
|
<a href id="simple-dropdown" uib-dropdown-toggle>
|
|
Click me for a dropdown, yo!
|
|
</a>
|
|
<div class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
|
|
<a href ng-repeat="choice in items" class="dropdown-item">
|
|
{{choice}}
|
|
</a>
|
|
</div>
|
|
</span>
|
|
|
|
<br>
|
|
|
|
<!-- Single button -->
|
|
<div class="btn-group mb-2" uib-dropdown is-open="status.isopen">
|
|
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
|
|
Button dropdown <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<!-- Split button -->
|
|
<div class="btn-group mb-2" uib-dropdown>
|
|
<button id="split-button" type="button" class="btn btn-danger">Action</button>
|
|
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
|
|
<span class="caret"></span>
|
|
<span class="sr-only">Split button!</span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="split-button">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<!-- Single button using append-to-body -->
|
|
<div class="btn-group mb-2" uib-dropdown dropdown-append-to-body>
|
|
<button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle>
|
|
Dropdown on Body <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<!-- Single button using template-url -->
|
|
<div class="btn-group mb-2" uib-dropdown>
|
|
<button id="button-template-url" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
|
|
Dropdown using template <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu template-url="dropdown.html" aria-labelledby="button-template-url">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
<p>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown</button>
|
|
<button type="button" class="btn btn-warning btn-sm" ng-click="disabled = !disabled">Enable/Disable</button>
|
|
</p>
|
|
|
|
<hr>
|
|
<!-- Single button with keyboard nav -->
|
|
<div class="btn-group" uib-dropdown keyboard-nav>
|
|
<button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
|
|
Dropdown with keyboard navigation <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
<!-- AppendTo use case -->
|
|
<h4>append-to vs. append-to-body vs. inline example</h4>
|
|
<div id="dropdown-scrollable-container" style="height: 15em; overflow: auto;">
|
|
<div id="dropdown-long-content">
|
|
<div id="dropdown-hidden-container">
|
|
<div class="btn-group" uib-dropdown keyboard-nav dropdown-append-to="appendToEl">
|
|
<button id="btn-append-to" type="button" class="btn btn-primary" uib-dropdown-toggle>
|
|
Dropdown in Container <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group" uib-dropdown dropdown-append-to-body>
|
|
<button id="btn-append-to-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle>
|
|
Dropdown on Body <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group" uib-dropdown>
|
|
<button id="btn-append-to-single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
|
|
Inline Dropdown <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-single-button">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/ng-template" id="dropdown.html">
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="button-template-url">
|
|
<a href="#" class="dropdown-item">Action in Template</a>
|
|
<a href="#" class="dropdown-item">Another action in Template</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link in Template</a>
|
|
</div>
|
|
</script>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.</p>
|
|
<p>This directive is composed by three parts:</p>
|
|
<ul>
|
|
<li><code>uib-dropdown</code> which transforms a node into a dropdown.</li>
|
|
<li><code>uib-dropdown-toggle</code> which allows the dropdown to be toggled via click. This directive is optional.</li>
|
|
<li><code>uib-dropdown-menu</code> which transforms a node into the popup menu.</li>
|
|
</ul>
|
|
<p>Each of these parts need to be used as attribute directives.</p>
|
|
<h3 id="uib-dropdown-settings">uib-dropdown settings</h3>
|
|
<ul>
|
|
<li><p><code>auto-close</code>
|
|
<em>(Default: <code>always</code>)</em> -
|
|
Controls the behavior of the menu when clicked.</p>
|
|
<ul>
|
|
<li><code>always</code> - Automatically closes the dropdown when any of its elements is clicked.</li>
|
|
<li><code>disabled</code> - Disables the auto close. You can control it manually with <code>is-open</code>. It still gets closed if the toggle is clicked, <code>esc</code> is pressed or another dropdown is open.</li>
|
|
<li><code>outsideClick</code> - Closes the dropdown automatically only when the user clicks any element outside the dropdown.</li>
|
|
</ul>
|
|
</li>
|
|
<li><p><code>dropdown-append-to</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
Appends the inner dropdown-menu to an arbitrary DOM element.</p>
|
|
</li>
|
|
<li><p><code>dropdown-append-to-body</code>
|
|
<small class="badge">B</small>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Appends the inner dropdown-menu to the body element if the attribute is present without a value, or with a non <code>false</code> value.</p>
|
|
</li>
|
|
<li><p><code>is-open</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Defines whether or not the dropdown-menu is open. The <code>uib-dropdown-toggle</code> will toggle this attribute on click.</p>
|
|
</li>
|
|
<li><p><code>keyboard-nav</code>:
|
|
<small class="badge">B</small>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Enables navigation of dropdown list elements with the arrow keys.</p>
|
|
</li>
|
|
<li><p><code>on-toggle(open)</code>
|
|
<small class="badge">$</small> -
|
|
An optional expression called when the dropdown menu is opened or closed.</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="uib-dropdown-menu-settings">uib-dropdown-menu settings</h3>
|
|
<ul>
|
|
<li><code>template-url</code>
|
|
<em>(Default: <code>none</code>)</em> -
|
|
You may specify a template for the dropdown menu. Check the demos for an example.</li>
|
|
</ul>
|
|
<h3 id="additional-settings-uibdropdownconfig">Additional settings <code>uibDropdownConfig</code></h3>
|
|
<ul>
|
|
<li><p><code>appendToOpenClass</code>
|
|
<em>(Default: <code>uib-dropdown-open</code>)</em> -
|
|
Class to apply when the dropdown is open and appended to a different DOM element.</p>
|
|
</li>
|
|
<li><p><code>openClass</code>
|
|
<em>(Default: <code>open</code>)</em> -
|
|
Class to apply when the dropdown is open.</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="known-issues">Known issues</h3>
|
|
<p>For usage with ngTouch, it is recommended to use the programmatic <code>is-open</code> trigger with ng-click - this is due to ngTouch decorating ng-click to prevent propagation of the event.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'dropdown')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html">
|
|
<div ng-controller="DropdownCtrl">
|
|
<div>
|
|
<!-- Simple dropdown -->
|
|
<span uib-dropdown on-toggle="toggled(open)" class="mb-2">
|
|
<a href id="simple-dropdown" uib-dropdown-toggle>
|
|
Click me for a dropdown, yo!
|
|
</a>
|
|
<div class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
|
|
<a href ng-repeat="choice in items" class="dropdown-item">
|
|
{{choice}}
|
|
</a>
|
|
</div>
|
|
</span>
|
|
|
|
<br>
|
|
|
|
<!-- Single button -->
|
|
<div class="btn-group mb-2" uib-dropdown is-open="status.isopen">
|
|
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
|
|
Button dropdown <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<!-- Split button -->
|
|
<div class="btn-group mb-2" uib-dropdown>
|
|
<button id="split-button" type="button" class="btn btn-danger">Action</button>
|
|
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
|
|
<span class="caret"></span>
|
|
<span class="sr-only">Split button!</span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="split-button">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<!-- Single button using append-to-body -->
|
|
<div class="btn-group mb-2" uib-dropdown dropdown-append-to-body>
|
|
<button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle>
|
|
Dropdown on Body <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<!-- Single button using template-url -->
|
|
<div class="btn-group mb-2" uib-dropdown>
|
|
<button id="button-template-url" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
|
|
Dropdown using template <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu template-url="dropdown.html" aria-labelledby="button-template-url">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
<p>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown</button>
|
|
<button type="button" class="btn btn-warning btn-sm" ng-click="disabled = !disabled">Enable/Disable</button>
|
|
</p>
|
|
|
|
<hr>
|
|
<!-- Single button with keyboard nav -->
|
|
<div class="btn-group" uib-dropdown keyboard-nav>
|
|
<button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
|
|
Dropdown with keyboard navigation <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
<!-- AppendTo use case -->
|
|
<h4>append-to vs. append-to-body vs. inline example</h4>
|
|
<div id="dropdown-scrollable-container" style="height: 15em; overflow: auto;">
|
|
<div id="dropdown-long-content">
|
|
<div id="dropdown-hidden-container">
|
|
<div class="btn-group" uib-dropdown keyboard-nav dropdown-append-to="appendToEl">
|
|
<button id="btn-append-to" type="button" class="btn btn-primary" uib-dropdown-toggle>
|
|
Dropdown in Container <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group" uib-dropdown dropdown-append-to-body>
|
|
<button id="btn-append-to-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle>
|
|
Dropdown on Body <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group" uib-dropdown>
|
|
<button id="btn-append-to-single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
|
|
Inline Dropdown <span class="caret"></span>
|
|
</button>
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-single-button">
|
|
<a href="#" class="dropdown-item">Action</a>
|
|
<a href="#" class="dropdown-item">Another action</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/ng-template" id="dropdown.html">
|
|
<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="button-template-url">
|
|
<a href="#" class="dropdown-item">Action in Template</a>
|
|
<a href="#" class="dropdown-item">Another action in Template</a>
|
|
<a href="#" class="dropdown-item">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Separated link in Template</a>
|
|
</div>
|
|
</script>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
|
|
$scope.items = [
|
|
'The first choice!',
|
|
'And another choice for you.',
|
|
'but wait! A third!'
|
|
];
|
|
|
|
$scope.status = {
|
|
isopen: false
|
|
};
|
|
|
|
$scope.toggled = function(open) {
|
|
$log.log('Dropdown is now: ', open);
|
|
};
|
|
|
|
$scope.toggleDropdown = function($event) {
|
|
$event.preventDefault();
|
|
$event.stopPropagation();
|
|
$scope.status.isopen = !$scope.status.isopen;
|
|
};
|
|
|
|
$scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
|
|
$scope.items = [
|
|
'The first choice!',
|
|
'And another choice for you.',
|
|
'but wait! A third!'
|
|
];
|
|
|
|
$scope.status = {
|
|
isopen: false
|
|
};
|
|
|
|
$scope.toggled = function(open) {
|
|
$log.log('Dropdown is now: ', open);
|
|
};
|
|
|
|
$scope.toggleDropdown = function($event) {
|
|
$event.preventDefault();
|
|
$event.stopPropagation();
|
|
$scope.status.isopen = !$scope.status.isopen;
|
|
};
|
|
|
|
$scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
|
|
});
|
|
</script>
|
|
|
|
<section id="modal">
|
|
<div class="page-header">
|
|
<h1>Modal<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/modal">ui.bootstrap.modal</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
|
|
<script type="text/ng-template" id="myModalContent.html">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
|
|
</div>
|
|
<div class="modal-body" id="modal-body">
|
|
<ul>
|
|
<li ng-repeat="item in $ctrl.items">
|
|
<a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item">{{ item }}</a>
|
|
</li>
|
|
</ul>
|
|
Selected: <b>{{ $ctrl.selected.item }}</b>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
|
|
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
|
|
</div>
|
|
</script>
|
|
<script type="text/ng-template" id="stackedModal.html">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
|
|
</div>
|
|
<div class="modal-body" id="modal-body-{{name}}">
|
|
Having multiple modals open at once is probably bad UX but it's technically possible.
|
|
</div>
|
|
</script>
|
|
|
|
<button type="button" class="btn btn-secondary" ng-click="$ctrl.open()">Open me!</button>
|
|
<button type="button" class="btn btn-secondary" ng-click="$ctrl.open('lg')">Large modal</button>
|
|
<button type="button" class="btn btn-secondary" ng-click="$ctrl.open('sm')">Small modal</button>
|
|
<button type="button"
|
|
class="btn btn-secondary"
|
|
ng-click="$ctrl.open('sm', '.modal-parent')">
|
|
Modal appended to a custom parent
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" ng-click="$ctrl.toggleAnimation()">Toggle Animation ({{ $ctrl.animationsEnabled }})</button>
|
|
<button type="button" class="btn btn-secondary" ng-click="$ctrl.openComponentModal()">Open a component modal!</button>
|
|
<button type="button" class="btn btn-secondary" ng-click="$ctrl.openMultipleModals()">
|
|
Open multiple modals at once
|
|
</button>
|
|
<div ng-show="$ctrl.selected">Selection from a modal: {{ $ctrl.selected }}</div>
|
|
<div class="modal-parent">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p><code>$uibModal</code> is a service to create modal windows.
|
|
Creating modals is straightforward: create a template and controller, and reference them when using <code>$uibModal</code>.</p>
|
|
<p>The <code>$uibModal</code> service has only one method: <code>open(options)</code>.</p>
|
|
<h3 id="-uibmodal-s-open-function">$uibModal's open function</h3>
|
|
<h4 id="options-parameter">options parameter</h4>
|
|
<ul>
|
|
<li><p><code>animation</code>
|
|
<em>(Type: <code>boolean</code>, Default: <code>true</code>)</em> -
|
|
Set to false to disable animations on new modal/backdrop. Does not toggle animations for modals/backdrops that are already displayed.</p>
|
|
</li>
|
|
<li><p><code>appendTo</code>
|
|
<em>(Type: <code>angular.element</code>, Default: <code>body</code>: Example: <code>$document.find('aside').eq(0)</code>)</em> -
|
|
Appends the modal to a specific element.</p>
|
|
</li>
|
|
<li><p><code>ariaDescribedBy</code>
|
|
<em>(Type: <code>string</code>, <code>my-modal-description</code>)</em> -
|
|
Sets the <a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><code>aria-describedby</code></a> property on the modal. The value should be an id (without the leading <code>#</code>) pointing to the element that describes your modal. Typically, this will be the text on your modal, but does not include something the user would interact with, like buttons or a form. Omitting this option will not impact sighted users but will weaken your accessibility support.</p>
|
|
</li>
|
|
<li><p><code>ariaLabelledBy</code>
|
|
<em>(Type: <code>string</code>, <code>my-modal-title</code>)</em> -
|
|
Sets the <a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a> property on the modal. The value should be an id (without the leading <code>#</code>) pointing to the element that labels your modal. Typically, this will be a header element. Omitting this option will not impact sighted users but will weaken your accessibility support.</p>
|
|
</li>
|
|
<li><p><code>backdrop</code>
|
|
<em>(Type: <code>boolean|string</code>, Default: <code>true</code>)</em> -
|
|
Controls presence of a backdrop. Allowed values: <code>true</code> (default), <code>false</code> (no backdrop), <code>'static'</code> (disables modal closing by click on the backdrop).</p>
|
|
</li>
|
|
<li><p><code>backdropClass</code>
|
|
<em>(Type: <code>string</code>)</em> -
|
|
Additional CSS class(es) to be added to a modal backdrop template.</p>
|
|
</li>
|
|
<li><p><code>bindToController</code>
|
|
<em>(Type: <code>boolean</code>, Default: <code>false</code>)</em> -
|
|
When used with <code>controllerAs</code> & set to <code>true</code>, it will bind the $scope properties onto the controller.</p>
|
|
</li>
|
|
<li><p><code>component</code>
|
|
<em>(Type: <code>string</code>, Example: <code>myComponent</code>)</em> -
|
|
A string reference to the component to be rendered that is registered with Angular's compiler. If using a directive, the directive must have <code>restrict: 'E'</code> and a template or templateUrl set.</p>
|
|
<p>It supports these bindings:</p>
|
|
<ul>
|
|
<li><p><code>close</code> - A method that can be used to close a modal, passing a result. The result must be passed in this format: <code>{$value: myResult}</code></p>
|
|
</li>
|
|
<li><p><code>dismiss</code> - A method that can be used to dismiss a modal, passing a result. The result must be passed in this format: <code>{$value: myRejectedResult}</code></p>
|
|
</li>
|
|
<li><p><code>modalInstance</code> - The modal instance. This is the same <code>$uibModalInstance</code> injectable found when using <code>controller</code>.</p>
|
|
</li>
|
|
<li><p><code>resolve</code> - An object of the modal resolve values. See <a href="#ui-router-resolves">UI Router resolves</a> for details.</p>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><p><code>controller</code>
|
|
<em>(Type: <code>function|string|array</code>, Example: <code>MyModalController</code>)</em> -
|
|
A controller for the modal instance, either a controller name as a string, or an inline controller function, optionally wrapped in array notation for dependency injection. Allows the controller-as syntax. Has a special <code>$uibModalInstance</code> injectable to access the modal instance.</p>
|
|
</li>
|
|
<li><p><code>controllerAs</code>
|
|
<em>(Type: <code>string</code>, Example: <code>ctrl</code>)</em> -
|
|
An alternative to the controller-as syntax. Requires the <code>controller</code> option to be provided as well.</p>
|
|
</li>
|
|
<li><p><code>keyboard</code> -
|
|
<em>(Type: <code>boolean</code>, Default: <code>true</code>)</em> -
|
|
Indicates whether the dialog should be closable by hitting the ESC key.</p>
|
|
</li>
|
|
<li><p><code>openedClass</code>
|
|
<em>(Type: <code>string</code>, Default: <code>modal-open</code>)</em> -
|
|
Class added to the <code>body</code> element when the modal is opened.</p>
|
|
</li>
|
|
<li><p><code>resolve</code>
|
|
<em>(Type: <code>Object</code>)</em> -
|
|
Members that will be resolved and passed to the controller as locals; it is equivalent of the <code>resolve</code> property in the router.</p>
|
|
</li>
|
|
<li><p><code>scope</code>
|
|
<em>(Type: <code>$scope</code>)</em> -
|
|
The parent scope instance to be used for the modal's content. Defaults to <code>$rootScope</code>.</p>
|
|
</li>
|
|
<li><p><code>size</code>
|
|
<em>(Type: <code>string</code>, Example: <code>lg</code>)</em> -
|
|
Optional suffix of modal window class. The value used is appended to the <code>modal-</code> class, i.e. a value of <code>sm</code> gives <code>modal-sm</code>.
|
|
(<i>Note: Since this is directly injected into the class for the modal, you can leverage additional Bootstrap modal classes, such as <code>modal-dialog-centered</code>.
|
|
Ex: <code>md modal-dialog-centered</code>.</i>)</p>
|
|
</li>
|
|
<li><p><code>scrollable</code>
|
|
<em>(Type: <code>boolean</code>, Default: <code>false</code>)</em> -
|
|
Indicates whether the dialog will allow its content to scroll. If set to true, this will add the class 'modal-dialog-scrollable' to the rendered modal. </p>
|
|
</li>
|
|
<li><p><code>template</code>
|
|
<em>(Type: <code>string</code>)</em> -
|
|
Inline template representing the modal's content.</p>
|
|
</li>
|
|
<li><p><code>templateUrl</code>
|
|
<em>(Type: <code>string</code>)</em> -
|
|
A path to a template representing modal's content. You need either a <code>template</code> or <code>templateUrl</code>.</p>
|
|
</li>
|
|
<li><p><code>windowClass</code>
|
|
<em>(Type: <code>string</code>)</em> -
|
|
Additional CSS class(es) to be added to a modal window template.</p>
|
|
</li>
|
|
<li><p><code>windowTemplateUrl</code>
|
|
<em>(Type: <code>string</code>, Default: <code>uib/template/modal/window.html</code>)</em> -
|
|
A path to a template overriding modal's window template.</p>
|
|
</li>
|
|
<li><p><code>windowTopClass</code>
|
|
<em>(Type: <code>string</code>)</em> -
|
|
CSS class(es) to be added to the top modal window.</p>
|
|
</li>
|
|
</ul>
|
|
<p>Global defaults may be set for <code>$uibModal</code> via <code>$uibModalProvider.options</code>.</p>
|
|
<h4 id="return">return</h4>
|
|
<p>The <code>open</code> method returns a modal instance, an object with the following properties:</p>
|
|
<ul>
|
|
<li><p><code>close(result)</code>
|
|
<em>(Type: <code>function</code>)</em> -
|
|
Can be used to close a modal, passing a result.</p>
|
|
</li>
|
|
<li><p><code>dismiss(reason)</code>
|
|
<em>(Type: <code>function</code>)</em> -
|
|
Can be used to dismiss a modal, passing a reason.</p>
|
|
</li>
|
|
<li><p><code>result</code>
|
|
<em>(Type: <code>promise</code>)</em> -
|
|
Is resolved when a modal is closed and rejected when a modal is dismissed.</p>
|
|
</li>
|
|
<li><p><code>opened</code>
|
|
<em>(Type: <code>promise</code>)</em> -
|
|
Is resolved when a modal gets opened after downloading content's template and resolving all variables.</p>
|
|
</li>
|
|
<li><p><code>closed</code>
|
|
<em>(Type: <code>promise</code>)</em> -
|
|
Is resolved when a modal is closed and the animation completes.</p>
|
|
</li>
|
|
<li><p><code>rendered</code>
|
|
<em>(Type: <code>promise</code>)</em> -
|
|
Is resolved when a modal is rendered.</p>
|
|
</li>
|
|
</ul>
|
|
<hr>
|
|
<p>The scope associated with modal's content is augmented with:</p>
|
|
<ul>
|
|
<li><p><code>$close(result)</code>
|
|
<em>(Type: <code>function</code>)</em> -
|
|
A method that can be used to close a modal, passing a result.</p>
|
|
</li>
|
|
<li><p><code>$dismiss(reason)</code>
|
|
<em>(Type: <code>function</code>)</em> -
|
|
A method that can be used to dismiss a modal, passing a reason.</p>
|
|
</li>
|
|
</ul>
|
|
<p>Those methods make it easy to close a modal window without a need to create a dedicated controller.</p>
|
|
<p>Also, when using <code>bindToController</code>, you can define an <code>$onInit</code> method in the controller that will fire upon initialization.</p>
|
|
<hr>
|
|
<p>Events fired:</p>
|
|
<ul>
|
|
<li><p><code>$uibUnscheduledDestruction</code> -
|
|
This event is fired if the $scope is destroyed via unexpected mechanism, such as it being passed in the modal options and a $route/$state transition occurs. The modal will also be dismissed.</p>
|
|
</li>
|
|
<li><p><code>modal.closing</code> -
|
|
This event is broadcast to the modal scope before the modal closes. If the listener calls preventDefault() on the event, then the modal will remain open.
|
|
Also, the <code>$close</code> and <code>$dismiss</code> methods returns true if the event was executed. This event also includes a parameter for the result/reason and a boolean that indicates whether the modal is being closed (true) or dismissed.</p>
|
|
</li>
|
|
</ul>
|
|
<h5 id="ui-router-resolves">UI Router resolves</h5>
|
|
<p>If one wants to have the modal resolve using <a href="https://github.com/angular-ui/ui-router">UI Router's</a> pre-1.0 resolve mechanism, one can call <code>$uibResolve.setResolver('$resolve')</code> in the configuration phase of the application. One can also provide a custom resolver as well, as long as the signature conforms to UI Router's <a href="http://angular-ui.github.io/ui-router/site/#/api/ui.router.util.$resolve">$resolve</a>.</p>
|
|
<p>When the modal is opened with a controller, a <code>$resolve</code> object is exposed on the template with the resolved values from the resolve object. If using the component option, see details on how to access this object in component section of the modal documentation.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'modal')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo">
|
|
<script type="text/ng-template" id="myModalContent.html">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
|
|
</div>
|
|
<div class="modal-body" id="modal-body">
|
|
<ul>
|
|
<li ng-repeat="item in $ctrl.items">
|
|
<a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item">{{ item }}</a>
|
|
</li>
|
|
</ul>
|
|
Selected: <b>{{ $ctrl.selected.item }}</b>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
|
|
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
|
|
</div>
|
|
</script>
|
|
<script type="text/ng-template" id="stackedModal.html">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
|
|
</div>
|
|
<div class="modal-body" id="modal-body-{{name}}">
|
|
Having multiple modals open at once is probably bad UX but it's technically possible.
|
|
</div>
|
|
</script>
|
|
|
|
<button type="button" class="btn btn-secondary" ng-click="$ctrl.open()">Open me!</button>
|
|
<button type="button" class="btn btn-secondary" ng-click="$ctrl.open('lg')">Large modal</button>
|
|
<button type="button" class="btn btn-secondary" ng-click="$ctrl.open('sm')">Small modal</button>
|
|
<button type="button"
|
|
class="btn btn-secondary"
|
|
ng-click="$ctrl.open('sm', '.modal-parent')">
|
|
Modal appended to a custom parent
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" ng-click="$ctrl.toggleAnimation()">Toggle Animation ({{ $ctrl.animationsEnabled }})</button>
|
|
<button type="button" class="btn btn-secondary" ng-click="$ctrl.openComponentModal()">Open a component modal!</button>
|
|
<button type="button" class="btn btn-secondary" ng-click="$ctrl.openMultipleModals()">
|
|
Open multiple modals at once
|
|
</button>
|
|
<div ng-show="$ctrl.selected">Selection from a modal: {{ $ctrl.selected }}</div>
|
|
<div class="modal-parent">
|
|
</div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log, $document) {
|
|
var $ctrl = this;
|
|
$ctrl.items = ['item1', 'item2', 'item3'];
|
|
|
|
$ctrl.animationsEnabled = true;
|
|
|
|
$ctrl.open = function (size, parentSelector) {
|
|
var parentElem = parentSelector ?
|
|
angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
|
|
var modalInstance = $uibModal.open({
|
|
animation: $ctrl.animationsEnabled,
|
|
ariaLabelledBy: 'modal-title',
|
|
ariaDescribedBy: 'modal-body',
|
|
templateUrl: 'myModalContent.html',
|
|
controller: 'ModalInstanceCtrl',
|
|
controllerAs: '$ctrl',
|
|
size: size,
|
|
appendTo: parentElem,
|
|
resolve: {
|
|
items: function () {
|
|
return $ctrl.items;
|
|
}
|
|
}
|
|
});
|
|
|
|
modalInstance.result.then(function (selectedItem) {
|
|
$ctrl.selected = selectedItem;
|
|
}, function () {
|
|
$log.info('Modal dismissed at: ' + new Date());
|
|
});
|
|
};
|
|
|
|
$ctrl.openComponentModal = function () {
|
|
var modalInstance = $uibModal.open({
|
|
animation: $ctrl.animationsEnabled,
|
|
component: 'modalComponent',
|
|
resolve: {
|
|
items: function () {
|
|
return $ctrl.items;
|
|
}
|
|
}
|
|
});
|
|
|
|
modalInstance.result.then(function (selectedItem) {
|
|
$ctrl.selected = selectedItem;
|
|
}, function () {
|
|
$log.info('modal-component dismissed at: ' + new Date());
|
|
});
|
|
};
|
|
|
|
$ctrl.openMultipleModals = function () {
|
|
$uibModal.open({
|
|
animation: $ctrl.animationsEnabled,
|
|
ariaLabelledBy: 'modal-title-bottom',
|
|
ariaDescribedBy: 'modal-body-bottom',
|
|
templateUrl: 'stackedModal.html',
|
|
size: 'sm',
|
|
controller: function($scope) {
|
|
$scope.name = 'bottom';
|
|
}
|
|
});
|
|
|
|
$uibModal.open({
|
|
animation: $ctrl.animationsEnabled,
|
|
ariaLabelledBy: 'modal-title-top',
|
|
ariaDescribedBy: 'modal-body-top',
|
|
templateUrl: 'stackedModal.html',
|
|
size: 'sm',
|
|
controller: function($scope) {
|
|
$scope.name = 'top';
|
|
}
|
|
});
|
|
};
|
|
|
|
$ctrl.toggleAnimation = function () {
|
|
$ctrl.animationsEnabled = !$ctrl.animationsEnabled;
|
|
};
|
|
});
|
|
|
|
// Please note that $uibModalInstance represents a modal window (instance) dependency.
|
|
// It is not the same as the $uibModal service used above.
|
|
|
|
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
|
|
var $ctrl = this;
|
|
$ctrl.items = items;
|
|
$ctrl.selected = {
|
|
item: $ctrl.items[0]
|
|
};
|
|
|
|
$ctrl.ok = function () {
|
|
$uibModalInstance.close($ctrl.selected.item);
|
|
};
|
|
|
|
$ctrl.cancel = function () {
|
|
$uibModalInstance.dismiss('cancel');
|
|
};
|
|
});
|
|
|
|
// Please note that the close and dismiss bindings are from $uibModalInstance.
|
|
|
|
angular.module('ui.bootstrap.demo').component('modalComponent', {
|
|
templateUrl: 'myModalContent.html',
|
|
bindings: {
|
|
resolve: '<',
|
|
close: '&',
|
|
dismiss: '&'
|
|
},
|
|
controller: function () {
|
|
var $ctrl = this;
|
|
|
|
$ctrl.$onInit = function () {
|
|
$ctrl.items = $ctrl.resolve.items;
|
|
$ctrl.selected = {
|
|
item: $ctrl.items[0]
|
|
};
|
|
};
|
|
|
|
$ctrl.ok = function () {
|
|
$ctrl.close({$value: $ctrl.selected.item});
|
|
};
|
|
|
|
$ctrl.cancel = function () {
|
|
$ctrl.dismiss({$value: 'cancel'});
|
|
};
|
|
}
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log, $document) {
|
|
var $ctrl = this;
|
|
$ctrl.items = ['item1', 'item2', 'item3'];
|
|
|
|
$ctrl.animationsEnabled = true;
|
|
|
|
$ctrl.open = function (size, parentSelector) {
|
|
var parentElem = parentSelector ?
|
|
angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
|
|
var modalInstance = $uibModal.open({
|
|
animation: $ctrl.animationsEnabled,
|
|
ariaLabelledBy: 'modal-title',
|
|
ariaDescribedBy: 'modal-body',
|
|
templateUrl: 'myModalContent.html',
|
|
controller: 'ModalInstanceCtrl',
|
|
controllerAs: '$ctrl',
|
|
size: size,
|
|
appendTo: parentElem,
|
|
resolve: {
|
|
items: function () {
|
|
return $ctrl.items;
|
|
}
|
|
}
|
|
});
|
|
|
|
modalInstance.result.then(function (selectedItem) {
|
|
$ctrl.selected = selectedItem;
|
|
}, function () {
|
|
$log.info('Modal dismissed at: ' + new Date());
|
|
});
|
|
};
|
|
|
|
$ctrl.openComponentModal = function () {
|
|
var modalInstance = $uibModal.open({
|
|
animation: $ctrl.animationsEnabled,
|
|
component: 'modalComponent',
|
|
resolve: {
|
|
items: function () {
|
|
return $ctrl.items;
|
|
}
|
|
}
|
|
});
|
|
|
|
modalInstance.result.then(function (selectedItem) {
|
|
$ctrl.selected = selectedItem;
|
|
}, function () {
|
|
$log.info('modal-component dismissed at: ' + new Date());
|
|
});
|
|
};
|
|
|
|
$ctrl.openMultipleModals = function () {
|
|
$uibModal.open({
|
|
animation: $ctrl.animationsEnabled,
|
|
ariaLabelledBy: 'modal-title-bottom',
|
|
ariaDescribedBy: 'modal-body-bottom',
|
|
templateUrl: 'stackedModal.html',
|
|
size: 'sm',
|
|
controller: function($scope) {
|
|
$scope.name = 'bottom';
|
|
}
|
|
});
|
|
|
|
$uibModal.open({
|
|
animation: $ctrl.animationsEnabled,
|
|
ariaLabelledBy: 'modal-title-top',
|
|
ariaDescribedBy: 'modal-body-top',
|
|
templateUrl: 'stackedModal.html',
|
|
size: 'sm',
|
|
controller: function($scope) {
|
|
$scope.name = 'top';
|
|
}
|
|
});
|
|
};
|
|
|
|
$ctrl.toggleAnimation = function () {
|
|
$ctrl.animationsEnabled = !$ctrl.animationsEnabled;
|
|
};
|
|
});
|
|
|
|
// Please note that $uibModalInstance represents a modal window (instance) dependency.
|
|
// It is not the same as the $uibModal service used above.
|
|
|
|
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
|
|
var $ctrl = this;
|
|
$ctrl.items = items;
|
|
$ctrl.selected = {
|
|
item: $ctrl.items[0]
|
|
};
|
|
|
|
$ctrl.ok = function () {
|
|
$uibModalInstance.close($ctrl.selected.item);
|
|
};
|
|
|
|
$ctrl.cancel = function () {
|
|
$uibModalInstance.dismiss('cancel');
|
|
};
|
|
});
|
|
|
|
// Please note that the close and dismiss bindings are from $uibModalInstance.
|
|
|
|
angular.module('ui.bootstrap.demo').component('modalComponent', {
|
|
templateUrl: 'myModalContent.html',
|
|
bindings: {
|
|
resolve: '<',
|
|
close: '&',
|
|
dismiss: '&'
|
|
},
|
|
controller: function () {
|
|
var $ctrl = this;
|
|
|
|
$ctrl.$onInit = function () {
|
|
$ctrl.items = $ctrl.resolve.items;
|
|
$ctrl.selected = {
|
|
item: $ctrl.items[0]
|
|
};
|
|
};
|
|
|
|
$ctrl.ok = function () {
|
|
$ctrl.close({$value: $ctrl.selected.item});
|
|
};
|
|
|
|
$ctrl.cancel = function () {
|
|
$ctrl.dismiss({$value: 'cancel'});
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<section id="pager">
|
|
<div class="page-header">
|
|
<h1>Pager<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/pager">ui.bootstrap.pager</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="PagerDemoCtrl">
|
|
<h4>Pager</h4>
|
|
<pre>You are currently on page {{currentPage}}</pre>
|
|
<ul uib-pager total-items="totalItems" ng-model="currentPage"></ul>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>A lightweight pager directive that is focused on providing previous/next paging functionality</p>
|
|
<h3 id="uib-pager-settings">uib-pager settings</h3>
|
|
<ul>
|
|
<li><p><code>align</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Whether to align each link to the sides.</p>
|
|
</li>
|
|
<li><p><code>items-per-page</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>10</code>)</em> -
|
|
Maximum number of items per page. A value less than one indicates all items on one page.</p>
|
|
</li>
|
|
<li><p><code>next-text</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>Next »</code>)</em> -
|
|
Text for Next button.</p>
|
|
</li>
|
|
<li><p><code>ng-disabled</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Used to disable the pager component.</p>
|
|
</li>
|
|
<li><p><code>ng-model</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
Current page number. First page is 1.</p>
|
|
</li>
|
|
<li><p><code>num-pages</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">readonly</small>
|
|
<em>(Default: <code>angular.noop</code>)</em> -
|
|
An optional expression assigned the total number of pages to display.</p>
|
|
</li>
|
|
<li><p><code>previous-text</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>« Previous</code>)</em> -
|
|
Text for Previous button.</p>
|
|
</li>
|
|
<li><p><code>template-url</code>
|
|
<em>(Default: <code>uib/template/pager/pager.html</code>)</em> -
|
|
Override the template for the component with a custom provided template.</p>
|
|
</li>
|
|
<li><p><code>total-items</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
Total number of items in all pages.</p>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'pager')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="PagerDemoCtrl">
|
|
<h4>Pager</h4>
|
|
<pre>You are currently on page {{currentPage}}</pre>
|
|
<ul uib-pager total-items="totalItems" ng-model="currentPage"></ul>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('PagerDemoCtrl', function($scope) {
|
|
$scope.totalItems = 64;
|
|
$scope.currentPage = 4;
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('PagerDemoCtrl', function($scope) {
|
|
$scope.totalItems = 64;
|
|
$scope.currentPage = 4;
|
|
});
|
|
</script>
|
|
|
|
<section id="pagination">
|
|
<div class="page-header">
|
|
<h1>Pagination<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/pagination">ui.bootstrap.pagination</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="PaginationDemoCtrl">
|
|
<h4>Default</h4>
|
|
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></ul>
|
|
<ul uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="‹" next-text="›" first-text="«" last-text="»"></ul>
|
|
<ul uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></ul>
|
|
<ul uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></ul>
|
|
<pre>The selected page no: {{currentPage}}</pre>
|
|
<button type="button" class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>
|
|
|
|
<hr />
|
|
<h4>Limit the maximum visible buttons</h4>
|
|
<h6><code>rotate</code> defaulted to <code>true</code>:</h6>
|
|
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages"></ul>
|
|
<h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>
|
|
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></ul>
|
|
<h6><code>rotate</code> set to <code>false</code>:</h6>
|
|
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false"></ul>
|
|
<h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> defaulted to <code>true</code>:</h6>
|
|
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></ul>
|
|
<h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> set to <code>false</code>:</h6>
|
|
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></ul>
|
|
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>A lightweight pagination directive that is focused on ... providing pagination & will take care of visualising a pagination bar and enable / disable buttons correctly!</p>
|
|
<h3 id="uib-pagination-settings">uib-pagination settings</h3>
|
|
<ul>
|
|
<li><p><code>boundary-links</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether to display First / Last buttons.</p>
|
|
</li>
|
|
<li><p><code>boundary-link-numbers</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether to always display the first and last page numbers. If <code>max-size</code> is smaller than the number of pages, then the first and last page numbers are still shown with ellipses in-between as necessary. NOTE: <code>max-size</code> refers to the center of the range. This option may add up to 2 more numbers on each side of the displayed range for the end value and what would be an ellipsis but is replaced by a number because it is sequential.</p>
|
|
</li>
|
|
<li><p><code>direction-links</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Whether to display Previous / Next buttons.</p>
|
|
</li>
|
|
<li><p><code>first-text</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>First</code>)</em> -
|
|
Text for First button.</p>
|
|
</li>
|
|
<li><p><code>force-ellipses</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Also displays ellipses when <code>rotate</code> is true and <code>max-size</code> is smaller than the number of pages.</p>
|
|
</li>
|
|
<li><p><code>items-per-page</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>10</code>)</em> -
|
|
Maximum number of items per page. A value less than one indicates all items on one page.</p>
|
|
</li>
|
|
<li><p><code>last-text</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>Last</code>)</em> -
|
|
Text for Last button.</p>
|
|
</li>
|
|
<li><p><code>max-size</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
Limit number for pagination size.</p>
|
|
</li>
|
|
<li><p><code>next-text</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>Next</code>)</em> -
|
|
Text for Next button.</p>
|
|
</li>
|
|
<li><p><code>ng-change</code>
|
|
<small class="badge">$</small> -
|
|
This can be used to call a function whenever the page changes.</p>
|
|
</li>
|
|
<li><p><code>ng-disabled</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Used to disable the pagination component.</p>
|
|
</li>
|
|
<li><p><code>ng-model</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
Current page number. First page is 1.</p>
|
|
</li>
|
|
<li><p><code>num-pages</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">readonly</small>
|
|
<em>(Default: <code>angular.noop</code>)</em> -
|
|
An optional expression assigned the total number of pages to display.</p>
|
|
</li>
|
|
<li><p><code>page-label</code>
|
|
<em>(Default: <code>angular.identity</code>)</em> -
|
|
An optional expression to override the page label based on passing the current page indexes. Supports page number with <code>$page</code> in the template.</p>
|
|
</li>
|
|
<li><p><code>previous-text</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>Previous</code>)</em> -
|
|
Text for Previous button.</p>
|
|
</li>
|
|
<li><p><code>rotate</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Whether to keep current page in the middle of the visible ones.</p>
|
|
</li>
|
|
<li><p><code>template-url</code>
|
|
<em>(Default: <code>uib/template/pagination/pagination.html</code>)</em> -
|
|
Override the template for the component with a custom provided template</p>
|
|
</li>
|
|
<li><p><code>total-items</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
Total number of items in all pages.</p>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'pagination')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="PaginationDemoCtrl">
|
|
<h4>Default</h4>
|
|
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></ul>
|
|
<ul uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></ul>
|
|
<ul uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></ul>
|
|
<ul uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></ul>
|
|
<pre>The selected page no: {{currentPage}}</pre>
|
|
<button type="button" class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>
|
|
|
|
<hr />
|
|
<h4>Limit the maximum visible buttons</h4>
|
|
<h6><code>rotate</code> defaulted to <code>true</code>:</h6>
|
|
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages"></ul>
|
|
<h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>
|
|
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></ul>
|
|
<h6><code>rotate</code> set to <code>false</code>:</h6>
|
|
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false"></ul>
|
|
<h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> defaulted to <code>true</code>:</h6>
|
|
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></ul>
|
|
<h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> set to <code>false</code>:</h6>
|
|
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></ul>
|
|
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
|
|
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) {
|
|
$scope.totalItems = 64;
|
|
$scope.currentPage = 4;
|
|
|
|
$scope.setPage = function (pageNo) {
|
|
$scope.currentPage = pageNo;
|
|
};
|
|
|
|
$scope.pageChanged = function() {
|
|
$log.log('Page changed to: ' + $scope.currentPage);
|
|
};
|
|
|
|
$scope.maxSize = 5;
|
|
$scope.bigTotalItems = 175;
|
|
$scope.bigCurrentPage = 1;
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) {
|
|
$scope.totalItems = 64;
|
|
$scope.currentPage = 4;
|
|
|
|
$scope.setPage = function (pageNo) {
|
|
$scope.currentPage = pageNo;
|
|
};
|
|
|
|
$scope.pageChanged = function() {
|
|
$log.log('Page changed to: ' + $scope.currentPage);
|
|
};
|
|
|
|
$scope.maxSize = 5;
|
|
$scope.bigTotalItems = 175;
|
|
$scope.bigCurrentPage = 1;
|
|
});
|
|
</script>
|
|
|
|
<section id="popover">
|
|
<div class="page-header">
|
|
<h1>Popover<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/popover">ui.bootstrap.popover</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="PopoverDemoCtrl">
|
|
<h4>Dynamic</h4>
|
|
<div class="form-group">
|
|
<label>Popup Text:</label>
|
|
<input type="text" ng-model="dynamicPopover.content" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Popup Title:</label>
|
|
<input type="text" ng-model="dynamicPopover.title" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Popup Template:</label>
|
|
<input type="text" ng-model="dynamicPopover.templateUrl" class="form-control">
|
|
</div>
|
|
<button uib-popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-secondary">Dynamic Popover</button>
|
|
|
|
<button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-secondary">Popover With Template</button>
|
|
|
|
<script type="text/ng-template" id="myPopoverTemplate.html">
|
|
<div>{{dynamicPopover.content}}</div>
|
|
<div class="form-group">
|
|
<label>Popup Title:</label>
|
|
<input type="text" ng-model="dynamicPopover.title" class="form-control">
|
|
</div>
|
|
</script>
|
|
<hr />
|
|
<h4>Positional</h4>
|
|
<div class="form-group">
|
|
<label>Popover placement</label>
|
|
<select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
|
|
</div>
|
|
<button popover-placement="{{placement.selected}}" uib-popover="On the {{placement.selected}}" type="button" class="btn btn-secondary">Popover {{placement.selected}}</button>
|
|
|
|
<hr />
|
|
<h4>Triggers</h4>
|
|
<p>
|
|
<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" type="button" class="btn btn-secondary">Mouseenter</button>
|
|
</p>
|
|
<input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="'focus'" class="form-control">
|
|
|
|
<hr />
|
|
<h4>Other</h4>
|
|
<button popover-animation="true" uib-popover="I fade in and out!" type="button" class="btn btn-secondary">fading</button>
|
|
<button uib-popover="I have a title!" popover-title="The title." type="button" class="btn btn-secondary">title</button>
|
|
<button uib-popover="I am activated manually" popover-is-open="popoverIsOpen" ng-click="popoverIsOpen = !popoverIsOpen" type="button" class="btn btn-secondary">Toggle popover</button>
|
|
<button uib-popover-html="htmlPopover" class="btn btn-secondary">HTML Popover</button>
|
|
<button uib-popover-html="'<b>HTML</b>, <i>inline</i>'" class="btn btn-secondary">HTML Popover (inline)</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>A lightweight, extensible directive for fancy popover creation. The popover
|
|
directive supports multiple placements, optional transition animation, and more.</p>
|
|
<p>Like the Bootstrap jQuery plugin, the popover <strong>requires</strong> the tooltip
|
|
module.</p>
|
|
<p><strong>Note to mobile developers</strong>: Please note that while popovers may work correctly on mobile devices (including tablets),
|
|
we have made the decision to not officially support such a use-case because it does not make sense from a UX perspective.</p>
|
|
<p>There are three versions of the popover: <code>uib-popover</code> and <code>uib-popover-template</code>, and <code>uib-popover-html</code>:</p>
|
|
<ul>
|
|
<li><code>uib-popover</code> -
|
|
Takes text only and will escape any HTML provided for the popover body.</li>
|
|
<li><code>uib-popover-html</code>
|
|
<small class="badge">$</small> -
|
|
Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the <code>uib-popover-template</code> attribute option instead. <em>The user is responsible for ensuring the content is safe to put into the DOM!</em></li>
|
|
<li><code>uib-popover-template</code>
|
|
<small class="badge">$</small> -
|
|
A URL representing the location of a template to use for the popover body. Note that the contents of this template need to be wrapped in a tag, e.g., <code><div></div></code>.</li>
|
|
</ul>
|
|
<h3 id="uib-popover-settings">uib-popover-* settings</h3>
|
|
<p>All these settings are available for the three types of popovers.</p>
|
|
<ul>
|
|
<li><p><code>popover-animation</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>, Config: <code>animation</code>)</em> -
|
|
Should it fade in and out?</p>
|
|
</li>
|
|
<li><p><code>popover-append-to-body</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>false</code>, Config: <code>appendToBody</code>)</em> -
|
|
Should the popover be appended to '$body' instead of the parent element?</p>
|
|
</li>
|
|
<li><p><code>popover-class</code> -
|
|
Custom class to be applied to the popover.</p>
|
|
</li>
|
|
<li><p><code>popover-enable</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Is it enabled? It will enable or disable the configured popover-trigger.</p>
|
|
</li>
|
|
<li><p><code>popover-is-open</code>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether to show the popover.</p>
|
|
</li>
|
|
<li><p><code>popover-placement</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>top</code>, Config: <code>placement</code>)</em> -
|
|
Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popover will attempt to position where it fits in the closest scrollable ancestor. Accepts:</p>
|
|
<ul>
|
|
<li><code>top</code> - popover on top, horizontally centered on host element.</li>
|
|
<li><code>top-left</code> - popover on top, left edge aligned with host element left edge.</li>
|
|
<li><code>top-right</code> - popover on top, right edge aligned with host element right edge.</li>
|
|
<li><code>bottom</code> - popover on bottom, horizontally centered on host element.</li>
|
|
<li><code>bottom-left</code> - popover on bottom, left edge aligned with host element left edge.</li>
|
|
<li><code>bottom-right</code> - popover on bottom, right edge aligned with host element right edge.</li>
|
|
<li><code>left</code> - popover on left, vertically centered on host element.</li>
|
|
<li><code>left-top</code> - popover on left, top edge aligned with host element top edge.</li>
|
|
<li><code>left-bottom</code> - popover on left, bottom edge aligned with host element bottom edge.</li>
|
|
<li><code>right</code> - popover on right, vertically centered on host element.</li>
|
|
<li><code>right-top</code> - popover on right, top edge aligned with host element top edge.</li>
|
|
<li><code>right-bottom</code> - popover on right, bottom edge aligned with host element bottom edge.</li>
|
|
</ul>
|
|
</li>
|
|
<li><p><code>popover-popup-close-delay</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>0</code>, Config: <code>popupCloseDelay</code>)</em> -
|
|
For how long should the popover remain open after the close trigger event?</p>
|
|
</li>
|
|
<li><p><code>popover-popup-delay</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>0</code>, Config: <code>popupDelay</code>)</em> -
|
|
Popup delay in milliseconds until it opens.</p>
|
|
</li>
|
|
<li><p><code>popover-title</code> -
|
|
A string to display as a fancy title.</p>
|
|
</li>
|
|
<li><p><code>popover-trigger</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>'click'</code>)</em> -
|
|
What should trigger a show of the popover? Supports a space separated list of event names, or objects (see below).</p>
|
|
</li>
|
|
</ul>
|
|
<p><strong>Note:</strong> To configure the tooltips, you need to do it on <code>$uibTooltipProvider</code> (also see below).</p>
|
|
<h3 id="triggers">Triggers</h3>
|
|
<p>The following show triggers are supported out of the box, along with their provided hide triggers:</p>
|
|
<ul>
|
|
<li><code>mouseenter</code>: <code>mouseleave</code></li>
|
|
<li><code>click</code>: <code>click</code></li>
|
|
<li><code>outsideClick</code>: <code>outsideClick</code></li>
|
|
<li><code>focus</code>: <code>blur</code></li>
|
|
<li><code>none</code></li>
|
|
</ul>
|
|
<p>The <code>outsideClick</code> trigger will cause the popover to toggle on click, and hide when anything else is clicked.</p>
|
|
<p>For any non-supported value, the trigger will be used to both show and hide the
|
|
popover. Using the 'none' trigger will disable the internal trigger(s), one can
|
|
then use the <code>popover-is-open</code> attribute exclusively to show and hide the popover.</p>
|
|
<h3 id="-uibtooltipprovider">$uibTooltipProvider</h3>
|
|
<p>Through the <code>$uibTooltipProvider</code>, you can change the way tooltips and popovers
|
|
behave by default; the attributes above always take precedence. The following
|
|
methods are available:</p>
|
|
<ul>
|
|
<li><p><code>setTriggers(obj)</code>
|
|
<em>(Example: <code>{ 'openTrigger': 'closeTrigger' }</code>)</em> -
|
|
Extends the default trigger mappings mentioned above with mappings of your own.</p>
|
|
</li>
|
|
<li><p><code>options(obj)</code> -
|
|
Provide a set of defaults for certain tooltip and popover attributes. Currently supports the ones with the <small class="badge">C</small> badge.</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="known-issues">Known issues</h3>
|
|
<p>For Safari 7+ support, if you want to use <strong>focus</strong> <code>popover-trigger</code>, you need to use an anchor tag with a tab index. For example:</p>
|
|
<pre><code><a tabindex="0" uib-popover="Test" popover-trigger="focus" class="btn btn-secondary">
|
|
Click Me
|
|
</a>
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'popover')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="PopoverDemoCtrl">
|
|
<h4>Dynamic</h4>
|
|
<div class="form-group">
|
|
<label>Popup Text:</label>
|
|
<input type="text" ng-model="dynamicPopover.content" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Popup Title:</label>
|
|
<input type="text" ng-model="dynamicPopover.title" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Popup Template:</label>
|
|
<input type="text" ng-model="dynamicPopover.templateUrl" class="form-control">
|
|
</div>
|
|
<button uib-popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-secondary">Dynamic Popover</button>
|
|
|
|
<button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-secondary">Popover With Template</button>
|
|
|
|
<script type="text/ng-template" id="myPopoverTemplate.html">
|
|
<div>{{dynamicPopover.content}}</div>
|
|
<div class="form-group">
|
|
<label>Popup Title:</label>
|
|
<input type="text" ng-model="dynamicPopover.title" class="form-control">
|
|
</div>
|
|
</script>
|
|
<hr />
|
|
<h4>Positional</h4>
|
|
<div class="form-group">
|
|
<label>Popover placement</label>
|
|
<select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
|
|
</div>
|
|
<button popover-placement="{{placement.selected}}" uib-popover="On the {{placement.selected}}" type="button" class="btn btn-secondary">Popover {{placement.selected}}</button>
|
|
|
|
<hr />
|
|
<h4>Triggers</h4>
|
|
<p>
|
|
<button uib-popover="I appeared on mouse enter!" popover-trigger="'mouseenter'" type="button" class="btn btn-secondary">Mouseenter</button>
|
|
</p>
|
|
<input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="'focus'" class="form-control">
|
|
|
|
<hr />
|
|
<h4>Other</h4>
|
|
<button popover-animation="true" uib-popover="I fade in and out!" type="button" class="btn btn-secondary">fading</button>
|
|
<button uib-popover="I have a title!" popover-title="The title." type="button" class="btn btn-secondary">title</button>
|
|
<button uib-popover="I am activated manually" popover-is-open="popoverIsOpen" ng-click="popoverIsOpen = !popoverIsOpen" type="button" class="btn btn-secondary">Toggle popover</button>
|
|
<button uib-popover-html="htmlPopover" class="btn btn-secondary">HTML Popover</button>
|
|
<button uib-popover-html="'<b>HTML</b>, <i>inline</i>'" class="btn btn-secondary">HTML Popover (inline)</button>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
|
|
$scope.dynamicPopover = {
|
|
content: 'Hello, World!',
|
|
templateUrl: 'myPopoverTemplate.html',
|
|
title: 'Title'
|
|
};
|
|
|
|
$scope.placement = {
|
|
options: [
|
|
'top',
|
|
'top-left',
|
|
'top-right',
|
|
'bottom',
|
|
'bottom-left',
|
|
'bottom-right',
|
|
'left',
|
|
'left-top',
|
|
'left-bottom',
|
|
'right',
|
|
'right-top',
|
|
'right-bottom'
|
|
],
|
|
selected: 'top'
|
|
};
|
|
|
|
$scope.htmlPopover = $sce.trustAsHtml('<b style="color: red">I can</b> have <div class="label label-success">HTML</div> content');
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
|
|
$scope.dynamicPopover = {
|
|
content: 'Hello, World!',
|
|
templateUrl: 'myPopoverTemplate.html',
|
|
title: 'Title'
|
|
};
|
|
|
|
$scope.placement = {
|
|
options: [
|
|
'top',
|
|
'top-left',
|
|
'top-right',
|
|
'bottom',
|
|
'bottom-left',
|
|
'bottom-right',
|
|
'left',
|
|
'left-top',
|
|
'left-bottom',
|
|
'right',
|
|
'right-top',
|
|
'right-bottom'
|
|
],
|
|
selected: 'top'
|
|
};
|
|
|
|
$scope.htmlPopover = $sce.trustAsHtml('<b style="color: red">I can</b> have <div class="label label-success">HTML</div> content');
|
|
});
|
|
</script>
|
|
|
|
<section id="position">
|
|
<div class="page-header">
|
|
<h1>Position<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/position">ui.bootstrap.position</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="PositionDemoCtrl">
|
|
<h4>$uibPosition service</h4>
|
|
<div id="posdemoparent" ng-style="{'overflow': (parentScrollable && 'scroll'), 'position': (parentRelative && 'relative')}" style="border: 1px solid #ccc; padding: 15px;">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="parentScrollable"> Parent scrollable
|
|
</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="parentRelative"> Parent relative
|
|
</label>
|
|
</div>
|
|
<button id="posdemobtn" class="btn btn-secondary" ng-click="getValues()">Get values</button>
|
|
|
|
<div id="posdemodiv" style="width: 100px; height: 100px; margin: 15px 0; padding: 10px; background-color: #f8f8f8; border: 1px solid #ccc;">
|
|
Demo element
|
|
</div>
|
|
</div>
|
|
<br />
|
|
offsetParent: {{elemVals.offsetParent}}
|
|
<br />
|
|
scrollParent: {{elemVals.scrollParent}}
|
|
<br />
|
|
scrollbarWidth: {{scrollbarWidth}}
|
|
<br />
|
|
position: {{elemVals.position}}
|
|
<br />
|
|
offset: {{elemVals.offset}}
|
|
<br />
|
|
viewportOffset: {{elemVals.viewportOffset}}
|
|
<br />
|
|
positionElements: {{elemVals.positionElements}}
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>The <code>$uibPosition</code> service provides a set of DOM utilities used internally to absolute-position an element in relation to another element (tooltips, popovers, typeaheads etc...).</p>
|
|
<h4 id="getrawnode-element-">getRawNode(element)</h4>
|
|
<p>Takes a jQuery/jqLite element and converts it to a raw DOM element.</p>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li><code>element</code>
|
|
<em>(Type: <code>object</code>)</em> -
|
|
The element to convert.</li>
|
|
</ul>
|
|
<h5 id="returns">returns</h5>
|
|
<ul>
|
|
<li><em>(Type: <code>element</code>)</em> -
|
|
A raw DOM element.</li>
|
|
</ul>
|
|
<h4 id="parsestyle-element-">parseStyle(element)</h4>
|
|
<p>Parses a numeric style value to a number. Strips units and will return 0 for invalid (NaN) numbers.</p>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li><code>value</code>
|
|
<em>(Type: <code>string</code>)</em> -
|
|
The style value to parse.</li>
|
|
</ul>
|
|
<h5 id="returns">returns</h5>
|
|
<ul>
|
|
<li><em>(Type: <code>number</code>)</em> -
|
|
The numeric value of the style property.</li>
|
|
</ul>
|
|
<h4 id="offsetparent-element-">offsetParent(element)</h4>
|
|
<p>Gets the closest positioned ancestor.</p>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li><code>element</code>
|
|
<em>(Type: <code>element</code>)</em> -
|
|
The element to get the offset parent for.</li>
|
|
</ul>
|
|
<h5 id="returns">returns</h5>
|
|
<ul>
|
|
<li><em>(Type: <code>element</code>)</em> -
|
|
The closest positioned ancestor.</li>
|
|
</ul>
|
|
<h4 id="scrollbarwidth-isbody-">scrollbarWidth(isBody)</h4>
|
|
<p>Calculates the browser scrollbar width and caches the result for future calls. Concept from the TWBS measureScrollbar() function in <a href="https://github.com/twbs/bootstrap/blob/master/js/modal.js">modal.js</a>.</p>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li><code>isBody</code>
|
|
<em>(Type: <code>boolean</code>, Default: <code>false</code>, optional)</em> - Is the requested scrollbar width for the body/html element. IE and Edge overlay the scrollbar on the body/html element and should be considered 0.</li>
|
|
</ul>
|
|
<h5 id="returns">returns</h5>
|
|
<ul>
|
|
<li><em>(Type: <code>number</code>)</em> -
|
|
The width of the browser scrollbar.</li>
|
|
</ul>
|
|
<h4 id="scrollbarpadding-element-">scrollbarPadding(element)</h4>
|
|
<p>Calculates the padding required to replace the scrollbar on an element.</p>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li>'element' <em>(Type: <code>element</code>)</em> - The element to calculate the padding on (should be a scrollable element).</li>
|
|
</ul>
|
|
<h5 id="returns">returns</h5>
|
|
<p>An object with the following properties:</p>
|
|
<ul>
|
|
<li><p><code>scrollbarWidth</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
The width of the scrollbar.</p>
|
|
</li>
|
|
<li><p><code>widthOverflow</code>
|
|
<em>(Type: <code>boolean</code>)</em> -
|
|
Whether the width is overflowing.</p>
|
|
</li>
|
|
<li><p><code>right</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
The total right padding required to replace the scrollbar.</p>
|
|
</li>
|
|
<li><p><code>originalRight</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
The oringal right padding on the element.</p>
|
|
</li>
|
|
<li><p><code>heightOverflow</code>
|
|
<em>(Type: <code>boolean</code>)</em> -
|
|
Whether the height is overflowing.</p>
|
|
</li>
|
|
<li><p><code>bottom</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
The total bottom padding required to replace the scrollbar.</p>
|
|
</li>
|
|
<li><p><code>originalBottom</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
The oringal bottom padding on the element.</p>
|
|
</li>
|
|
</ul>
|
|
<h4 id="isscrollable-element-includehidden-">isScrollable(element, includeHidden)</h4>
|
|
<p>Determines if an element is scrollable.</p>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li><p><code>element</code>
|
|
<em>(Type: <code>element</code>)</em> -
|
|
The element to check.</p>
|
|
</li>
|
|
<li><p><code>includeHidden</code>
|
|
<em>(Type: <code>boolean</code>, Default: <code>false</code>, optional)</em> - Should scroll style of 'hidden' be considered.</p>
|
|
</li>
|
|
</ul>
|
|
<h5 id="returns">returns</h5>
|
|
<ul>
|
|
<li><em>(Type: <code>boolean</code>)</em> -
|
|
Whether the element is scrollable.</li>
|
|
</ul>
|
|
<h4 id="scrollparent-element-includehidden-includeself-">scrollParent(element, includeHidden, includeSelf)</h4>
|
|
<p>Gets the closest scrollable ancestor. Concept from the jQueryUI <a href="https://github.com/jquery/jquery-ui/blob/master/ui/scroll-parent.js">scrollParent.js</a>.</p>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li><p><code>element</code>
|
|
<em>(Type: <code>element</code>)</em> -
|
|
The element to get the closest scrollable ancestor for.</p>
|
|
</li>
|
|
<li><p><code>includeHidden</code>
|
|
<em>(Type: <code>boolean</code>, Default: <code>false</code>, optional)</em> - Should scroll style of 'hidden' be considered.</p>
|
|
</li>
|
|
<li><p><code>includeSelf</code>
|
|
<em>(Type: <code>boolean</code>, Default: <code>false</code>, optional)</em> - Should the element passed in be included in the scrollable lookup.</p>
|
|
</li>
|
|
</ul>
|
|
<h5 id="returns">returns</h5>
|
|
<ul>
|
|
<li><em>(Type: <code>element</code>)</em> -
|
|
The closest scrollable ancestor.</li>
|
|
</ul>
|
|
<h4 id="position-element-includemargins-">position(element, includeMargins)</h4>
|
|
<p>A read-only equivalent of jQuery's <a href="http://api.jquery.com/position/">position</a> function, distance to closest positioned ancestor. Does not account for margins by default like jQuery's position.</p>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li><p><code>element</code> <em>(Type: <code>element</code>)</em> -
|
|
The element to get the position for.</p>
|
|
</li>
|
|
<li><p><code>includeMargins</code> <em>(Type: <code>boolean</code>, Default: <code>false</code>, optional)</em> -
|
|
Should margins be accounted for.</p>
|
|
</li>
|
|
</ul>
|
|
<h5 id="returns">returns</h5>
|
|
<p>An object with the following properties:</p>
|
|
<ul>
|
|
<li><p><code>width</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
The width of the element.</p>
|
|
</li>
|
|
<li><p><code>height</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
The height of the element.</p>
|
|
</li>
|
|
<li><p><code>top</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
Distance to top edge of offset parent.</p>
|
|
</li>
|
|
<li><p><code>left</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
Distance to left edge of offset parent.</p>
|
|
</li>
|
|
</ul>
|
|
<h4 id="offset-element-">offset(element)</h4>
|
|
<p>A read-only equivalent of jQuery's <a href="http://api.jquery.com/offset/">offset</a> function, distance to viewport.</p>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li><code>element</code>
|
|
<em>(Type: <code>element</code>)</em> -
|
|
The element to get the offset for.</li>
|
|
</ul>
|
|
<h5 id="returns">returns</h5>
|
|
<p>An object with the following properties:</p>
|
|
<ul>
|
|
<li><p><code>width</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
The width of the element.</p>
|
|
</li>
|
|
<li><p><code>height</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
The height of the element.</p>
|
|
</li>
|
|
<li><p><code>top</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
Distance to top edge of the viewport.</p>
|
|
</li>
|
|
<li><p><code>left</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
Distance to left edge of the viewport.</p>
|
|
</li>
|
|
</ul>
|
|
<h4 id="viewportoffset-element-usedocument-includepadding-">viewportOffset(element, useDocument, includePadding)</h4>
|
|
<p>Gets the elements available space relative to the closest scrollable ancestor. Accounts for padding, border, and scrollbar width.
|
|
Right and bottom dimensions represent the distance to the respective edge of the viewport element, not the top and left edge.
|
|
If the element edge extends beyond the viewport, a negative value will be reported.</p>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li><p><code>element</code>
|
|
<em>(Type: <code>element</code>)</em> -
|
|
The element to get the viewport offset for.</p>
|
|
</li>
|
|
<li><p><code>useDocument</code>
|
|
<em>(Type: <code>boolean</code>, Default: <code>false</code>, optional)</em> -
|
|
Should the viewport be the document element instead of the first scrollable element.</p>
|
|
</li>
|
|
<li><p><code>includePadding</code>
|
|
<em>(Type: <code>boolean</code>, Default: <code>true</code>, optional)</em> -
|
|
Should the padding on the viewport element be accounted for, default is true.</p>
|
|
</li>
|
|
</ul>
|
|
<h5 id="returns">returns</h5>
|
|
<p>An object with the following properties:</p>
|
|
<ul>
|
|
<li><p><code>top</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
Distance to top content edge of the viewport.</p>
|
|
</li>
|
|
<li><p><code>bottom</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
Distance to bottom content edge of the viewport.</p>
|
|
</li>
|
|
<li><p><code>left</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
Distance to left content edge of the viewport.</p>
|
|
</li>
|
|
<li><p><code>right</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
Distance to right content edge of the viewport.</p>
|
|
</li>
|
|
</ul>
|
|
<h4 id="parseplacement-placement-">parsePlacement(placement)</h4>
|
|
<p>Gets an array of placement values parsed from a placement string. Along with the 'auto' indicator, supported placement strings are:</p>
|
|
<ul>
|
|
<li>top: element on top, horizontally centered on host element.</li>
|
|
<li>top-left: element on top, left edge aligned with host element left edge.</li>
|
|
<li>top-right: element on top, right edge aligned with host element right edge.</li>
|
|
<li>bottom: element on bottom, horizontally centered on host element.</li>
|
|
<li>bottom-left: element on bottom, left edge aligned with host element left edge.</li>
|
|
<li>bottom-right: element on bottom, right edge aligned with host element right edge.</li>
|
|
<li>left: element on left, vertically centered on host element.</li>
|
|
<li>left-top: element on left, top edge aligned with host element top edge.</li>
|
|
<li>left-bottom: element on left, bottom edge aligned with host element bottom edge.</li>
|
|
<li>right: element on right, vertically centered on host element.</li>
|
|
<li>right-top: element on right, top edge aligned with host element top edge.</li>
|
|
<li>right-bottom: element on right, bottom edge aligned with host element bottom edge.</li>
|
|
</ul>
|
|
<p>A placement string with an 'auto' indicator is expected to be space separated from the placement, i.e: 'auto bottom-left'.
|
|
If the primary and secondary placement values do not match 'top, bottom, left, right' then 'top' will be the primary placement and
|
|
'center' will be the secondary placement. If 'auto' is passed, true will be returned as the 3rd value of the array.</p>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li><code>placement</code>
|
|
<em>(Type: <code>string</code>, Example: <code>auto top-left</code>)</em> -
|
|
The placement string to parse.</li>
|
|
</ul>
|
|
<h5 id="returns">returns</h5>
|
|
<p>An array with the following values:</p>
|
|
<ul>
|
|
<li><p><code>[0]</code>
|
|
<em>(Type: <code>string</code>)</em> -
|
|
The primary placement.</p>
|
|
</li>
|
|
<li><p><code>[1]</code>
|
|
<em>(Type: <code>string</code>)</em> -
|
|
The secondary placement.</p>
|
|
</li>
|
|
<li><p><code>[2]</code>
|
|
<em>(Type: <code>boolean</code>)</em> -
|
|
Is auto place enabled.</p>
|
|
</li>
|
|
</ul>
|
|
<h4 id="positionelements-hostelement-targetelement-placement-appendtobody-">positionElements(hostElement, targetElement, placement, appendToBody)</h4>
|
|
<p>Gets gets coordinates for an element to be positioned relative to another element.</p>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li><p><code>hostElement</code>
|
|
<em>(Type: <code>element</code>)</em> -
|
|
The element to position against.</p>
|
|
</li>
|
|
<li><p><code>targetElement</code>
|
|
<em>(Type: <code>element</code>)</em> -
|
|
The element to position.</p>
|
|
</li>
|
|
<li><p><code>placement</code>
|
|
<em>(Type: <code>string</code>, Default: <code>top</code>, optional)</em> -
|
|
The placement for the target element. See the parsePlacement() function for available options. If 'auto' placement is used, the viewportOffset() function is used to decide where the targetElement will fit.</p>
|
|
</li>
|
|
<li><p><code>appendToBody</code>
|
|
<em>(Type: <code>boolean</code>, Default: <code>false</code>, optional)</em> -
|
|
Should the coordinates be cacluated from the body element.</p>
|
|
</li>
|
|
</ul>
|
|
<h5 id="returns">returns</h5>
|
|
<p>An object with the following properties:</p>
|
|
<ul>
|
|
<li><p><code>top</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
The targetElement top value.</p>
|
|
</li>
|
|
<li><p><code>left</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
The targetElement left value.</p>
|
|
</li>
|
|
<li><p><code>right</code>
|
|
<em>(Type: <code>number</code>)</em> -
|
|
The resolved placement with 'auto' removed.</p>
|
|
</li>
|
|
</ul>
|
|
<h4 id="positionarrow-element-placement-">positionArrow(element, placement)</h4>
|
|
<p>Positions the tooltip and popover arrow elements when using placement options beyond the standard top, left, bottom, or right.</p>
|
|
<h5 id="parameters">parameters</h5>
|
|
<ul>
|
|
<li><p><code>element</code>
|
|
<em>(Type: <code>element</code>)</em> -
|
|
The element to position the arrow element for.</p>
|
|
</li>
|
|
<li><p><code>placement</code>
|
|
<em>(Type: <code>string</code>)</em> -
|
|
The placement for the element.</p>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'position')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="PositionDemoCtrl">
|
|
<h4>$uibPosition service</h4>
|
|
<div id="posdemoparent" ng-style="{'overflow': (parentScrollable && 'scroll'), 'position': (parentRelative && 'relative')}" style="border: 1px solid #ccc; padding: 15px;">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="parentScrollable"> Parent scrollable
|
|
</label>
|
|
</div>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="parentRelative"> Parent relative
|
|
</label>
|
|
</div>
|
|
<button id="posdemobtn" class="btn btn-secondary" ng-click="getValues()">Get values</button>
|
|
|
|
<div id="posdemodiv" style="width: 100px; height: 100px; margin: 15px 0; padding: 10px; background-color: #f8f8f8; border: 1px solid #ccc;">
|
|
Demo element
|
|
</div>
|
|
</div>
|
|
<br />
|
|
offsetParent: {{elemVals.offsetParent}}
|
|
<br />
|
|
scrollParent: {{elemVals.scrollParent}}
|
|
<br />
|
|
scrollbarWidth: {{scrollbarWidth}}
|
|
<br />
|
|
position: {{elemVals.position}}
|
|
<br />
|
|
offset: {{elemVals.offset}}
|
|
<br />
|
|
viewportOffset: {{elemVals.viewportOffset}}
|
|
<br />
|
|
positionElements: {{elemVals.positionElements}}
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('PositionDemoCtrl', function ($scope, $window, $uibPosition) {
|
|
|
|
$scope.elemVals = {};
|
|
$scope.parentScrollable = true;
|
|
$scope.parentRelative = true;
|
|
|
|
$scope.getValues = function() {
|
|
var divEl = $window.document.querySelector('#posdemodiv');
|
|
var btnEl = $window.document.querySelector('#posdemobtn');
|
|
|
|
var offsetParent = $uibPosition.offsetParent(divEl);
|
|
$scope.elemVals.offsetParent = 'type: ' + offsetParent.tagName + ', id: ' + offsetParent.id;
|
|
|
|
var scrollParent = $uibPosition.scrollParent(divEl);
|
|
$scope.elemVals.scrollParent = 'type: ' + scrollParent.tagName + ', id: ' + scrollParent.id;
|
|
|
|
$scope.scrollbarWidth = $uibPosition.scrollbarWidth();
|
|
|
|
$scope.elemVals.position = $uibPosition.position(divEl);
|
|
|
|
$scope.elemVals.offset = $uibPosition.offset(divEl);
|
|
|
|
$scope.elemVals.viewportOffset = $uibPosition.viewportOffset(divEl);
|
|
|
|
$scope.elemVals.positionElements = $uibPosition.positionElements(btnEl, divEl, 'auto bottom-left');
|
|
};
|
|
});</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('PositionDemoCtrl', function ($scope, $window, $uibPosition) {
|
|
|
|
$scope.elemVals = {};
|
|
$scope.parentScrollable = true;
|
|
$scope.parentRelative = true;
|
|
|
|
$scope.getValues = function() {
|
|
var divEl = $window.document.querySelector('#posdemodiv');
|
|
var btnEl = $window.document.querySelector('#posdemobtn');
|
|
|
|
var offsetParent = $uibPosition.offsetParent(divEl);
|
|
$scope.elemVals.offsetParent = 'type: ' + offsetParent.tagName + ', id: ' + offsetParent.id;
|
|
|
|
var scrollParent = $uibPosition.scrollParent(divEl);
|
|
$scope.elemVals.scrollParent = 'type: ' + scrollParent.tagName + ', id: ' + scrollParent.id;
|
|
|
|
$scope.scrollbarWidth = $uibPosition.scrollbarWidth();
|
|
|
|
$scope.elemVals.position = $uibPosition.position(divEl);
|
|
|
|
$scope.elemVals.offset = $uibPosition.offset(divEl);
|
|
|
|
$scope.elemVals.viewportOffset = $uibPosition.viewportOffset(divEl);
|
|
|
|
$scope.elemVals.positionElements = $uibPosition.positionElements(btnEl, divEl, 'auto bottom-left');
|
|
};
|
|
});</script>
|
|
|
|
<section id="progressbar">
|
|
<div class="page-header">
|
|
<h1>Progressbar<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/progressbar">ui.bootstrap.progressbar</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="ProgressDemoCtrl">
|
|
|
|
<h3>Static</h3>
|
|
<div class="row">
|
|
<div class="col-sm-4"><uib-progressbar value="55"></uib-progressbar></div>
|
|
<div class="col-sm-4"><uib-progressbar value="22" type="warning" striped="true">22%</uib-progressbar></div>
|
|
<div class="col-sm-4"><uib-progressbar class="active" max="200" value="166" type="danger" striped="true"><i>166 / 200</i></uib-progressbar></div>
|
|
</div>
|
|
|
|
<hr />
|
|
<h3>Dynamic <button type="button" class="btn btn-sm btn-primary" ng-click="random()">Randomize</button></h3>
|
|
<uib-progressbar max="max" value="dynamic"><span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span></uib-progressbar>
|
|
|
|
<small><em>No animation</em></small>
|
|
<uib-progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></uib-progressbar>
|
|
|
|
<small><em>Object (changes type based on value)</em></small>
|
|
<uib-progressbar class="active" value="dynamic" type="{{type}}" striped="true">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></uib-progressbar>
|
|
|
|
<hr />
|
|
<h3>Stacked <button type="button" class="btn btn-sm btn-primary" ng-click="randomStacked()">Randomize</button></h3>
|
|
<uib-progress><uib-bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></uib-bar></uib-progress>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>A progress bar directive that is focused on providing feedback on the progress of a workflow or action.</p>
|
|
<p>It supports multiple (stacked) <code><uib-bar></code> into the same <code><uib-progress></code> element or a single <code><uib-progressbar></code> element with optional <code>max</code> attribute and transition animations.</p>
|
|
<h3 id="uib-progressbar-settings">uib-progressbar settings</h3>
|
|
<ul>
|
|
<li><p><code>value</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
The current value of progress completed.</p>
|
|
</li>
|
|
<li><p><code>type</code>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
Bootstrap style type. Possible values are 'success', 'info', 'warning', and, 'danger' to use Bootstrap's pre-existing styling, or any desired custom suffix.</p>
|
|
</li>
|
|
<li><p><code>max</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>100</code>)</em> -
|
|
A number that specifies the total value of bars that is required.</p>
|
|
</li>
|
|
<li><p><code>animate</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Whether bars use transitions to achieve the width change.</p>
|
|
</li>
|
|
<li><p><code>title</code>
|
|
<em>(Default: <code>progressbar</code>)</em> -
|
|
Title to use as label (for accessibility).</p>
|
|
</li>
|
|
<li><p><code>striped</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>false</code>)</em></p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="uib-progress-settings">uib-progress settings</h3>
|
|
<ul>
|
|
<li><p><code>max</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>100</code>)</em> -
|
|
A number that specifies the total value of bars that is required.</p>
|
|
</li>
|
|
<li><p><code>animate</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Whether bars use transitions to achieve the width change.</p>
|
|
</li>
|
|
<li><p><code>title</code>
|
|
<em>(Default: <code>progressbar</code>)</em> -
|
|
Title to use as label (for accessibility).</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="uib-bar-settings">uib-bar settings</h3>
|
|
<ul>
|
|
<li><p><code>value</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
The current value of progress completed.</p>
|
|
</li>
|
|
<li><p><code>type</code>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
Bootstrap style type. Possible values are 'success', 'info', 'warning', and, 'danger' to use Bootstrap's pre-existing styling, or any desired custom suffix.</p>
|
|
</li>
|
|
<li><p><code>title</code>
|
|
<em>(Default: <code>progressbar</code>)</em> -
|
|
Title to use as label (for accessibility).</p>
|
|
</li>
|
|
<li><p><code>striped</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>false</code>)</em></p>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'progressbar')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="ProgressDemoCtrl">
|
|
|
|
<h3>Static</h3>
|
|
<div class="row">
|
|
<div class="col-sm-4"><uib-progressbar value="55"></uib-progressbar></div>
|
|
<div class="col-sm-4"><uib-progressbar value="22" type="warning" striped="true">22%</uib-progressbar></div>
|
|
<div class="col-sm-4"><uib-progressbar class="active" max="200" value="166" type="danger" striped="true"><i>166 / 200</i></uib-progressbar></div>
|
|
</div>
|
|
|
|
<hr />
|
|
<h3>Dynamic <button type="button" class="btn btn-sm btn-primary" ng-click="random()">Randomize</button></h3>
|
|
<uib-progressbar max="max" value="dynamic"><span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span></uib-progressbar>
|
|
|
|
<small><em>No animation</em></small>
|
|
<uib-progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></uib-progressbar>
|
|
|
|
<small><em>Object (changes type based on value)</em></small>
|
|
<uib-progressbar class="active" value="dynamic" type="{{type}}" striped="true">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></uib-progressbar>
|
|
|
|
<hr />
|
|
<h3>Stacked <button type="button" class="btn btn-sm btn-primary" ng-click="randomStacked()">Randomize</button></h3>
|
|
<uib-progress><uib-bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></uib-bar></uib-progress>
|
|
|
|
</div></code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('ProgressDemoCtrl', function ($scope) {
|
|
$scope.max = 200;
|
|
|
|
$scope.random = function() {
|
|
var value = Math.floor(Math.random() * 100 + 1);
|
|
var type;
|
|
|
|
if (value < 25) {
|
|
type = 'success';
|
|
} else if (value < 50) {
|
|
type = 'info';
|
|
} else if (value < 75) {
|
|
type = 'warning';
|
|
} else {
|
|
type = 'danger';
|
|
}
|
|
|
|
$scope.showWarning = type === 'danger' || type === 'warning';
|
|
|
|
$scope.dynamic = value;
|
|
$scope.type = type;
|
|
};
|
|
|
|
$scope.random();
|
|
|
|
$scope.randomStacked = function() {
|
|
$scope.stacked = [];
|
|
var types = ['success', 'info', 'warning', 'danger'];
|
|
|
|
for (var i = 0, n = Math.floor(Math.random() * 4 + 1); i < n; i++) {
|
|
var index = Math.floor(Math.random() * 4);
|
|
$scope.stacked.push({
|
|
value: Math.floor(Math.random() * 30 + 1),
|
|
type: types[index]
|
|
});
|
|
}
|
|
};
|
|
|
|
$scope.randomStacked();
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('ProgressDemoCtrl', function ($scope) {
|
|
$scope.max = 200;
|
|
|
|
$scope.random = function() {
|
|
var value = Math.floor(Math.random() * 100 + 1);
|
|
var type;
|
|
|
|
if (value < 25) {
|
|
type = 'success';
|
|
} else if (value < 50) {
|
|
type = 'info';
|
|
} else if (value < 75) {
|
|
type = 'warning';
|
|
} else {
|
|
type = 'danger';
|
|
}
|
|
|
|
$scope.showWarning = type === 'danger' || type === 'warning';
|
|
|
|
$scope.dynamic = value;
|
|
$scope.type = type;
|
|
};
|
|
|
|
$scope.random();
|
|
|
|
$scope.randomStacked = function() {
|
|
$scope.stacked = [];
|
|
var types = ['success', 'info', 'warning', 'danger'];
|
|
|
|
for (var i = 0, n = Math.floor(Math.random() * 4 + 1); i < n; i++) {
|
|
var index = Math.floor(Math.random() * 4);
|
|
$scope.stacked.push({
|
|
value: Math.floor(Math.random() * 30 + 1),
|
|
type: types[index]
|
|
});
|
|
}
|
|
};
|
|
|
|
$scope.randomStacked();
|
|
});
|
|
</script>
|
|
|
|
<section id="rating">
|
|
<div class="page-header">
|
|
<h1>Rating<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/rating">ui.bootstrap.rating</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="RatingDemoCtrl">
|
|
<h4>Default</h4>
|
|
<span uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></span>
|
|
<span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>
|
|
|
|
<pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>
|
|
|
|
<button type="button" class="btn btn-sm btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" ng-click="isReadonly = ! isReadonly">Toggle Readonly</button>
|
|
<hr />
|
|
|
|
<h4>Custom icons</h4>
|
|
<div ng-init="x = 5"><span uib-rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1"></span> <b>(<i>Rate:</i> {{x}})</b></div>
|
|
<div ng-init="y = 2"><span uib-rating ng-model="y" rating-states="ratingStates" aria-labelledby="custom-icons-2"></span> <b>(<i>Rate:</i> {{y}})</b></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>Rating directive that will take care of visualising a star rating bar.</p>
|
|
<h3 id="uib-rating-settings">uib-rating settings</h3>
|
|
<ul>
|
|
<li><p><code>max</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>5</code>)</em> -
|
|
Changes the number of icons.</p>
|
|
</li>
|
|
<li><p><code>ng-model</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
The current rate.</p>
|
|
</li>
|
|
<li><p><code>on-hover(value)</code>
|
|
<small class="badge">$</small> -
|
|
An optional expression called when user's mouse is over a particular icon.</p>
|
|
</li>
|
|
<li><p><code>on-leave()</code>
|
|
<small class="badge">$</small> -
|
|
An optional expression called when user's mouse leaves the control altogether.</p>
|
|
</li>
|
|
<li><p><code>rating-states</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
An array of objects defining properties for all icons. In default template, <code>stateOn</code> & <code>stateOff</code> property is used to specify the icon's class.</p>
|
|
</li>
|
|
<li><p><code>read-only</code>
|
|
<small class="badge">$</small>
|
|
<i class="icon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Prevent user's interaction.</p>
|
|
</li>
|
|
<li><p><code>titles</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: ['one', 'two', 'three', 'four', 'five']`)</em> -
|
|
An array of strings defining titles for all icons.</p>
|
|
</li>
|
|
<li><p><code>enable-reset</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Clicking the icon of the current rating will reset the rating to 0.</p>
|
|
</li>
|
|
<li><p><code>state-off</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
A variable used in the template to specify the state for unselected icons.</p>
|
|
</li>
|
|
<li><p><code>state-on</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
A variable used in the template to specify the state (class, src, etc) for selected icons.</p>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'rating')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="RatingDemoCtrl">
|
|
<h4>Default</h4>
|
|
<span uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></span>
|
|
<span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>
|
|
|
|
<pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>
|
|
|
|
<button type="button" class="btn btn-sm btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button>
|
|
<button type="button" class="btn btn-sm btn-secondary" ng-click="isReadonly = ! isReadonly">Toggle Readonly</button>
|
|
<hr />
|
|
|
|
<h4>Custom icons</h4>
|
|
<div ng-init="x = 5"><span uib-rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1"></span> <b>(<i>Rate:</i> {{x}})</b></div>
|
|
<div ng-init="y = 2"><span uib-rating ng-model="y" rating-states="ratingStates" aria-labelledby="custom-icons-2"></span> <b>(<i>Rate:</i> {{y}})</b></div>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function ($scope) {
|
|
$scope.rate = 7;
|
|
$scope.max = 10;
|
|
$scope.isReadonly = false;
|
|
|
|
$scope.hoveringOver = function(value) {
|
|
$scope.overStar = value;
|
|
$scope.percent = 100 * (value / $scope.max);
|
|
};
|
|
|
|
$scope.ratingStates = [
|
|
{stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
|
|
{stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
|
|
{stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
|
|
{stateOn: 'glyphicon-heart'},
|
|
{stateOff: 'glyphicon-off'}
|
|
];
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function ($scope) {
|
|
$scope.rate = 7;
|
|
$scope.max = 10;
|
|
$scope.isReadonly = false;
|
|
|
|
$scope.hoveringOver = function(value) {
|
|
$scope.overStar = value;
|
|
$scope.percent = 100 * (value / $scope.max);
|
|
};
|
|
|
|
$scope.ratingStates = [
|
|
{stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
|
|
{stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
|
|
{stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
|
|
{stateOn: 'glyphicon-heart'},
|
|
{stateOff: 'glyphicon-off'}
|
|
];
|
|
});
|
|
</script>
|
|
|
|
<section id="tabs">
|
|
<div class="page-header">
|
|
<h1>Tabs<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/tabs">ui.bootstrap.tabs</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<style type="text/css">
|
|
form.tab-form-demo .tab-pane {
|
|
margin: 20px 20px;
|
|
}
|
|
</style>
|
|
|
|
<div ng-controller="TabsDemoCtrl">
|
|
<p>Select a tab by setting active binding to true:</p>
|
|
<p>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="active = 1">Select second tab</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="active = 2">Select third tab</button>
|
|
</p>
|
|
<p>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
|
|
</p>
|
|
<hr />
|
|
|
|
<uib-tabset active="active">
|
|
<uib-tab index="0" heading="Static title">Static content</uib-tab>
|
|
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
|
|
{{tab.content}}
|
|
</uib-tab>
|
|
<uib-tab index="3" select="alertMe()">
|
|
<uib-tab-heading>
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M912 1696q0-16-16-16-59 0-101.5-42.5t-42.5-101.5q0-16-16-16t-16 16q0 73 51.5 124.5t124.5 51.5q16 0 16-16zm816-288q0 52-38 90t-90 38h-448q0 106-75 181t-181 75-181-75-75-181h-448q-52 0-90-38t-38-90q50-42 91-88t85-119.5 74.5-158.5 50-206 19.5-260q0-152 117-282.5t307-158.5q-8-19-8-39 0-40 28-68t68-28 68 28 28 68q0 20-8 39 190 28 307 158.5t117 282.5q0 139 19.5 260t50 206 74.5 158.5 85 119.5 91 88z"/></svg>
|
|
</i>
|
|
Alert!
|
|
</uib-tab-heading>
|
|
I've got an HTML heading, and a select callback. Pretty cool!
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
|
|
<hr />
|
|
|
|
<uib-tabset active="activePill" vertical="true" type="pills">
|
|
<uib-tab index="0" heading="Vertical 1">Vertical content 1</uib-tab>
|
|
<uib-tab index="1" heading="Vertical 2">Vertical content 2</uib-tab>
|
|
</uib-tabset>
|
|
|
|
<hr />
|
|
|
|
<uib-tabset active="activeJustified" justified="true">
|
|
<uib-tab index="0" heading="Justified">Justified content</uib-tab>
|
|
<uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>
|
|
<uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>
|
|
</uib-tabset>
|
|
|
|
<hr />
|
|
|
|
Tabbed pills with CSS classes
|
|
<uib-tabset type="pills">
|
|
<uib-tab heading="Default Size">Tab 1 content</uib-tab>
|
|
<uib-tab heading="Small Button" classes="btn-sm">Tab 2 content</uib-tab>
|
|
</uib-tabset>
|
|
|
|
<hr />
|
|
|
|
Tabs using nested forms:
|
|
<form name="outerForm" class="tab-form-demo">
|
|
<uib-tabset active="activeForm">
|
|
<uib-tab index="0" heading="Form Tab">
|
|
<ng-form name="nestedForm">
|
|
<div class="form-group">
|
|
<label>Name</label>
|
|
<input type="text" class="form-control" required ng-model="model.name"/>
|
|
</div>
|
|
</ng-form>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="Tab One">
|
|
Some Tab Content
|
|
</uib-tab>
|
|
<uib-tab index="2" heading="Tab Two">
|
|
More Tab Content
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</form>
|
|
Model:
|
|
<pre>{{ model | json }}</pre>
|
|
Nested Form:
|
|
<pre>{{ outerForm.nestedForm | json }}</pre>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>AngularJS version of the tabs directive.</p>
|
|
<h3 id="uib-tabset-settings">uib-tabset settings</h3>
|
|
<ul>
|
|
<li><p><code>active</code>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>Index of first tab</code>)</em> -
|
|
Active index of tab. Setting this to an existing tab index will make that tab active.</p>
|
|
</li>
|
|
<li><p><code>justified</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether tabs fill the container and have a consistent width.</p>
|
|
<ul>
|
|
<li><code>template-url</code>
|
|
<em>(Default: <code>uib/template/tabs/tabset.html</code>)</em> -
|
|
A URL representing the location of a template to use for the main component.</li>
|
|
</ul>
|
|
</li>
|
|
<li><p><code>type</code>
|
|
<em>(Defaults: <code>tabs</code>)</em> -
|
|
Navigation type. Possible values are 'tabs' and 'pills'.</p>
|
|
</li>
|
|
<li><p><code>vertical</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether tabs appear vertically stacked.</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="uib-tab-settings">uib-tab settings</h3>
|
|
<ul>
|
|
<li><p><code>classes</code>
|
|
<small class="badge">$</small> -
|
|
An optional string of space-separated CSS classes.</p>
|
|
</li>
|
|
<li><p><code>deselect()</code>
|
|
<small class="badge">$</small> -
|
|
An optional expression called when tab is deactivated. Supports <code>$event</code> and <code>$selectedIndex</code> in template for expression. You may call <code>$event.preventDefault()</code> in this event handler to prevent a tab change from occurring. The <code>$selectedIndex</code> can be used to determine which tab was attempted to be opened.</p>
|
|
</li>
|
|
<li><p><code>disable</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether tab is clickable and can be activated.</p>
|
|
</li>
|
|
<li><p><code>heading</code> -
|
|
Heading text.</p>
|
|
</li>
|
|
<li><p><code>index</code> -
|
|
Tab index. Must be unique number or string.</p>
|
|
</li>
|
|
<li><p><code>select()</code>
|
|
<small class="badge">$</small> -
|
|
An optional expression called when tab is activated. Supports $event in template for expression.</p>
|
|
</li>
|
|
<li><p><code>template-url</code>
|
|
<em>(Default: <code>uib/template/tabs/tab.html</code>)</em> -
|
|
A URL representing the location of a template to use for the tab heading.</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="tabset-heading">Tabset heading</h3>
|
|
<p>Instead of the <code>heading</code> attribute on the <code>uib-tabset</code>, you can use an <code>uib-tab-heading</code> element inside a tabset that will be used as the tabset's header. There you can use HTML as well.</p>
|
|
<h3 id="known-issues">Known issues</h3>
|
|
<p>To use clickable elements within the tab, you have override the tab template to use div elements instead of anchor elements, and replicate the desired styles from Bootstrap's CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'tabs')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><style type="text/css">
|
|
form.tab-form-demo .tab-pane {
|
|
margin: 20px 20px;
|
|
}
|
|
</style>
|
|
|
|
<div ng-controller="TabsDemoCtrl">
|
|
<p>Select a tab by setting active binding to true:</p>
|
|
<p>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="active = 1">Select second tab</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="active = 2">Select third tab</button>
|
|
</p>
|
|
<p>
|
|
<button type="button" class="btn btn-secondary btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
|
|
</p>
|
|
<hr />
|
|
|
|
<uib-tabset active="active">
|
|
<uib-tab index="0" heading="Static title">Static content</uib-tab>
|
|
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
|
|
{{tab.content}}
|
|
</uib-tab>
|
|
<uib-tab index="3" select="alertMe()">
|
|
<uib-tab-heading>
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M912 1696q0-16-16-16-59 0-101.5-42.5t-42.5-101.5q0-16-16-16t-16 16q0 73 51.5 124.5t124.5 51.5q16 0 16-16zm816-288q0 52-38 90t-90 38h-448q0 106-75 181t-181 75-181-75-75-181h-448q-52 0-90-38t-38-90q50-42 91-88t85-119.5 74.5-158.5 50-206 19.5-260q0-152 117-282.5t307-158.5q-8-19-8-39 0-40 28-68t68-28 68 28 28 68q0 20-8 39 190 28 307 158.5t117 282.5q0 139 19.5 260t50 206 74.5 158.5 85 119.5 91 88z"/></svg>
|
|
</i>
|
|
Alert!
|
|
</uib-tab-heading>
|
|
I've got an HTML heading, and a select callback. Pretty cool!
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
|
|
<hr />
|
|
|
|
<uib-tabset active="activePill" vertical="true" type="pills">
|
|
<uib-tab index="0" heading="Vertical 1">Vertical content 1</uib-tab>
|
|
<uib-tab index="1" heading="Vertical 2">Vertical content 2</uib-tab>
|
|
</uib-tabset>
|
|
|
|
<hr />
|
|
|
|
<uib-tabset active="activeJustified" justified="true">
|
|
<uib-tab index="0" heading="Justified">Justified content</uib-tab>
|
|
<uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>
|
|
<uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>
|
|
</uib-tabset>
|
|
|
|
<hr />
|
|
|
|
Tabbed pills with CSS classes
|
|
<uib-tabset type="pills">
|
|
<uib-tab heading="Default Size">Tab 1 content</uib-tab>
|
|
<uib-tab heading="Small Button" classes="btn-sm">Tab 2 content</uib-tab>
|
|
</uib-tabset>
|
|
|
|
<hr />
|
|
|
|
Tabs using nested forms:
|
|
<form name="outerForm" class="tab-form-demo">
|
|
<uib-tabset active="activeForm">
|
|
<uib-tab index="0" heading="Form Tab">
|
|
<ng-form name="nestedForm">
|
|
<div class="form-group">
|
|
<label>Name</label>
|
|
<input type="text" class="form-control" required ng-model="model.name"/>
|
|
</div>
|
|
</ng-form>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="Tab One">
|
|
Some Tab Content
|
|
</uib-tab>
|
|
<uib-tab index="2" heading="Tab Two">
|
|
More Tab Content
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</form>
|
|
Model:
|
|
<pre>{{ model | json }}</pre>
|
|
Nested Form:
|
|
<pre>{{ outerForm.nestedForm | json }}</pre>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
|
|
$scope.tabs = [
|
|
{ title:'Dynamic Title 1', content:'Dynamic content 1' },
|
|
{ title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
|
|
];
|
|
|
|
$scope.alertMe = function() {
|
|
setTimeout(function() {
|
|
$window.alert('You\'ve selected the alert tab!');
|
|
});
|
|
};
|
|
|
|
$scope.model = {
|
|
name: 'Tabs'
|
|
};
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
|
|
$scope.tabs = [
|
|
{ title:'Dynamic Title 1', content:'Dynamic content 1' },
|
|
{ title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
|
|
];
|
|
|
|
$scope.alertMe = function() {
|
|
setTimeout(function() {
|
|
$window.alert('You\'ve selected the alert tab!');
|
|
});
|
|
};
|
|
|
|
$scope.model = {
|
|
name: 'Tabs'
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<section id="timepicker">
|
|
<div class="page-header">
|
|
<h1>Timepicker<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/timepicker">ui.bootstrap.timepicker</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="TimepickerDemoCtrl">
|
|
|
|
<div uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></div>
|
|
|
|
<pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-6">
|
|
Hours step is:
|
|
<select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
Minutes step is:
|
|
<select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<button type="button" class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
|
|
<button type="button" class="btn btn-secondary" ng-click="update()">Set to 14:00</button>
|
|
<button type="button" class="btn btn-danger" ng-click="clear()">Clear</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>A lightweight & configurable timepicker directive.</p>
|
|
<h3 id="uib-timepicker-settings">uib-timepicker settings</h3>
|
|
<ul>
|
|
<li><p><code>arrowkeys</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Whether user can use up/down arrow keys inside the hours & minutes input to increase or decrease its values.</p>
|
|
</li>
|
|
<li><p><code>hour-step</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>1</code>)</em> -
|
|
Number of hours to increase or decrease when using a button.</p>
|
|
</li>
|
|
<li><p><code>max</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>undefined</code>)</em> -
|
|
Maximum time a user can select.</p>
|
|
</li>
|
|
<li><p><code>meridians</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
Meridian labels based on locale. To override you must supply an array like <code>['AM', 'PM']</code>.</p>
|
|
</li>
|
|
<li><p><code>min</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>undefined</code>)</em> -
|
|
Minimum time a user can select</p>
|
|
</li>
|
|
<li><p><code>minute-step</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>1</code>)</em> -
|
|
Number of minutes to increase or decrease when using a button.</p>
|
|
</li>
|
|
<li><p><code>mousewheel</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Whether user can scroll inside the hours & minutes input to increase or decrease its values.</p>
|
|
</li>
|
|
<li><p><code>ng-disabled</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether or not to disable the component.</p>
|
|
</li>
|
|
<li><p><code>ng-model</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
Date object that provides the time state.</p>
|
|
</li>
|
|
<li><p><code>pad-hours</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: true)</em> -
|
|
Whether the hours column is padded with a 0.</p>
|
|
</li>
|
|
<li><p><code>readonly-input</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether user can type inside the hours & minutes input.</p>
|
|
</li>
|
|
<li><p><code>second-step</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>1</code>)</em> -
|
|
Number of seconds to increase or decrease when using a button.</p>
|
|
</li>
|
|
<li><p><code>show-meridian</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Whether to display 12H or 24H mode.</p>
|
|
</li>
|
|
<li><p><code>show-seconds</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Show seconds input.</p>
|
|
</li>
|
|
<li><p><code>show-spinners</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Show spinner arrows above and below the inputs.</p>
|
|
</li>
|
|
<li><p><code>tabindex</code>
|
|
<em>(Defaults: <code>0</code>)</em> -
|
|
Sets tabindex for each control in the timepicker.</p>
|
|
</li>
|
|
<li><p><code>template-url</code>
|
|
<small class="badge">C</small>
|
|
<em>(Defaults: <code>uib/template/timepicker/timepicker.html</code>)</em> -
|
|
Add the ability to override the template used on the component.</p>
|
|
</li>
|
|
</ul>
|
|
<p><strong>Notes</strong></p>
|
|
<p>This component makes no claims of absolutely supporting the preservation of dates in all cases, and it is highly recommended that model tracking of dates is encapsulated in a different object. This component should not be used with the same model as the datepicker. This is due to edge cases with situations such as Daylight Savings timezone changes which require a modification of the date in order to prevent an impossible to increment or decrement situation. See <a href="https://github.com/angular-ui/bootstrap/issues/5485">#5485</a> for details.</p>
|
|
<p>If the model value is updated (i.e. via <code>Date.prototype.setDate</code>), you must update the model value by breaking the reference by <code>modelValue = new Date(modelValue)</code> in order to have the timepicker update.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'timepicker')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="TimepickerDemoCtrl">
|
|
|
|
<div uib-timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></div>
|
|
|
|
<pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-6">
|
|
Hours step is:
|
|
<select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
Minutes step is:
|
|
<select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<button type="button" class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
|
|
<button type="button" class="btn btn-secondary" ng-click="update()">Set to 14:00</button>
|
|
<button type="button" class="btn btn-danger" ng-click="clear()">Clear</button>
|
|
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('TimepickerDemoCtrl', function ($scope, $log) {
|
|
$scope.mytime = new Date();
|
|
|
|
$scope.hstep = 1;
|
|
$scope.mstep = 15;
|
|
|
|
$scope.options = {
|
|
hstep: [1, 2, 3],
|
|
mstep: [1, 5, 10, 15, 25, 30]
|
|
};
|
|
|
|
$scope.ismeridian = true;
|
|
$scope.toggleMode = function() {
|
|
$scope.ismeridian = ! $scope.ismeridian;
|
|
};
|
|
|
|
$scope.update = function() {
|
|
var d = new Date();
|
|
d.setHours( 14 );
|
|
d.setMinutes( 0 );
|
|
$scope.mytime = d;
|
|
};
|
|
|
|
$scope.changed = function () {
|
|
$log.log('Time changed to: ' + $scope.mytime);
|
|
};
|
|
|
|
$scope.clear = function() {
|
|
$scope.mytime = null;
|
|
};
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('TimepickerDemoCtrl', function ($scope, $log) {
|
|
$scope.mytime = new Date();
|
|
|
|
$scope.hstep = 1;
|
|
$scope.mstep = 15;
|
|
|
|
$scope.options = {
|
|
hstep: [1, 2, 3],
|
|
mstep: [1, 5, 10, 15, 25, 30]
|
|
};
|
|
|
|
$scope.ismeridian = true;
|
|
$scope.toggleMode = function() {
|
|
$scope.ismeridian = ! $scope.ismeridian;
|
|
};
|
|
|
|
$scope.update = function() {
|
|
var d = new Date();
|
|
d.setHours( 14 );
|
|
d.setMinutes( 0 );
|
|
$scope.mytime = d;
|
|
};
|
|
|
|
$scope.changed = function () {
|
|
$log.log('Time changed to: ' + $scope.mytime);
|
|
};
|
|
|
|
$scope.clear = function() {
|
|
$scope.mytime = null;
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<section id="tooltip">
|
|
<div class="page-header">
|
|
<h1>Tooltip<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/tooltip">ui.bootstrap.tooltip</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<div ng-controller="TooltipDemoCtrl">
|
|
<div class="form-group">
|
|
<label>Tooltip placement</label>
|
|
<select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
|
|
</div>
|
|
<button tooltip-placement="{{placement.selected}}" uib-tooltip="On the {{placement.selected}}" type="button" class="btn btn-secondary">Tooltip {{placement.selected}}</button>
|
|
|
|
<hr />
|
|
<div class="form-group">
|
|
<label>Dynamic Tooltip Text</label>
|
|
<input type="text" ng-model="dynamicTooltipText" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Dynamic Tooltip Popup Text</label>
|
|
<input type="text" ng-model="dynamicTooltip" class="form-control">
|
|
</div>
|
|
<p>
|
|
Pellentesque <a href="#" uib-tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
|
|
sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
|
|
aliquam. Tincidunt lobortis feugiat vivamus at
|
|
<a href="#" tooltip-animation="false" uib-tooltip="I don't fade. :-(">fading</a>
|
|
eget arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
|
|
<a href="#" tooltip-popup-delay='1000' uib-tooltip='appears with delay'>show delay</a>
|
|
nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
|
|
<a href="#" tooltip-popup-close-delay='1000' uib-tooltip='hides with delay'>hide delay</a>
|
|
pharetra convallis posuere morbi leo urna,
|
|
<a href="#" uib-tooltip-template="'myTooltipTemplate.html'">Custom template</a>
|
|
at elementum eu, facilisis sed odio morbi quis commodo odio.
|
|
</p>
|
|
|
|
<p>
|
|
I can even contain HTML as a
|
|
<a href="#" uib-tooltip-html="htmlTooltip">scope variable</a> or
|
|
<a href="#" uib-tooltip-html="'static. {{dynamicTooltipText}}. <b>bold.</b>'">inline string</a>
|
|
</p>
|
|
|
|
<p>
|
|
<style>
|
|
/* Specify styling for tooltip contents */
|
|
.tooltip.customClass .tooltip-inner {
|
|
color: #880000;
|
|
background-color: #ffff66;
|
|
box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
|
}
|
|
/* Hide arrow */
|
|
.tooltip.customClass .tooltip-arrow {
|
|
display: none;
|
|
}
|
|
</style>
|
|
I can have a custom class. <a href="#" uib-tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a>
|
|
</p>
|
|
|
|
|
|
<div class="form-group">
|
|
<label>Or use custom triggers, like focus: </label>
|
|
<input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="'focus'" tooltip-placement="right" class="form-control" />
|
|
</div>
|
|
|
|
<div class="form-group" ng-class="{'has-error' : !inputModel}">
|
|
<label>Disable tooltips conditionally:</label>
|
|
<input type="text" ng-model="inputModel" class="form-control"
|
|
placeholder="Hover over this for a tooltip until this is filled"
|
|
uib-tooltip="Enter something in this input field to disable this tooltip"
|
|
tooltip-placement="top"
|
|
tooltip-trigger="'mouseenter'"
|
|
tooltip-enable="!inputModel" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
Open tooltips <span uib-tooltip="Hello!" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom">conditionally.</span>
|
|
</label>
|
|
<button ng-click="tooltipIsOpen = !tooltipIsOpen">Toggle tooltip</button>
|
|
</div>
|
|
<script type="text/ng-template" id="myTooltipTemplate.html">
|
|
<span>Special Tooltip with <strong>markup</strong> and {{ dynamicTooltipText }}</span>
|
|
</script>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>A lightweight, extensible directive for fancy tooltip creation. The tooltip
|
|
directive supports multiple placements, optional transition animation, and more.</p>
|
|
<p><strong>Note to mobile developers</strong>: Please note that while tooltips may work correctly on mobile devices (including tablets),
|
|
we have made the decision to not officially support such a use-case because it does not make sense from a UX perspective.</p>
|
|
<p>There are three versions of the tooltip: <code>uib-tooltip</code>, <code>uib-tooltip-template</code>, and
|
|
<code>uib-tooltip-html</code>:</p>
|
|
<ul>
|
|
<li><code>uib-tooltip</code> -
|
|
Takes text only and will escape any HTML provided.</li>
|
|
<li><code>uib-tooltip-html</code>
|
|
<small class="badge">$</small> -
|
|
Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the <code>uib-tooltip-template</code> attribute option instead. <em>The user is responsible for ensuring the content is safe to put into the DOM!</em></li>
|
|
<li><code>uib-tooltip-template</code>
|
|
<small class="badge">$</small> -
|
|
Takes text that specifies the location of a template to use for the tooltip. Note that this needs to be wrapped in a tag.</li>
|
|
</ul>
|
|
<h3 id="uib-tooltip-settings">uib-tooltip-* settings</h3>
|
|
<p>All these settings are available for the three types of tooltips.</p>
|
|
<ul>
|
|
<li><p><code>tooltip-animation</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>true</code>, Config: <code>animation</code>)</em> -
|
|
Should it fade in and out?</p>
|
|
</li>
|
|
<li><p><code>tooltip-append-to-body</code>
|
|
<small class="badge">$</small>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>false</code>, Config: <code>appendToBody</code>)</em> -
|
|
Should the tooltip be appended to '$body' instead of the parent element?</p>
|
|
</li>
|
|
<li><p><code>tooltip-class</code> -
|
|
Custom class to be applied to the tooltip.</p>
|
|
</li>
|
|
<li><p><code>tooltip-enable</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Is it enabled? It will enable or disable the configured tooltip-trigger.</p>
|
|
</li>
|
|
<li><p><code>tooltip-is-open</code>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Whether to show the tooltip.</p>
|
|
</li>
|
|
<li><p><code>tooltip-placement</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>top</code>, Config: <code>placement</code>)</em> -
|
|
Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The tooltip will attempt to position where it fits in the closest scrollable ancestor. Accepts:</p>
|
|
<ul>
|
|
<li><code>top</code> - tooltip on top, horizontally centered on host element.</li>
|
|
<li><code>top-left</code> - tooltip on top, left edge aligned with host element left edge.</li>
|
|
<li><code>top-right</code> - tooltip on top, right edge aligned with host element right edge.</li>
|
|
<li><code>bottom</code> - tooltip on bottom, horizontally centered on host element.</li>
|
|
<li><code>bottom-left</code> - tooltip on bottom, left edge aligned with host element left edge.</li>
|
|
<li><code>bottom-right</code> - tooltip on bottom, right edge aligned with host element right edge.</li>
|
|
<li><code>left</code> - tooltip on left, vertically centered on host element.</li>
|
|
<li><code>left-top</code> - tooltip on left, top edge aligned with host element top edge.</li>
|
|
<li><code>left-bottom</code> - tooltip on left, bottom edge aligned with host element bottom edge.</li>
|
|
<li><code>right</code> - tooltip on right, vertically centered on host element.</li>
|
|
<li><code>right-top</code> - tooltip on right, top edge aligned with host element top edge.</li>
|
|
<li><code>right-bottom</code> - tooltip on right, bottom edge aligned with host element bottom edge.</li>
|
|
</ul>
|
|
</li>
|
|
<li><p><code>tooltip-popup-close-delay</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>0</code>, Config: <code>popupCloseDelay</code>)</em> -
|
|
For how long should the tooltip remain open after the close trigger event?</p>
|
|
</li>
|
|
<li><p><code>tooltip-popup-delay</code>
|
|
<small class="badge">C</small>
|
|
<em>(Default: <code>0</code>, Config: <code>popupDelay</code>)</em> -
|
|
Popup delay in milliseconds until it opens.</p>
|
|
</li>
|
|
<li><p><code>tooltip-trigger</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>'mouseenter'</code>)</em> -
|
|
What should trigger a show of the tooltip? Supports a space separated list of event names, or objects (see below).</p>
|
|
</li>
|
|
</ul>
|
|
<p><strong>Note:</strong> To configure the tooltips, you need to do it on <code>$uibTooltipProvider</code> (also see below).</p>
|
|
<h3 id="triggers">Triggers</h3>
|
|
<p>The following show triggers are supported out of the box, along with their provided hide triggers:</p>
|
|
<ul>
|
|
<li><code>mouseenter</code>: <code>mouseleave</code></li>
|
|
<li><code>click</code>: <code>click</code></li>
|
|
<li><code>outsideClick</code>: <code>outsideClick</code></li>
|
|
<li><code>focus</code>: <code>blur</code></li>
|
|
<li><code>none</code></li>
|
|
</ul>
|
|
<p>The <code>outsideClick</code> trigger will cause the tooltip to toggle on click, and hide when anything else is clicked.</p>
|
|
<p>For any non-supported value, the trigger will be used to both show and hide the
|
|
tooltip. Using the 'none' trigger will disable the internal trigger(s), one can
|
|
then use the <code>tooltip-is-open</code> attribute exclusively to show and hide the tooltip.</p>
|
|
<h3 id="-uibtooltipprovider">$uibTooltipProvider</h3>
|
|
<p>Through the <code>$uibTooltipProvider</code>, you can change the way tooltips and popovers
|
|
behave by default; the attributes above always take precedence. The following
|
|
methods are available:</p>
|
|
<ul>
|
|
<li><p><code>setTriggers(obj)</code>
|
|
<em>(Example: <code>{ 'openTrigger': 'closeTrigger' }</code>)</em> -
|
|
Extends the default trigger mappings mentioned above with mappings of your own.</p>
|
|
</li>
|
|
<li><p><code>options(obj)</code> -
|
|
Provide a set of defaults for certain tooltip and popover attributes. Currently supports the ones with the <small class="badge">C</small> badge.</p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="known-issues">Known issues</h3>
|
|
<p>For Safari 7+ support, if you want to use the <strong>focus</strong> <code>tooltip-trigger</code>, you need to use an anchor tag with a tab index. For example:</p>
|
|
<pre><code><a tabindex="0" uib-tooltip="Test" tooltip-trigger="focus" class="btn btn-secondary">
|
|
Click Me
|
|
</a>
|
|
</code></pre><p>For Safari (potentially all versions up to 9), there is an issue with the hover CSS selector when using multiple elements grouped close to each other that are using the tooltip - it is possible for multiple elements to gain the hover state when mousing between the elements quickly and exiting the container at the right time. See <a href="https://github.com/angular-ui/bootstrap/issues/5445">issue #5445</a> for more details.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'tooltip')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><div ng-controller="TooltipDemoCtrl">
|
|
<div class="form-group">
|
|
<label>Tooltip placement</label>
|
|
<select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
|
|
</div>
|
|
<button tooltip-placement="{{placement.selected}}" uib-tooltip="On the {{placement.selected}}" type="button" class="btn btn-secondary">Tooltip {{placement.selected}}</button>
|
|
|
|
<hr />
|
|
<div class="form-group">
|
|
<label>Dynamic Tooltip Text</label>
|
|
<input type="text" ng-model="dynamicTooltipText" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Dynamic Tooltip Popup Text</label>
|
|
<input type="text" ng-model="dynamicTooltip" class="form-control">
|
|
</div>
|
|
<p>
|
|
Pellentesque <a href="#" uib-tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
|
|
sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
|
|
aliquam. Tincidunt lobortis feugiat vivamus at
|
|
<a href="#" tooltip-animation="false" uib-tooltip="I don't fade. :-(">fading</a>
|
|
eget arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
|
|
<a href="#" tooltip-popup-delay='1000' uib-tooltip='appears with delay'>show delay</a>
|
|
nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
|
|
<a href="#" tooltip-popup-close-delay='1000' uib-tooltip='hides with delay'>hide delay</a>
|
|
pharetra convallis posuere morbi leo urna,
|
|
<a href="#" uib-tooltip-template="'myTooltipTemplate.html'">Custom template</a>
|
|
at elementum eu, facilisis sed odio morbi quis commodo odio.
|
|
</p>
|
|
|
|
<p>
|
|
I can even contain HTML as a
|
|
<a href="#" uib-tooltip-html="htmlTooltip">scope variable</a> or
|
|
<a href="#" uib-tooltip-html="'static. {{dynamicTooltipText}}. <b>bold.</b>'">inline string</a>
|
|
</p>
|
|
|
|
<p>
|
|
<style>
|
|
/* Specify styling for tooltip contents */
|
|
.tooltip.customClass .tooltip-inner {
|
|
color: #880000;
|
|
background-color: #ffff66;
|
|
box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
|
}
|
|
/* Hide arrow */
|
|
.tooltip.customClass .tooltip-arrow {
|
|
display: none;
|
|
}
|
|
</style>
|
|
I can have a custom class. <a href="#" uib-tooltip="I can have a custom class applied to me!" tooltip-class="customClass">Check me out!</a>
|
|
</p>
|
|
|
|
|
|
<div class="form-group">
|
|
<label>Or use custom triggers, like focus: </label>
|
|
<input type="text" value="Click me!" uib-tooltip="See? Now click away..." tooltip-trigger="'focus'" tooltip-placement="right" class="form-control" />
|
|
</div>
|
|
|
|
<div class="form-group" ng-class="{'has-error' : !inputModel}">
|
|
<label>Disable tooltips conditionally:</label>
|
|
<input type="text" ng-model="inputModel" class="form-control"
|
|
placeholder="Hover over this for a tooltip until this is filled"
|
|
uib-tooltip="Enter something in this input field to disable this tooltip"
|
|
tooltip-placement="top"
|
|
tooltip-trigger="'mouseenter'"
|
|
tooltip-enable="!inputModel" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
Open tooltips <span uib-tooltip="Hello!" tooltip-is-open="tooltipIsOpen" tooltip-placement="bottom">conditionally.</span>
|
|
</label>
|
|
<button ng-click="tooltipIsOpen = !tooltipIsOpen">Toggle tooltip</button>
|
|
</div>
|
|
<script type="text/ng-template" id="myTooltipTemplate.html">
|
|
<span>Special Tooltip with <strong>markup</strong> and {{ dynamicTooltipText }}</span>
|
|
</script>
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope, $sce) {
|
|
$scope.dynamicTooltip = 'Hello, World!';
|
|
$scope.dynamicTooltipText = 'dynamic';
|
|
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
|
|
$scope.placement = {
|
|
options: [
|
|
'top',
|
|
'top-left',
|
|
'top-right',
|
|
'bottom',
|
|
'bottom-left',
|
|
'bottom-right',
|
|
'left',
|
|
'left-top',
|
|
'left-bottom',
|
|
'right',
|
|
'right-top',
|
|
'right-bottom'
|
|
],
|
|
selected: 'top'
|
|
};
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope, $sce) {
|
|
$scope.dynamicTooltip = 'Hello, World!';
|
|
$scope.dynamicTooltipText = 'dynamic';
|
|
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
|
|
$scope.placement = {
|
|
options: [
|
|
'top',
|
|
'top-left',
|
|
'top-right',
|
|
'bottom',
|
|
'bottom-left',
|
|
'bottom-right',
|
|
'left',
|
|
'left-top',
|
|
'left-bottom',
|
|
'right',
|
|
'right-top',
|
|
'right-bottom'
|
|
],
|
|
selected: 'top'
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<section id="typeahead">
|
|
<div class="page-header">
|
|
<h1>Typeahead<small>
|
|
(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/typeahead">ui.bootstrap.typeahead</a>)
|
|
</small></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 show-grid">
|
|
<style>
|
|
.typeahead-demo .custom-popup-wrapper {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
z-index: 1000;
|
|
display: none;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.typeahead-demo .custom-popup-wrapper > .message {
|
|
padding: 10px 20px;
|
|
border-bottom: 1px solid #ddd;
|
|
color: #868686;
|
|
}
|
|
|
|
.typeahead-demo .custom-popup-wrapper > .dropdown-menu {
|
|
position: static;
|
|
float: none;
|
|
display: block;
|
|
min-width: 160px;
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/ng-template" id="customTemplate.html">
|
|
<a class="dropdown-item">
|
|
<img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
|
|
<span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
|
|
</a>
|
|
</script>
|
|
|
|
<script type="text/ng-template" id="customPopupTemplate.html">
|
|
<div class="custom-popup-wrapper"
|
|
ng-style="{top: position().top+'px', left: position().left+'px'}"
|
|
style="display: block;"
|
|
ng-show="isOpen() && !moveInProgress"
|
|
aria-hidden="{{!isOpen()}}">
|
|
<p class="message">select location from drop down.</p>
|
|
|
|
<ul class="dropdown-menu" role="listbox">
|
|
<li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }"
|
|
ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
|
|
<div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</script>
|
|
|
|
<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
|
|
|
|
<h4>Static arrays</h4>
|
|
<pre>Model: {{selected | json}}</pre>
|
|
<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
|
|
|
|
<h4>Asynchronous results</h4>
|
|
<pre>Model: {{asyncSelected | json}}</pre>
|
|
<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
|
|
<i ng-show="loadingLocations" class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1639 1056q0 5-1 7-64 268-268 434.5t-478 166.5q-146 0-282.5-55t-243.5-157l-129 129q-19 19-45 19t-45-19-19-45v-448q0-26 19-45t45-19h448q26 0 45 19t19 45-19 45l-137 137q71 66 161 102t187 36q134 0 250-65t186-179q11-17 53-117 8-23 30-23h192q13 0 22.5 9.5t9.5 22.5zm25-800v448q0 26-19 45t-45 19h-448q-26 0-45-19t-19-45 19-45l138-138q-148-137-349-137-134 0-250 65t-186 179q-11 17-53 117-8 23-30 23h-199q-13 0-22.5-9.5t-9.5-22.5v-7q65-268 270-434.5t480-166.5q146 0 284 55.5t245 156.5l130-129q19-19 45-19t45 19 19 45z"/></svg>
|
|
</i>
|
|
<div ng-show="noResults">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/></svg>
|
|
</i>
|
|
No Results Found
|
|
</div>
|
|
|
|
<h4>ngModelOptions support</h4>
|
|
<pre>Model: {{ngModelOptionsSelected | json}}</pre>
|
|
<input type="text" ng-model="ngModelOptionsSelected" ng-model-options="modelOptions" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
|
|
|
|
<h4>Custom templates for results</h4>
|
|
<pre>Model: {{customSelected | json}}</pre>
|
|
<input type="text" ng-model="customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0">
|
|
|
|
<h4>Custom popup templates for typeahead's dropdown</h4>
|
|
<pre>Model: {{customPopupSelected | json}}</pre>
|
|
<input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p>Typeahead is a AngularJS version of <a href="http://getbootstrap.com/2.3.2/javascript.html#typeahead">Bootstrap v2's typeahead plugin</a>.
|
|
This directive can be used to quickly create elegant typeaheads with any form text input.</p>
|
|
<p>It is very well integrated into AngularJS as it uses a subset of the
|
|
<a href="http://docs.angularjs.org/api/ng.directive:select">select directive</a> syntax, which is very flexible. Supported expressions are:</p>
|
|
<ul>
|
|
<li><em>label</em> for <em>value</em> in <em>sourceArray</em></li>
|
|
<li><em>select</em> as <em>label</em> for <em>value</em> in <em>sourceArray</em></li>
|
|
</ul>
|
|
<p>The <code>sourceArray</code> expression can use a special <code>$viewValue</code> variable that corresponds to the value entered inside the input.</p>
|
|
<p>This directive works with promises, meaning you can retrieve matches using the <code>$http</code> service with minimal effort.</p>
|
|
<h3 id="uib-typeahead-settings">uib-typeahead settings</h3>
|
|
<ul>
|
|
<li><p><code>ng-model</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
Assignable angular expression to data-bind to.</p>
|
|
</li>
|
|
<li><p><code>ng-model-options</code>
|
|
<small class="badge">$</small> -
|
|
Options for ng-model (see <a href="https://docs.angularjs.org/api/ng/directive/ngModelOptions">ng-model-options directive</a>). Currently supports the <code>debounce</code> and <code>getterSetter</code> options.</p>
|
|
</li>
|
|
<li><p><code>typeahead-append-to</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
Should the typeahead popup be appended to an element instead of the parent element?</p>
|
|
</li>
|
|
<li><p><code>typeahead-append-to-body</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Should the typeahead popup be appended to $body instead of the parent element?</p>
|
|
</li>
|
|
<li><p><code>typeahead-editable</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Should it restrict model values to the ones selected from the popup only?</p>
|
|
</li>
|
|
<li><p><code>typeahead-focus-first</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
Should the first match automatically be focused as you type?</p>
|
|
</li>
|
|
<li><p><code>typeahead-focus-on-select</code>
|
|
<em>(Default: <code>true</code>)</em> -
|
|
On selection, focus the input element the typeahead directive is associated with.</p>
|
|
</li>
|
|
<li><p><code>typeahead-input-formatter</code>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>undefined</code>)</em> -
|
|
Format the ng-model result after selection.</p>
|
|
</li>
|
|
<li><p><code>typeahead-is-open</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>angular.noop</code>)</em> -
|
|
Binding to a variable that indicates if the dropdown is open.</p>
|
|
</li>
|
|
<li><p><code>typeahead-loading</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>angular.noop</code>)</em> -
|
|
Binding to a variable that indicates if matches are being retrieved asynchronously.</p>
|
|
</li>
|
|
<li><p><code>typeahead-min-length</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>1</code>)</em> -
|
|
Minimal no of characters that needs to be entered before typeahead kicks-in. Must be greater than or equal to 0.</p>
|
|
</li>
|
|
<li><p><code>typeahead-no-results</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>angular.noop</code>)</em> -
|
|
Binding to a variable that indicates if no matching results were found.</p>
|
|
</li>
|
|
<li><p><code>typeahead-should-select($event)</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
A callback executed when a <code>keyup</code> event that might trigger a selection occurs. Selection will only occur if this function returns true.</p>
|
|
</li>
|
|
<li><p><code>typeahead-on-select($item, $model, $label, $event)</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>null</code>)</em> -
|
|
A callback executed when a match is selected. $event can be undefined if selection not triggered from a user event.</p>
|
|
</li>
|
|
<li><p><code>typeahead-popup-template-url</code>
|
|
<em>(Default: <code>uib/template/typeahead/typeahead-popup.html</code>)</em> -
|
|
Set custom popup template.</p>
|
|
</li>
|
|
<li><p><code>typeahead-select-on-blur</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
On blur, select the currently highlighted match.</p>
|
|
</li>
|
|
<li><p><code>typeahead-select-on-exact</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Automatically select the item when it is the only one that exactly matches the user input.</p>
|
|
</li>
|
|
<li><p><code>typeahead-show-hint</code>
|
|
<small class="badge">$</small>
|
|
<em>(Default: <code>false</code>)</em> -
|
|
Show hint when the first option matches.</p>
|
|
</li>
|
|
<li><p><code>typeahead-template-url</code>
|
|
<em>(Default: <code>uib/template/typeahead/typeahead-match.html</code>)</em> -
|
|
Set custom item template.</p>
|
|
</li>
|
|
<li><p><code>typeahead-wait-ms</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i>
|
|
<em>(Default: <code>0</code>)</em> -
|
|
Minimal wait time after last character typed before typeahead kicks-in.</p>
|
|
</li>
|
|
<li><p><code>uib-typeahead</code>
|
|
<small class="badge">$</small>
|
|
<i class="glyphicon glyphicon-eye-open"></i> -
|
|
Comprehension Angular expression (see <a href="http://docs.angularjs.org/api/ng.directive:select">select directive</a>).</p>
|
|
</li>
|
|
</ul>
|
|
<p><strong>Notes</strong></p>
|
|
<p>If a custom template for the popup is used, the wrapper selector used for the match items is the <code>uib-typeahead-match</code> class.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row code">
|
|
<div class="col-md-12" ng-controller="PlunkerCtrl">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-info plunk-btn" ng-click="edit('1.6.1', '4.1.1', '3.0.6', 'typeahead')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
|
|
</i>
|
|
Edit in plunker
|
|
</button>
|
|
</div>
|
|
<uib-tabset active="activeTab">
|
|
<uib-tab index="0" heading="Markup">
|
|
<div plunker-content="markup">
|
|
<pre ng-non-bindable><code data-language="html"><style>
|
|
.typeahead-demo .custom-popup-wrapper {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
z-index: 1000;
|
|
display: none;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.typeahead-demo .custom-popup-wrapper > .message {
|
|
padding: 10px 20px;
|
|
border-bottom: 1px solid #ddd;
|
|
color: #868686;
|
|
}
|
|
|
|
.typeahead-demo .custom-popup-wrapper > .dropdown-menu {
|
|
position: static;
|
|
float: none;
|
|
display: block;
|
|
min-width: 160px;
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/ng-template" id="customTemplate.html">
|
|
<a class="dropdown-item">
|
|
<img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
|
|
<span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
|
|
</a>
|
|
</script>
|
|
|
|
<script type="text/ng-template" id="customPopupTemplate.html">
|
|
<div class="custom-popup-wrapper"
|
|
ng-style="{top: position().top+'px', left: position().left+'px'}"
|
|
style="display: block;"
|
|
ng-show="isOpen() && !moveInProgress"
|
|
aria-hidden="{{!isOpen()}}">
|
|
<p class="message">select location from drop down.</p>
|
|
|
|
<ul class="dropdown-menu" role="listbox">
|
|
<li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }"
|
|
ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
|
|
<div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</script>
|
|
|
|
<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
|
|
|
|
<h4>Static arrays</h4>
|
|
<pre>Model: {{selected | json}}</pre>
|
|
<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
|
|
|
|
<h4>Asynchronous results</h4>
|
|
<pre>Model: {{asyncSelected | json}}</pre>
|
|
<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
|
|
<i ng-show="loadingLocations" class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1639 1056q0 5-1 7-64 268-268 434.5t-478 166.5q-146 0-282.5-55t-243.5-157l-129 129q-19 19-45 19t-45-19-19-45v-448q0-26 19-45t45-19h448q26 0 45 19t19 45-19 45l-137 137q71 66 161 102t187 36q134 0 250-65t186-179q11-17 53-117 8-23 30-23h192q13 0 22.5 9.5t9.5 22.5zm25-800v448q0 26-19 45t-45 19h-448q-26 0-45-19t-19-45 19-45l138-138q-148-137-349-137-134 0-250 65t-186 179q-11 17-53 117-8 23-30 23h-199q-13 0-22.5-9.5t-9.5-22.5v-7q65-268 270-434.5t480-166.5q146 0 284 55.5t245 156.5l130-129q19-19 45-19t45 19 19 45z"/></svg>
|
|
</i>
|
|
<div ng-show="noResults">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/></svg>
|
|
</i>
|
|
No Results Found
|
|
</div>
|
|
|
|
<h4>ngModelOptions support</h4>
|
|
<pre>Model: {{ngModelOptionsSelected | json}}</pre>
|
|
<input type="text" ng-model="ngModelOptionsSelected" ng-model-options="modelOptions" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
|
|
|
|
<h4>Custom templates for results</h4>
|
|
<pre>Model: {{customSelected | json}}</pre>
|
|
<input type="text" ng-model="customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control" typeahead-show-hint="true" typeahead-min-length="0">
|
|
|
|
<h4>Custom popup templates for typeahead's dropdown</h4>
|
|
<pre>Model: {{customPopupSelected | json}}</pre>
|
|
<input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">
|
|
</div>
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
<uib-tab index="1" heading="JavaScript">
|
|
<div plunker-content="javascript">
|
|
<pre ng-non-bindable><code data-language="javascript">angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {
|
|
|
|
var _selected;
|
|
|
|
$scope.selected = undefined;
|
|
$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
|
|
// Any function returning a promise object can be used to load values asynchronously
|
|
$scope.getLocation = function(val) {
|
|
return $http.get('//maps.googleapis.com/maps/api/geocode/json', {
|
|
params: {
|
|
address: val,
|
|
sensor: false
|
|
}
|
|
}).then(function(response){
|
|
return response.data.results.map(function(item){
|
|
return item.formatted_address;
|
|
});
|
|
});
|
|
};
|
|
|
|
$scope.ngModelOptionsSelected = function(value) {
|
|
if (arguments.length) {
|
|
_selected = value;
|
|
} else {
|
|
return _selected;
|
|
}
|
|
};
|
|
|
|
$scope.modelOptions = {
|
|
debounce: {
|
|
default: 500,
|
|
blur: 250
|
|
},
|
|
getterSetter: true
|
|
};
|
|
|
|
$scope.statesWithFlags = [{'name':'Alabama','flag':'5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png'},{'name':'Alaska','flag':'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png'},{'name':'Arizona','flag':'9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png'},{'name':'Arkansas','flag':'9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png'},{'name':'California','flag':'0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png'},{'name':'Colorado','flag':'4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png'},{'name':'Connecticut','flag':'9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png'},{'name':'Delaware','flag':'c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png'},{'name':'Florida','flag':'f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png'},{'name':'Georgia','flag':'5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png'},{'name':'Hawaii','flag':'e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png'},{'name':'Idaho','flag':'a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png'},{'name':'Illinois','flag':'0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png'},{'name':'Indiana','flag':'a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png'},{'name':'Iowa','flag':'a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png'},{'name':'Kansas','flag':'d/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png'},{'name':'Kentucky','flag':'8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png'},{'name':'Louisiana','flag':'e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png'},{'name':'Maine','flag':'3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png'},{'name':'Maryland','flag':'a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png'},{'name':'Massachusetts','flag':'f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png'},{'name':'Michigan','flag':'b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png'},{'name':'Minnesota','flag':'b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png'},{'name':'Mississippi','flag':'4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png'},{'name':'Missouri','flag':'5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png'},{'name':'Montana','flag':'c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png'},{'name':'Nebraska','flag':'4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png'},{'name':'Nevada','flag':'f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png'},{'name':'New Hampshire','flag':'2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png'},{'name':'New Jersey','flag':'9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png'},{'name':'New Mexico','flag':'c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png'},{'name':'New York','flag':'1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png'},{'name':'North Carolina','flag':'b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png'},{'name':'North Dakota','flag':'e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png'},{'name':'Ohio','flag':'4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png'},{'name':'Oklahoma','flag':'6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png'},{'name':'Oregon','flag':'b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png'},{'name':'Pennsylvania','flag':'f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png'},{'name':'Rhode Island','flag':'f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png'},{'name':'South Carolina','flag':'6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png'},{'name':'South Dakota','flag':'1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png'},{'name':'Tennessee','flag':'9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png'},{'name':'Texas','flag':'f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png'},{'name':'Utah','flag':'f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png'},{'name':'Vermont','flag':'4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png'},{'name':'Virginia','flag':'4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png'},{'name':'Washington','flag':'5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png'},{'name':'West Virginia','flag':'2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png'},{'name':'Wisconsin','flag':'2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png'},{'name':'Wyoming','flag':'b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png'}];
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
</uib-tab>
|
|
</uib-tabset>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {
|
|
|
|
var _selected;
|
|
|
|
$scope.selected = undefined;
|
|
$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
|
|
// Any function returning a promise object can be used to load values asynchronously
|
|
$scope.getLocation = function(val) {
|
|
return $http.get('//maps.googleapis.com/maps/api/geocode/json', {
|
|
params: {
|
|
address: val,
|
|
sensor: false
|
|
}
|
|
}).then(function(response){
|
|
return response.data.results.map(function(item){
|
|
return item.formatted_address;
|
|
});
|
|
});
|
|
};
|
|
|
|
$scope.ngModelOptionsSelected = function(value) {
|
|
if (arguments.length) {
|
|
_selected = value;
|
|
} else {
|
|
return _selected;
|
|
}
|
|
};
|
|
|
|
$scope.modelOptions = {
|
|
debounce: {
|
|
default: 500,
|
|
blur: 250
|
|
},
|
|
getterSetter: true
|
|
};
|
|
|
|
$scope.statesWithFlags = [{'name':'Alabama','flag':'5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png'},{'name':'Alaska','flag':'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png'},{'name':'Arizona','flag':'9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png'},{'name':'Arkansas','flag':'9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png'},{'name':'California','flag':'0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png'},{'name':'Colorado','flag':'4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png'},{'name':'Connecticut','flag':'9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png'},{'name':'Delaware','flag':'c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png'},{'name':'Florida','flag':'f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png'},{'name':'Georgia','flag':'5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png'},{'name':'Hawaii','flag':'e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png'},{'name':'Idaho','flag':'a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png'},{'name':'Illinois','flag':'0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png'},{'name':'Indiana','flag':'a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png'},{'name':'Iowa','flag':'a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png'},{'name':'Kansas','flag':'d/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png'},{'name':'Kentucky','flag':'8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png'},{'name':'Louisiana','flag':'e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png'},{'name':'Maine','flag':'3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png'},{'name':'Maryland','flag':'a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png'},{'name':'Massachusetts','flag':'f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png'},{'name':'Michigan','flag':'b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png'},{'name':'Minnesota','flag':'b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png'},{'name':'Mississippi','flag':'4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png'},{'name':'Missouri','flag':'5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png'},{'name':'Montana','flag':'c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png'},{'name':'Nebraska','flag':'4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png'},{'name':'Nevada','flag':'f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png'},{'name':'New Hampshire','flag':'2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png'},{'name':'New Jersey','flag':'9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png'},{'name':'New Mexico','flag':'c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png'},{'name':'New York','flag':'1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png'},{'name':'North Carolina','flag':'b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png'},{'name':'North Dakota','flag':'e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png'},{'name':'Ohio','flag':'4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png'},{'name':'Oklahoma','flag':'6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png'},{'name':'Oregon','flag':'b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png'},{'name':'Pennsylvania','flag':'f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png'},{'name':'Rhode Island','flag':'f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png'},{'name':'South Carolina','flag':'6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png'},{'name':'South Dakota','flag':'1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png'},{'name':'Tennessee','flag':'9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png'},{'name':'Texas','flag':'f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png'},{'name':'Utah','flag':'f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png'},{'name':'Vermont','flag':'4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png'},{'name':'Virginia','flag':'4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png'},{'name':'Washington','flag':'5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png'},{'name':'West Virginia','flag':'2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png'},{'name':'Wisconsin','flag':'2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png'},{'name':'Wyoming','flag':'b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png'}];
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
</div>
|
|
</div><!-- /.container -->
|
|
</div><!-- /.main -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p>Designed and built by all ui-bootstrap <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">MIT 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 row">
|
|
<label class="col-sm-3 control-label text-right"><strong>Build</strong></label>
|
|
<div class="col-sm-9">
|
|
<span class="btn-group btn-group-sm">
|
|
<button type="button" class="btn btn-secondary" ng-model="options.minified" uib-btn-radio="true">Minified</button>
|
|
<button type="button" class="btn btn-secondary" ng-model="options.minified" uib-btn-radio="false">Uncompressed</button>
|
|
</span>
|
|
<small class="form-text">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 row">
|
|
<label class="col-sm-3 control-label text-right"><strong>Include Templates</strong></label>
|
|
<div class="col-sm-9">
|
|
<span class="btn-group btn-group-sm">
|
|
<button type="button" class="btn btn-secondary" ng-model="options.tpls" uib-btn-radio="true">Yes</button>
|
|
<button type="button" class="btn btn-secondary" ng-model="options.tpls" uib-btn-radio="false">No</button>
|
|
</span>
|
|
<small class="form-text">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 row">
|
|
<label class="col-sm-3 control-label text-right"><strong>npm</strong></label>
|
|
<div class="col-sm-9">
|
|
<pre style="margin-bottom:0;">npm install ui-bootstrap4</pre>
|
|
<small class="form-text"><a href="https://www.npmjs.com/" target="_blank">npm</a> is a package manager for the web.</small>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" ng-click="cancel()">Close</button>
|
|
<a class="btn btn-primary" ng-href="{{download('3.0.6')}}" download>
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M1344 1344q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm256 0q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm128-224v320q0 40-28 68t-68 28h-1472q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h465l135 136q58 56 136 56t136-56l136-136h464q40 0 68 28t28 68zm-325-569q17 41-14 70l-448 448q-18 19-45 19t-45-19l-448-448q-31-29-14-70 17-39 59-39h256v-448q0-26 19-45t45-19h256q26 0 45 19t19 45v448h256q42 0 59 39z"/>
|
|
</svg>
|
|
</i>
|
|
Download 3.0.6
|
|
</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()">
|
|
|
|
|
|
<div class="btn-group" style="width: 100%;">
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.collapse}"
|
|
ng-model="module.collapse"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('collapse', module.collapse)">
|
|
Collapse
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.tabindex}"
|
|
ng-model="module.tabindex"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('tabindex', module.tabindex)">
|
|
Tabindex
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.accordion}"
|
|
ng-model="module.accordion"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('accordion', module.accordion)">
|
|
Accordion
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-group" style="width: 100%;">
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.alert}"
|
|
ng-model="module.alert"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('alert', module.alert)">
|
|
Alert
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.buttons}"
|
|
ng-model="module.buttons"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('buttons', module.buttons)">
|
|
Buttons
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.carousel}"
|
|
ng-model="module.carousel"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('carousel', module.carousel)">
|
|
Carousel
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-group" style="width: 100%;">
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.common}"
|
|
ng-model="module.common"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('common', module.common)">
|
|
Common
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.dateparser}"
|
|
ng-model="module.dateparser"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('dateparser', module.dateparser)">
|
|
Dateparser
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.isClass}"
|
|
ng-model="module.isClass"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('isClass', module.isClass)">
|
|
Is Class
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-group" style="width: 100%;">
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.datepicker}"
|
|
ng-model="module.datepicker"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('datepicker', module.datepicker)">
|
|
Datepicker
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.position}"
|
|
ng-model="module.position"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('position', module.position)">
|
|
Position
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.datepickerPopup}"
|
|
ng-model="module.datepickerPopup"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('datepickerPopup', module.datepickerPopup)">
|
|
Datepicker Popup
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-group" style="width: 100%;">
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.debounce}"
|
|
ng-model="module.debounce"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('debounce', module.debounce)">
|
|
Debounce
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.multiMap}"
|
|
ng-model="module.multiMap"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('multiMap', module.multiMap)">
|
|
Multi Map
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.dropdown}"
|
|
ng-model="module.dropdown"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('dropdown', module.dropdown)">
|
|
Dropdown
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-group" style="width: 100%;">
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.stackedMap}"
|
|
ng-model="module.stackedMap"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('stackedMap', module.stackedMap)">
|
|
Stacked Map
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.modal}"
|
|
ng-model="module.modal"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('modal', module.modal)">
|
|
Modal
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.paging}"
|
|
ng-model="module.paging"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('paging', module.paging)">
|
|
Paging
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-group" style="width: 100%;">
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.pager}"
|
|
ng-model="module.pager"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('pager', module.pager)">
|
|
Pager
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.pagination}"
|
|
ng-model="module.pagination"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('pagination', module.pagination)">
|
|
Pagination
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.tooltip}"
|
|
ng-model="module.tooltip"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('tooltip', module.tooltip)">
|
|
Tooltip
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-group" style="width: 100%;">
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.popover}"
|
|
ng-model="module.popover"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('popover', module.popover)">
|
|
Popover
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.progressbar}"
|
|
ng-model="module.progressbar"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('progressbar', module.progressbar)">
|
|
Progressbar
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.rating}"
|
|
ng-model="module.rating"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('rating', module.rating)">
|
|
Rating
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="btn-group" style="width: 100%;">
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.tabs}"
|
|
ng-model="module.tabs"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('tabs', module.tabs)">
|
|
Tabs
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.timepicker}"
|
|
ng-model="module.timepicker"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('timepicker', module.timepicker)">
|
|
Timepicker
|
|
</button>
|
|
|
|
|
|
|
|
<button type="button" class="btn btn-secondary"
|
|
style="width: 33%; border-radius: 0;"
|
|
ng-class="{'btn-primary': module.typeahead}"
|
|
ng-model="module.typeahead"
|
|
uib-btn-checkbox
|
|
ng-change="selectedChanged('typeahead', module.typeahead)">
|
|
Typeahead
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" ng-click="cancel()">Close</button>
|
|
<button class="btn btn-primary" ng-hide="isOldBrowser()"
|
|
ng-disabled="isOldBrowser() !== false && !selectedModules.length"
|
|
ng-click="selectedModules.length && build(selectedModules, '3.0.6')">
|
|
<i class="fa-svg-icon">
|
|
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M1344 1344q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm256 0q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm128-224v320q0 40-28 68t-68 28h-1472q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h465l135 136q58 56 136 56t136-56l136-136h464q40 0 68 28t28 68zm-325-569q17 41-14 70l-448 448q-18 19-45 19t-45-19l-448-448q-31-29-14-70 17-39 59-39h256v-448q0-26 19-45t45-19h256q26 0 45 19t19 45v448h256q42 0 59 39z"/>
|
|
</svg>
|
|
</i>
|
|
Download {{selectedModules.length}} Modules
|
|
</button>
|
|
</div>
|
|
</script>
|
|
|
|
<script src="assets/smoothscroll-angular-custom.js"></script>
|
|
<script src="assets/uglifyjs.js"></script>
|
|
</body>
|
|
</html>
|