UI Bootstrap
Bootstrap components written in pure AngularJS by the AngularUI Team
Getting started
Dependencies
This repository contains a set of native AngularJS directives based on Twitter Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:
- AngularJS (minimal version 1.0.4 or 1.1.2)
- Bootstrap CSS
Files to download
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 downloaded from here.
Alternativelly, if you are only interested in a subset of directives, you can create your own build.
Whichever method you choose the good news that the overall size of a download is very small: <20kB for all directives (~5kB with gzip compression!)
Accordion
The body of the accordion group grows to fit the contents
Description
The accordion directive 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.
We can control whether expanding an item will cause the other items to close, using the close-others
attribute on accordion.
The body of each accordion group is transcluded in to the body of the collapsible element.
<div ng-controller="AccordionDemoCtrl">
<label class="checkbox">
<input type="checkbox" ng-model="oneAtATime">
Open only one at a time
</label>
<accordion close-others="oneAtATime">
<accordion-group heading="Static Header">
This content is straight in the template.
</accordion-group>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</accordion-group>
<accordion-group heading="Dynamic Body Content">
<p>The body of the accordion group grows to fit the contents</p>
<button class="btn btn-small" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</accordion-group>
</accordion>
</div>
function AccordionDemoCtrl($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() {
$scope.items.push('Item ' + $scope.items.length);
};
}
Alert
Alert is an AngularJS-version of bootstrap's alert.
This directive can be used to generate alerts from the dynamic model data (using the ng-repeat directive);
<div ng-controller="AlertDemoCtrl">
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
<button class='btn' ng-click="addAlert()">Add Alert</button>
</div>
function AlertDemoCtrl($scope) {
$scope.alerts = [
{ type: 'error', 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);
};
}
Carousel
Slide {{$index}}
{{slide.text}}
- {{$index}}: {{slide.text}}
Enter a negative number to stop the interval.
Carousel creates a carousel similar to bootstrap's image carousel.
Use a <carousel>
element with <slide>
elements inside it. It will automatically cycle through the slides at a given rate, and a current-index variable will be kept in sync with the currently visible slide.
<div ng-controller="CarouselDemoCtrl">
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
<div class="row-fluid">
<div class="span6">
<ul>
<li ng-repeat="slide in slides">
<button class="btn btn-mini" ng-class="{'btn-info': !slide.active, 'btn-success': slide.active}" ng-disabled="slide.active" ng-click="slide.active = true">select</button>
{{$index}}: {{slide.text}}
</li>
</ul>
<a class="btn" ng-click="addSlide()">Add Slide</a>
</div>
<div class="span6">
Interval, in milliseconds: <input type="number" ng-model="myInterval">
<br />Enter a negative number to stop the interval.
</div>
</div>
</div>
function CarouselDemoCtrl($scope) {
$scope.myInterval = 5000;
$scope.slides = [
{image: 'http://placekitten.com/200/200',text: 'Kitten.'},
{image: 'http://placekitten.com/225/200',text: 'Kitty!'},
{image: 'http://placekitten.com/250/200',text: 'Cat.'},
{image: 'http://placekitten.com/275/200',text: 'Feline!'}
];
$scope.addSlide = function() {
$scope.slides.push({
image: 'http://placekitten.com/'+(200+25*Math.floor(Math.random()*4))+'/200',
text: ['More','Extra','Lots of','Surplus'][Math.floor(Math.random()*4)] + ' ' +
['Cats', 'Kittys', 'Felines', 'Cutes'][Math.floor(Math.random()*4)]
});
};
}
Dialog
Change options at will and press the open dialog button below!
Alternatively open a simple message box:
The $dialog
service allows you to open dialogs and message boxes from within your controllers. Very useful in case loading dialog content in the DOM up-front is tedious or not desired.
Creating custom dialogs is straightforward: create a partial view, its controller and reference them when using the service. Generic message boxes (title, message and buttons) are also provided for your convenience.
For more information, see the dialog readme on github.
<div ng-controller="DialogDemoCtrl">
<div class="row-fluid">
<div class="span6">
<label class="checkbox"><input type=checkbox ng-model="opts.backdrop">Show backdrop</label>
<label class="checkbox"><input type=checkbox ng-model="opts.modalFade">Fade modal dialog </label>
<label class="checkbox"><input type=checkbox ng-disabled="!opts.backdrop" ng-model="opts.backdropFade">Fade Backdrop</label>
<hr>
<label class="checkbox"><input type=checkbox ng-model="opts.keyboard">Close on Escape</label>
<label class="checkbox"><input type=checkbox ng-disabled="!opts.backdrop" ng-model="opts.backdropClick">Close on backdrop click</label>
</div>
<div class="span6">
<p>Change options at will and press the open dialog button below!</p>
<p><button class="btn btn-primary" ng-click="openDialog()">Open Dialog</button></p>
<p>Alternatively open a simple message box:</p>
<p><button class="btn btn-primary" ng-click="openMessageBox()">Open Message Box</button></p>
</div>
</div>
</div>
function DialogDemoCtrl($scope, $dialog){
// Inlined template for demo
var t = '<div class="modal-header">'+
'<h1>This is the title</h1>'+
'</div>'+
'<div class="modal-body">'+
'<p>Enter a value to pass to <code>close</code> as the result: <input ng-model="result" /></p>'+
'</div>'+
'<div class="modal-footer">'+
'<button ng-click="close(result)" class="btn btn-primary" >Close</button>'+
'</div>';
$scope.opts = {
backdrop: true,
keyboard: true,
backdropClick: true,
template: t, // OR: templateUrl: 'path/to/view.html',
controller: 'TestDialogController'
};
$scope.openDialog = function(){
var d = $dialog.dialog($scope.opts);
d.open().then(function(result){
if(result)
{
alert('dialog closed with result: ' + result);
}
});
};
$scope.openMessageBox = function(){
var title = 'This is a message box';
var msg = 'This is the content of the message box';
var btns = [{result:'cancel', label: 'Cancel'}, {result:'ok', label: 'OK', cssClass: 'btn-primary'}];
$dialog.messageBox(title, msg, btns)
.open()
.then(function(result){
alert('dialog closed with result: ' + result);
});
};
}
// the dialog is injected in the specified controller
function TestDialogController($scope, dialog){
$scope.close = function(result){
dialog.close(result);
};
}
Dropdown Toggle
DropdownToggle is a simple directive which will toggle a dropdown link on click. Simply put it on the <a>
tag of the toggler-element, and it will find the nearest dropdown menu and toggle it when the <a dropdown-toggle>
is clicked.
<li class="dropdown" ng-controller="DropdownCtrl">
<a class="dropdown-toggle">
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<a>{{choice}}</a>
</li>
</ul>
</li>
function DropdownCtrl($scope) {
$scope.items = [
"The first choice!",
"And another choice for you.",
"but wait! A third!"
];
}
Modal
I'm a modal!
Bootstrap's modal directive.
<div ng-controller="ModalDemoCtrl">
<button class="btn" ng-click="open()">Open me!</button>
<div modal="shouldBeOpen" close="close()">
<div class="modal-header">
<h4>I'm a modal!</h4>
</div>
<div class="modal-body">
with some content...
</div>
<div class="modal-footer">
<button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
</div>
</div>
</div>
var ModalDemoCtrl = function ($scope) {
$scope.open = function () {
$scope.shouldBeOpen = true;
};
$scope.close = function () {
$scope.closeMsg = 'I was closed at: ' + new Date();
$scope.shouldBeOpen = false;
};
};
Pagination
A lightweight pagination directive that is focused on ... providing pagination!
It will take care of visualising a pagination bar. Additionally it will make sure that the state (enabled / disabled) of the Previous / Next buttons is maintained correctly.
It also provides optional attribute max-size to limit the size of pagination bar.
<div ng-controller="PaginationDemoCtrl">
<pagination num-pages="noOfPages" current-page="currentPage" class="pagination-large"></pagination>
<pagination num-pages="noOfPages" current-page="currentPage"></pagination>
<pagination num-pages="noOfPages" current-page="currentPage" class="pagination-small"></pagination>
<pagination num-pages="noOfPages" current-page="currentPage" class="pagination-mini"></pagination>
<pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
<button class="btn" ng-click="setPage(3)">Set current page to: 3</button>
The selected page no: {{currentPage}}
</div>
var PaginationDemoCtrl = function ($scope) {
$scope.noOfPages = 7;
$scope.currentPage = 4;
$scope.maxSize = 5;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
};
Tabs
AngularJS version of the tabs directive.
<div ng-controller="TabsDemoCtrl">
<tabs>
<pane heading="Static title">Static content</pane>
<pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">{{pane.content}}</pane>
</tabs>
<div class="row-fluid">
<button class="btn" ng-click="panes[0].active = true">Select second tab</button>
<button class="btn" ng-click="panes[1].active = true">Select third tab</button>
</div>
</div>
var TabsDemoCtrl = function ($scope) {
$scope.panes = [
{ title:"Dynamic Title 1", content:"Dynamic content 1" },
{ title:"Dynamic Title 2", content:"Dynamic content 2" }
];
};
Tooltip
Pellentesque {{dynamicTooltipText}}, sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in aliquam. Tincidunt lobortis feugiat vivamus at left eget arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur right nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas bottom pharetra convallis posuere morbi leo urna, fading at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus turpis massa tincidunt dui ut.
A lightweight, extensible directive for fancy tooltip creation. The tooltip directive supports multiple placements, optional transition animation, and more.
<div ng-controller="TooltipDemoCtrl">
<div class="well">
<div>Dynamic Tooltip Text: <input type="text" ng-model="dynamicTooltipText"></div>
<div>Dynamic Tooltip Popup Text: <input type="text" ng-model="dynamicTooltip"></div>
<p>
Pellentesque <a><span tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</span></a>,
sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
aliquam. Tincidunt lobortis feugiat vivamus at
<a><span tooltip-placement="left" tooltip="On the Left!">left</span></a> eget
arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
<a><span tooltip-placement="right" tooltip="On the Right!">right</span></a>
nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
<a><span tooltip-placement="bottom" tooltip="On the Bottom!">bottom</span></a>
pharetra convallis posuere morbi leo urna,
<a><span tooltip-animation="true" tooltip="I fade in and out!">fading</span></a>
at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
turpis massa tincidunt dui ut.
</p>
</div>
</div>
var TooltipDemoCtrl = function ($scope) {
$scope.dynamicTooltip = "Hello, World!";
$scope.dynamicTooltipText = "dynamic";
};