Componente Angular PrimeNG TabView

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente TabView en Angular PrimeNG. También aprenderemos sobre las propiedades, los eventos, el estilo y sus sintaxis que se utilizarán en el código.  

Componente TabView: Se utiliza para mostrar contenido en forma de pestañas. 

Propiedades de TabView:

• activeIndex: Especifica el índice de la pestaña activa para cambiar la pestaña seleccionada mediante programación. Acepta el tipo de datos de número y el valor predeterminado es nulo.
• controlClose: se utiliza para especificar si el cierre de la pestaña se controla en el evento onClose o no. Es de tipo de datos booleano y el valor predeterminado es falso.
• estilo: Es el estilo en línea del componente. Es de tipo de datos de string y el valor predeterminado es nulo.
• styleClass: Es la clase de estilo del componente. Es de tipo de datos de string y el valor predeterminado es nulo.

Propiedades de TabPanel:

• header : Especifica el título del tabPanel. Es de tipo de datos de string y el valor predeterminado es nulo.
• seleccionado : Define si la pestaña está activa. Es de tipo de datos booleano y el valor predeterminado es falso.
• disabled : especifica que la pestaña no se puede activar cuando su valor es verdadero. Es de tipo de datos booleano y el valor predeterminado es falso.
• cerrable : Define si la pestaña se puede quitar. Es de tipo de datos booleano y el valor predeterminado es falso.
• headerStyle : es un estilo en línea del encabezado de la pestaña. Es de tipo de datos de string y el valor predeterminado es nulo.
• headerStyleClass : Especifica la clase de estilo del encabezado de la pestaña. Es de tipo de datos de string y el valor predeterminado es nulo.
• caché : especifica si un panel con carga diferida debe evitar que se vuelva a cargar al volver a seleccionarlo. Es de tipo de datos booleano y el valor predeterminado es verdadero.
• información sobre herramientas : especifica la información de asesoramiento que se mostrará en una información sobre herramientas al pasar el mouse por encima. Acepta cualquier tipo de datos y el valor predeterminado es nulo.
• tooltipStyleClass : Especifica la clase de estilo de la información sobre herramientas. Es de tipo de datos de string y el valor predeterminado es nulo.
• tooltipPosition : Especifica la posición de la información sobre herramientas, los valores válidos son derecha, izquierda, arriba y abajo. Es del tipo de datos de string y el valor predeterminado es superior.
• tooltipPositionStyle : Especifica el tipo de posición CSS. Es de tipo de datos de string y el valor predeterminado es absoluto

Eventos:

• onChange: Es una devolución de llamada que se dispara al cambiar de pestaña.
• onClose: es una devolución de llamada que se activa al cerrar la pestaña.

Estilo:

• p-tabview : Es el elemento contenedor
• p-tabview-nav : Es el contenedor de encabezados.
• p-tabview-selected: Es el encabezado de la pestaña seleccionada.
• p-tabview-panels: Son los paneles contenedores.
• p-tabview-panel: Es el contenido de una pestaña.

Creación de aplicaciones angulares e instalación de módulos:

• Paso 1: Cree una aplicación Angular usando el siguiente comando.

ng new appname

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

npm install primeng --save
npm install primeicons --save

Estructura del proyecto: se verá así:

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente TabView.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG TabView Component</h5>
<p-tabView>
  <p-tabPanel header="TabView Component">
    <p>Content1</p>
  </p-tabPanel>
  <p-tabPanel header="TabView Component">
    <p>Content2</p>
  </p-tabPanel>
  <p-tabPanel header="TabView Component">
    <p>Content3</p>
  </p-tabPanel>
</p-tabView>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { TabViewModule } from "primeng/tabview";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            TabViewModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad cerrable en el componente Tabview.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG TabView Component</h5>
<p-tabView >
    <p-tabPanel header="TabView Component" closable='true'>
        <p>Content1</p>
    </p-tabPanel>
    <p-tabPanel header="TabView Component" closable='true'>
        <p>Content2</p>
    </p-tabPanel>
    <p-tabPanel header="TabView Component" closable='true'>
        <p>Content3</p>
    </p-tabPanel>
</p-tabView>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { TabViewModule } from "primeng/tabview";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            TabViewModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/tabview