¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:
npm install igniteui-react
cmd
A continuación, tendrás que importar el IgrAvatar CSS necesario y registrar su módulo, así:
Para obtener una introducción completa a la Ignite UI for React, lea el tema Primeros pasos.
Es IgrAvatar capaz de mostrar imágenes, iniciales o cualquier otro contenido, incluidos iconos. Declarar an IgrAvatar es tan simple como:
<IgrAvatar />tsx
El avatar tiene varios atributos que permiten representar contenido diferente según el contexto. La forma más básica de mostrar contenido dentro de los límites del avatar es proporcionar contenido entre las etiquetas de apertura y cierre.
<IgrAvatar><IgrIconname="home" /></IgrAvatar>tsx
Iniciales
Si se establece el atributo initials, se ignorarán todos los elementos secundarios del avatar y se mostrará la cadena pasada a este atributo.
El avatar también puede mostrar una imagen cuando al atributo src se le asigna una URL válida a un activo estático. En ese caso, se ignorará el valor initials y los elementos secundarios no se representarán.
<IgrAvatarinitials="AZ"src="https://static.infragistics.com/xplatform/images/people/men/1.jpg"alt="A photo of a man."><IgrIconname="home" /></IgrAvatar>tsx
EXAMPLE
TSX
importReactfrom'react';
importReactDOMfrom'react-dom/client';
import'./index.css';
import { IgrAvatarModule, IgrAvatar } from"@infragistics/igniteui-react";
import'igniteui-webcomponents/themes/light/bootstrap.css';
IgrAvatarModule.register();
exportdefaultclass AvatarImage extendsReact.Component<any, any> {
constructor(props: any) {
super(props);
}
publicrender(): JSX.Element {
return (
<divclassName="container sample"><IgrAvatarsrc="https://static.infragistics.com/xplatform/images/people/men/1.jpg"alt="A photo of a man." /></div>
);
}
}
// rendering above class to the React DOMconstroot = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AvatarImage/>);
tsx
Forma
El avatar admite tres formas: circle, rounded y square. La forma predeterminada del avatar es square y se puede cambiar mediante el atributo shape.
Además de la forma, el tamaño del avatar también se puede cambiar utilizando la variable CSS--ig-size. Los tamaños admitidos son small (predeterminado), medium y large. El siguiente fragmento de código muestra cómo utilizar un tamaño de componente diferente: