Name | type | default | description |
---|---|---|---|
backdrop | boolean or the string 'static' |
'static' | Includes a modal-backdrop element. Alternatively, specify static for a
backdrop
which doesn't close the modal on click.
|
keyboard | boolean | true | Closes the modal when escape key is pressed |
onBeforeChange | function | undefined | Function that gets called before every change of modal state. If this function returns true, action is prevented. |
All option defaults are configurable in 'Modal' provider and can be changed via attributes. |
<div class="modal fade" data-bs-modal="modal.exampleModal" data-backdrop="'static'" data-keyboard="false"> ... </div>
<div bs-dropdown="dropdown"> <button bs-dropdown-toggle class="btn btn-primary dropdown-toggle">Toggle dropdown</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>
<a data-ng-click="dropdown=true;$event.stopPropagation()">Show dropdown by binding</a>
Dropdown will be converted to 'dropup' if it would overflow given boundary element (red border).
<div bs-dropdown-boundary> <div bs-dropdown...> ... </div> </div>
Optionally, you can pass boundary element (jqLite instance) via 'boundary-element' attribute.
Name | Type | Default | Description |
---|---|---|---|
animation | boolean | true | Apply a CSS fade transition to the tooltip |
delay | number | object | 0 | Delay showing and hiding the tooltip (ms) If a number is supplied, delay is applied to both hide/show Object structure is: |
html | boolean | false | Allow HTML in the tooltip. |
placement | string | 'bottom' | How to position the tooltip - top | bottom | left | right | auto. |
title | string | '' | Default title value if |
trigger | string | 'hover focus' | How tooltip is triggered - click | hover | focus. You may pass multiple triggers; separate them with a space. |
All option defaults are configurable in 'Tooltip' provider and can be changed via attributes. |
<bs-tooltip placement="left">Tooltip on left</bs-tooltip> <bs-tooltip placement="top">Tooltip on top</bs-tooltip> <bs-tooltip placement="bottom">Tooltip on bottom</bs-tooltip> <bs-tooltip placement="right">Tooltip on right</bs-tooltip>
<span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="left">Title left</span> <span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="right">Title right</span> <span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="top">Title top</span> <span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="bottom">Title bottom</span>
Tooltip will be adjusted to display within boundary element (red border)
<div bs-tooltip-boundary> <span class="btn btn-secondary" bs-tooltip-toggle title="title" placement="auto"> Title auto </span> </div>
<span class="btn btn-secondary" bs-tooltip-toggle="tooltip" title="{{title}} " html="true" trigger="click">Title on click</span> <input type="text" ng-model="title"/> <span class="btn btn-secondary" ng-click="tooltip=!tooltip">Remote trigger</span>
<button class="btn btn-secondary" title="Test">Hover me!</button> ----- directive('title', ['bsTooltipFactory', function(bsTooltipFactory){ return bsTooltipFactory.customBindingDirective(); }]);
Name | Type | Default | Description |
---|---|---|---|
animation | boolean | true | Apply a CSS fade transition to the popover |
content | string | '' | Default content value if |
delay | number | object | 0 | Delay showing and hiding the popover (ms) If a number is supplied, delay is applied to both hide/show Object structure is: |
html | boolean | false | Allow HTML in the popover title/content. |
placement | string | 'right' | How to position the popover - top | bottom | left | right | auto.
|
title | string | '' | Default title value if |
trigger | string | 'click' | How popover is triggered - click | hover | focus. You may pass multiple triggers; separate them with a space. |
<bs-popover placement="top"> <bs-popover-title>Popover top</bs-popover-title> <bs-popover-content>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </bs-popover-content> </bs-popover>
<span class="btn btn-secondary" bs-popover-toggle content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="left">Popover on left</span> <span class="btn btn-secondary" bs-popover-toggle content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">Popover on top</span> <span class="btn btn-secondary" bs-popover-toggle content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="bottom">Popover on bottom</span> <span class="btn btn-secondary" bs-popover-toggle content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="right">Popover on right</span>
Popover will be adjusted to display within boundary element (red border)
<div bs-tooltip-boundary> <span class="btn btn-secondary" bs-tooltip title="title" placement="left auto"> Popover auto </span> </div>
<span class="btn btn-secondary" bs-popover-toggle trigger="focus"...> Popover on focus </span> <span class="btn btn-secondary" bs-popover-toggle="popover" trigger="hover"...> Popover on hover </span> <span class="btn btn-secondary" ng-click="popover=!popover"...> Remote trigger </span>
<span class="btn btn-primary" ng-click="collapse=!collapse">Toggle collapse</span> <div bs-collapse="collapse"> <div class="well"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div>
<div class="panel-group" bs-collapse-group> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a role="button" ng-click="tab1=!tab1"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse" bs-collapse="tab1"> <div class="panel-body">...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title" ng-init="tab2=true"> <a class="collapsed" ng-click="tab2=!tab2"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse" bs-collapse="tab2"> <div class="panel-body">...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title" ng-init="tab3=true"> <a class="collapsed" ng-click="tab3=!tab3"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse" bs-collapse="tab3"> <div class="panel-body">...</div> </div> </div> </div>
Name | type | default | description |
---|---|---|---|
interval | number | 5000 | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
pause | string | null | "hover" | If set to "hover" , pauses the cycling of the carousel on mouseenter
and resumes the cycling of the carousel on mouseleave . If set to null ,
hovering over the carousel won't pause it.
|
wrap | boolean | true | Whether the carousel should cycle continuously or have hard stops. |
keyboard | boolean | true |
Whether the carousel should react to keyboard events.
You need to set a tabindex attribute on carousel for this to work.
|
<div class="carousel" bs-carousel tabindex="0"> <bs-carousel-indicators></bs-carousel-indicators> <div class="carousel-inner"> <div class="item" bs-carousel-item> <img alt="..." src="..."/> </div> <div class="item" bs-carousel-item> <img alt="..." src="..."/> </div> </div> <a href="#" class="left carousel-control" bs-carousel-nav="left"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a href="#" class="right carousel-control" bs-carousel-nav="right"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
<button type="button" class="btn btn-outline-primary mb-3" ng-click="$root.toast=true"> Show toast </button> <bs-toast visible="$root.toast"> <bs-toast-header> <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="ml-2 mb-1 close" ng-click="$root.toast=false"> <span>×</span> </button> </bs-toast-header> <bs-toast-body> Hello, world! This is a toast message. </bs-toast-body> </bs-toast>
Name | Type | Default | Description |
---|---|---|---|
animation | boolean | true | Apply a CSS fade transition to the toast |
All option defaults are configurable in 'Toasts' provider and can be changed via attributes. |