UNPKG

angular-ui-bootstrap

Version:

Native AngularJS (Angular) directives for Bootstrap

64 lines (46 loc) 2.43 kB
Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically. This directive is composed by three parts: * `uib-dropdown` which transforms a node into a dropdown. * `uib-dropdown-toggle` which allows the dropdown to be toggled via click. This directive is optional. * `uib-dropdown-menu` which transforms a node into the popup menu. Each of these parts need to be used as attribute directives. ### uib-dropdown settings * `auto-close` _(Default: `always`)_ - Controls the behavior of the menu when clicked. * `always` - Automatically closes the dropdown when any of its elements is clicked. * `disabled` - Disables the auto close. You can control it manually with `is-open`. It still gets closed if the toggle is clicked, `esc` is pressed or another dropdown is open. * `outsideClick` - Closes the dropdown automatically only when the user clicks any element outside the dropdown. * `dropdown-append-to` <small class="badge">$</small> _(Default: `null`)_ - Appends the inner dropdown-menu to an arbitrary DOM element. * `dropdown-append-to-body` <small class="badge">B</small> _(Default: `false`)_ - Appends the inner dropdown-menu to the body element if the attribute is present without a value, or with a non `false` value. * `is-open` <small class="badge">$</small> <i class="glyphicon glyphicon-eye-open"></i> _(Default: `false`)_ - Defines whether or not the dropdown-menu is open. The `uib-dropdown-toggle` will toggle this attribute on click. * `keyboard-nav`: <small class="badge">B</small> _(Default: `false`)_ - Enables navigation of dropdown list elements with the arrow keys. * `on-toggle(open)` <small class="badge">$</small> - An optional expression called when the dropdown menu is opened or closed. ### uib-dropdown-menu settings * `template-url` _(Default: `none`)_ - You may specify a template for the dropdown menu. Check the demos for an example. ### Additional settings `uibDropdownConfig` * `appendToOpenClass` _(Default: `uib-dropdown-open`)_ - Class to apply when the dropdown is open and appended to a different DOM element. * `openClass` _(Default: `open`)_ - Class to apply when the dropdown is open. ### Known issues For usage with ngTouch, it is recommended to use the programmatic `is-open` trigger with ng-click - this is due to ngTouch decorating ng-click to prevent propagation of the event.