En este artículo, veremos cómo crear pestañas 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.
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 una pestaña con sus clases UIBootStrap que configurarán la apariencia de la interfaz de usuario para la pestaña.
- Ahora haga diferentes tipos de pestañas usando diferentes clases y ejecute el código.
Ejemplo 1: Realización de pestañas con contenido justificado.
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>
<link href=
"https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<script>
// Adding Modules
angular.module('gfg', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('gfg').controller('tab', function ($scope) {
});
</script>
</head>
<body>
<div ng-controller="tab"
style="padding: 10px; margin: 10px; border-style: double;">
<!-- making a tab -->
<uib-tabset active="activeJustified" justified="true">
<uib-tab index="0" heading="Column-1">
Column-1 Content
</uib-tab>
<uib-tab index="1" heading="Column-2">
Column-2 Content
</uib-tab>
<uib-tab index="2" heading="Column-3">
Column-3 Content
</uib-tab>
</uib-tabset>
</div>
</body>
</html>
Producción:
Ejemplo 2:
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>
<link href=
"https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
<script>
// Adding Modules
angular.module('gfg', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('gfg').controller('tab', function ($scope) {
});
</script>
</head>
<body>
<div ng-controller="tab"
style="padding: 10px; margin: 10px; border-style: double;">
<!-- making a tab -->
<uib-tabset active="activePill" vertical="true" type="pills">
<uib-tab index="0" heading="Row-1">
Row-1 Content
</uib-tab>
<uib-tab index="1" heading="Row-2">
Row-2 Content
</uib-tab>
<uib-tab index="2" heading="Row-3">
Row-3 Content
</uib-tab>
</uib-tabset>
</div>
</body>
</html>
Producción:
