Accordian

This content is straight in the template. {{group.content}}

The body of the uib-accordion group grows to fit the contents

{{item}}
Hello

Please, to delete your account, click the button below

I can have markup, too! This is just some content to illustrate fancy headings.

Carousel

Interval, in milliseconds:
Enter a negative number or 0 to stop the interval.

Collapse


Some content

Dateparser

Formatting codes playground

Date picker

Selected date is: {{dt | date:'fullDate' }}

Inline

Popup


Dropdown

Click me for a dropdown, yo!



append-to vs. append-to-body vs. inline example

Modal

Selection from a modal: {{ selected }}

Pager

Pager

You are currently on page {{currentPage}}

Pagination

Default

The selected page no: {{currentPage}}

Limit the maximum visible buttons

rotate defaulted to true:
rotate defaulted to true and force-ellipses set to true:
rotate set to false:
boundary-link-numbers set to true and rotate defaulted to true:
boundary-link-numbers set to true and rotate set to false:
Page: {{bigCurrentPage}} / {{numPages}}

Popover

Dynamic


Positional


Triggers


Other

Position

$uibPosition service

Demo element

offsetParent: {{elemVals.offsetParent}}
scrollParent: {{elemVals.scrollParent}}
scrollbarWidth: {{scrollbarWidth}}
position: {{elemVals.position}}
offset: {{elemVals.offset}}
viewportOffset: {{elemVals.viewportOffset}}
positionElements: {{elemVals.positionElements}}

Progressbar

Static

22%
166 / 200

Dynamic

{{dynamic}} / {{max}} No animation {{dynamic}}% Object (changes type based on value) {{type}} !!! Watch out !!!

Stacked

{{bar.value}}%

Rating

Default

{{percent}}%
Rate: {{rate}} - Readonly is: {{isReadonly}} - Hovering over: {{overStar || "none"}}

Custom icons

(Rate: {{x}})
(Rate: {{y}})

Tabs

Select a tab by setting active binding to true:


Static content {{tab.content}} Alert! I've got an HTML heading, and a select callback. Pretty cool!
Vertical content 1 Vertical content 2
Justified content Short Labeled Justified content Long Labeled Justified content
Tabbed pills with CSS classes Tab 1 content Tab 2 content
Tabs using nested forms:
Some Tab Content More Tab Content
Model:
{{ model | json }}
Nested Form:
{{ outerForm.nestedForm | json }}

Timepicker

Time is: {{mytime | date:'shortTime' }}
Hours step is:
Minutes step is:

Tooltip


Pellentesque {{dynamicTooltipText}}, sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in aliquam. Tincidunt lobortis feugiat vivamus at fading eget arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur show delay nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas hide delay pharetra convallis posuere morbi leo urna, Custom template at elementum eu, facilisis sed odio morbi quis commodo odio.

I can even contain HTML. Check me out!

I can have a custom class. Check me out!

Typehead

Static arrays

Model: {{selected | json}}

Asynchronous results

Model: {{asyncSelected | json}}
No Results Found

ngModelOptions support

Model: {{ngModelOptionsSelected | json}}

Custom templates for results

Model: {{customSelected | json}}

Custom popup templates for typeahead's dropdown

Model: {{customPopupSelected | json}}