En este artículo, veremos cómo hacer un menú desplegable usando el arranque de la interfaz de usuario angular. Angular UI Bootstrap es un marco Angular JS creado por desarrolladores de Angular UI para proporcionar una mejor interfaz de usuario que se puede usar fácilmente.
<div uib-dropdown></div>
Descarga AngularUI desde el enlace:
https://angular-ui.github.io/bootstrap
Acercarse:
- Primero, agregue los scripts de arranque de la interfaz de usuario angular necesarios para su proyecto.
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js”></script>
<script src=”https://ajax.googleapis.com/ajax /libs/angularjs/1.6.1/angular-animate.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js ”></script>
<script src=”https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js”></script>
- Cree un menú desplegable con sus clases UIBootStrap que configurarán el aspecto de la interfaz de usuario para el menú desplegable.
- Ahora haga diferentes tipos de menús desplegables usando diferentes clases y ejecute el código.
Ejemplo:
HTML
<!DOCTYPE html>
<html ng-app="gfg">
<head>
<!-- Adding CDN scripts required for our page -->
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js">
</script>
<script src=
"https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js">
</script>
<script>
// Adding Modules
angular.module('gfg', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('gfg').controller('button', function ($scope) {
});
</script>
<link href=
"https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div ng-controller="button">
<!-- making a dropdown -->
<div class="btn-group" uib-dropdown>
<button type="button" class="btn btn-success">Click</button>
<button type="button" class="btn btn-success" uib-dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="dropdown-menu"
uib-dropdown-menu role="menu"
aria-labelledby="split-button">
<li role="menuitem">1st</li>
<li role="menuitem">2nd</li>
<li role="menuitem">3rd</li>
<li role="menuitem">5th</li>
</ul>
</div>
<div class="btn-group" uib-dropdown>
<button type="button"
class="btn btn-danger">Click</button>
<button type="button"
class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="dropdown-menu"
uib-dropdown-menu role="menu"
aria-labelledby="split-button">
<li role="menuitem">1st</li>
<li role="menuitem">2nd</li>
<li role="menuitem">3rd</li>
<li role="menuitem">5th</li>
</ul>
</div>
<div class="btn-group" uib-dropdown>
<button type="button" class="btn btn-warning">Click</button>
<button type="button"
class="btn btn-warning"
uib-dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="dropdown-menu"
uib-dropdown-menu role="menu"
aria-labelledby="split-button">
<li role="menuitem">1st</li>
<li role="menuitem">2nd</li>
<li role="menuitem">3rd</li>
<li role="menuitem">5th</li>
</ul>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://angular-ui.github.io/bootstrap/#!#dropdown