Descripción general del componente Angular Avatar
El componente Angular Avatar ayuda a agregar iniciales, imágenes o íconos de materiales a su aplicación.
Angular Avatar Example
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Getting Started with Ignite UI for Angular Avatar
Para comenzar con el componente Ignite UI for Angular Avatar, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
cmd
Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxAvatarModule
en su archivo app.module.ts.
// app.module.ts
...
import { IgxAvatarModule } from 'igniteui-angular';
// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxAvatarModule],
...
})
export class AppModule {}
typescript
Alternativamente, a partir de 16.0.0
puede importar IgxAvatarComponent
como una dependencia independiente.
// home.component.ts
...
import { IgxAvatarComponent } from 'igniteui-angular';
// import { IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-avatar shape="circle"></igx-avatar>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxAvatarComponent]
})
export class HomeComponent {}
typescript
Ahora que ha importado el módulo o componente Ignite UI for Angular Avatar, puede comenzar con una configuración básica del componente igx-avatar
.
Using the Angular Avatar Component
El componente Ignite UI for Angular Avatar viene en tres formas (cuadrada, redondeada y circular) y tres opciones de tamaño (pequeño, mediano y grande). Se puede utilizar para mostrar iniciales, imágenes o iconos.
Avatar Shape
Podemos cambiar la forma del avatar a través del atributo de shape
estableciendo su valor en square
, rounded
o circle
. Por defecto, la forma del avatar es square
.
<igx-avatar shape="circle"></igx-avatar>
html
Avatar displaying initials
Para obtener un avatar simple con initials
(es decir, JS para 'Jack Sock'), agregue el siguiente código dentro de la plantilla del componente:
<igx-avatar initials="JS" shape="circle"></igx-avatar>
html
Mejoremos nuestro avatar haciéndolo circular y de mayor tamaño.
<igx-avatar size="medium" initials="JS" shape="circle"></igx-avatar>
html
También podemos cambiar el fondo a través de la propiedad background
o establecer un color en las iniciales a través de la propiedad color
.
// avatar.component.scss
igx-avatar {
background: #e41c77;
color: #000000;
}
scss
La propiedad roundShape
del componente igx-avatar
ha quedado obsoleta. En su lugar, se debe utilizar el atributo shape
.
Si todo ha ido bien deberías ver algo como lo siguiente en el navegador:
Avatar displaying image
Para obtener un avatar que muestre una imagen, todo lo que tienes que hacer es configurar la fuente de la imagen a través de la propiedad src
.
<igx-avatar src="https://randomuser.me/api/portraits/men/1.jpg"
shape="rounded"
size="large">
</igx-avatar>
html
Si todo ha ido bien deberías ver algo como lo siguiente en el navegador:
Avatar displaying icon
De manera análoga, el avatar puede mostrar un ícono a través de la propiedad icon
. Actualmente se admiten todos los iconos del conjunto de iconos de materiales.
<igx-avatar icon="person"
shape="rounded"
size="small">
</igx-avatar>
html
Debería ver algo como esto:
Estilismo
Para comenzar a diseñar el avatar, necesitamos importar el archivo index
, donde se encuentran todas las funciones del tema y los mixins de componentes:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss
Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el avatar-theme
y acepta los parámetros $background
, $color
y $border-radius
.
Dado el siguiente marcado:
<div class="avatar-sample initials">
<igx-avatar initials="JS" size="medium"></igx-avatar>
</div>
html
Creamos el siguiente tema de avatar:
$custom-avatar-theme: avatar-theme(
$background: #72da67,
$color: #000000,
$border-radius: 16px
);
scss
El último paso es pasar el tema de avatar personalizado:
.initials {
@include css-vars($custom-avatar-theme);
}
scss
Si todo ha ido bien deberías ver algo como lo siguiente en el navegador:
Custom sizing
Puede utilizar la variable, dirigiéndose directamente a la--size
igx-avatar
variable :
igx-avatar {
--size: 200px;
}
scss
O bien, puede utilizar la variable universal--igx-avatar-size
para dirigirse a todas las instancias:
<div class="my-app">
<igx-avatar></igx-avatar>
</div>
html
.my-app {
--igx-avatar-size: 200px;
}
scss
También puede utilizar uno de los tamaños predefinidos, asignándolo a la--ig-size
variable, si no se aplica ningún atributo size. Los valores disponibles para--ig-size
son--ig-size-small
,,--ig-size-medium
y--ig-size-large
:
igx-avatar {
--ig-size: var(--ig-size-small);
}
scss
Obtén más información al respecto en el artículo Talla.
API References
Theming Dependencies
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.