Web Components Avatar

El Ignite UI for Web Components Avatar ayuda a mostrar iniciales, imágenes o iconos en la aplicación.

Ejemplo de avatar de icono Web Components

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcAvatarComponent, IgcIconComponent);
const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

export class IconAvatar {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new IconAvatar();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Icon Avatar</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar>
        <igc-icon name="home" collection="material"></igc-icon>
      </igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Uso

En primer lugar, debe instalar el paquete Ignite UI for Web Components npm ejecutando el siguiente comando:

npm install igniteui-webcomponents
cmd

import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';

defineComponents(IgcAvatarComponent);
ts

Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

El IgcAvatarComponent es capaz de mostrar imágenes, iniciales o cualquier otro contenido, incluidos iconos. Declarar un IgcAvatarComponent es tan simple como:

<igc-avatar></igc-avatar>
html

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.

<igc-avatar>
  <igc-icon name="home"></igc-icon>
</igc-avatar>
html

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.

<!-- Initials("AZ") will be displayed instead of the icon. -->

<igc-avatar initials="AZ">
  <igc-icon name="home"></igc-icon>
</igc-avatar>
html

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcAvatarComponent, IgcIconComponent);
const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

export class InitialsAvatar {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new InitialsAvatar();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Initials Avatar</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar initials="AZ">
        <igc-icon name="home" collection="material"></igc-icon>
      </igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Imagen

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.

<igc-avatar
  initials="AZ"
  src="https://es.infragistics.com/angular-demos/assets/images/men/1.jpg"
  alt="A photo of a man.">
  <igc-icon name="home"></igc-icon>
</igc-avatar>
html

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcAvatarComponent, IgcIconComponent);
const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

export class ImageAvatar {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new ImageAvatar();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Image Avatar</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar
        initials="AZ"
        src="https://static.infragistics.com/xplatform/images/people/men/1.jpg"
        alt="A photo of a man.">
        <igc-icon name="home" collection="material"></igc-icon>
      </igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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.

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcAvatarComponent, IgcIconComponent);
const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

export class AvatarShape {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new AvatarShape();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Avatar Shape</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar shape="rounded">
        <igc-icon name="home" collection="material"></igc-icon>
      </igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Tamaño

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:

igc-avatar {
  --ig-size: var(--ig-size-large);
}
css

import { defineComponents, IgcAvatarComponent, IgcIconComponent, registerIconFromText } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import "./AvatarSize.css";

defineComponents(IgcAvatarComponent, IgcIconComponent);
const homeIcon =
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';

export class AvatarSize {
    constructor() {
        registerIconFromText("home", homeIcon, "material");
    }
}

new AvatarSize();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Avatar Size</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-avatar class="size-large" initials="L"></igc-avatar>
      <igc-avatar class="size-medium" initials="M"></igc-avatar>
      <igc-avatar class="size-small" initials="S"></igc-avatar>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}

.sample {
    flex-direction: row;
    gap: 10px;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Estilo

The IgcAvatarComponent component exposes several CSS parts, giving you full control over its style:

Nombre	Descripción
`base`	The base wrapper of the avatar.
`initials`	The initials wrapper of the avatar.
`image`	The image wrapper of the avatar.
`icon`	The icon wrapper of the avatar.

igc-avatar::part(base) {
  --size: 60px;
  color: var(--ig-success-500-contrast);
  background: var(--ig-success-500);;
  border-radius: 20px;
}
css