En este artículo, veremos cómo crear botones 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.
La directiva de botones se usa para hacer botones.
<buttonclass='btn btn-primary'>button</button>
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 botón con sus clases UIBootStrap que establecerán la apariencia de la interfaz de usuario para los botones.
- Ahora haga diferentes tipos de botones 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 primary button -->
<button class="btn btn-primary">Primary Button</button>
<br>
<br>
<!-- Making a succes button -->
<button class="btn btn-success">Success Button</button>
<br>
<br>
<!-- Making a default button -->
<button class="btn btn-default">Default Button</button>
<br>
<br>
<!-- Making a danger button -->
<button class="btn btn-danger">Danger Button</button>
<br>
<br>
<!-- Making a warning button -->
<button class="btn btn-warning">Warning Button</button>
<br>
<br>
<!-- Making a label primary button -->
<label class="btn btn-primary">
Primary Button using label
</label>
</div>
</body>
</html>
Producción:
Referencia: https://angular-ui.github.io/bootstrap/#!#buttons