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 Avatar en Angular PrimeNG. Aprendamos sobre las propiedades, el estilo y sus sintaxis que se utilizarán en el código.
Componente Avatar: Se utiliza para representar a una persona como icono, imagen o etiqueta.
Propiedades de Avatar:
- etiqueta : Se utiliza para definir el texto a mostrar. Es de tipo de datos de string, el valor predeterminado es nulo.
- icon : Se utiliza para definir el icono a mostrar. Es de tipo de datos de string, el valor predeterminado es nulo.
- image : Se utiliza para definir la imagen a mostrar. Es de tipo de datos de string, el valor predeterminado es nulo.
- tamaño : Se utiliza para establecer el tamaño del elemento, las opciones válidas son «grande» y «xgrande». Es de tipo de datos de string, el valor predeterminado es nulo.
- forma : Se utiliza para establecer la forma del elemento, las opciones válidas son «cuadrado» y «círculo». Es de tipo de datos de string, el valor predeterminado es cuadrado.
- style : se utiliza para establecer el estilo en línea del componente. Es de tipo de datos de objeto, el valor predeterminado es nulo.
- styleClass : Se utiliza para definir la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
Propiedades para AvatarGroup:
- style : Aquí, también en este caso, se usa para establecer el estilo en línea del componente. Es de tipo de datos de objeto, el valor predeterminado es nulo.
- styleClass : Aquí, en este caso también, se usa para definir la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
Estilo de Avatar:
- p-avatar : Es el elemento contenedor.
- p-avatar-image : Es el elemento contenedor en modo imagen.
- p-avatar-circle: Es el elemento contenedor con forma de círculo.
- p-avatar-text : Es el elemento de texto del avatar.
- p-avatar-icon : Es el icono de estilo del avatar.
- p-avatar-lg : Es el elemento contenedor de gran tamaño.
- p-avatar-xl: Es el elemento contenedor con tamaño xlarge.
Estilo de AvatarGroup:
- p-avatar-group: Se utiliza para el contenedor de un elemento.
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 muestra cómo usar el componente de avatar.
app.component.html
<h2>GeeksforGeeks</h2>
<h5>PrimeNg Avatar Component</h5>
<p-avatar label="A" styleClass="p-mr-1"></p-avatar>
<p-avatar
label="B"
styleClass="p-mr-1"
size="large"
[style]="{'background-color':'#3714e3', 'color': '#ffffff'}">
</p-avatar>
<p-avatar
label="C"
styleClass="p-mr-1"
size="xlarge"
[style]="{'background-color':'#1eff00', 'color': '#ff8400'}">
</p-avatar>
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { AvatarModule } from "primeng/avatar";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
AvatarModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Ejemplo 2: En este ejemplo, crearemos avatares en forma de círculo con íconos.
app.component.html
<div class="card">
<h5>Circle shaped avatar with icon</h5>
<div>
<p-avatar
icon="pi pi-user"
size="small"
[style]="{'background-color': 'red', 'color': '#ffffff'}"
shape="circle">
</p-avatar>
</div>
<div>
<p-avatar
icon="pi pi-user"
[style]="{'background-color': 'black', 'color': '#ffffff'}"
shape="circle">
</p-avatar>
</div>
<div>
<p-avatar
icon="pi pi-user"
size="large"
[style]="{'background-color':'green', 'color': '#ffffff'}"
shape="circle">
</p-avatar>
</div>
<div>
<p-avatar icon="pi pi-user" size="xlarge" shape="circle"></p-avatar>
</div>
</div>
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { AvatarModule } from "primeng/avatar";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
AvatarModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/avatar