Avatares de interfaz de usuario de Blaze

Posted on by Rudeus Greyrat

Blaze UI es un kit de herramientas de interfaz de usuario gratuito y de código abierto que proporciona una base sólida para crear sitios web escalables y fáciles de mantener. Todos sus componentes se desarrollan primero para dispositivos móviles y son totalmente receptivos, lo que funciona en dispositivos de cualquier tamaño de pantalla.

En este artículo, veremos los avatares de Blaze UI. El componente de avatar generalmente se usa para IU de chat, imágenes de perfil o fotos de cuentas de usuarios en aplicaciones web modernas. Para usar Avatares, podemos usar el elemento <blaze-avatar> proporcionado por Blaze UI o podemos usar las clases para usar el componente de avatar.

Blaze UI Avatares Clases: 

  • c-avatar: esta clase es el envoltorio del componente avatar.
  • c-avatar__img: esta clase se usa en la imagen del avatar. Este debería ser un hijo directo de la clase c-avatar.

Atributos de los avatares de Blaze UI:

  • data-text: este atributo se utiliza para establecer el texto en el componente de avatar. No es aplicable cuando usamos el elemento <blaze-avatar>.
  • src: este atributo se usa con el elemento <blaze-avatar> para establecer la URL para que se muestre la imagen principal.
  • src-2: este atributo se usa con el elemento <blaze-avatar> para establecer la URL para que se muestre la imagen secundaria.
  • alt: este atributo se usa con el elemento <blaze-avatar> para establecer texto alternativo a la imagen principal.
  • alt-2: este atributo se usa con el elemento <blaze-avatar> para establecer texto alternativo a la imagen secundaria.
  • tamaño: este atributo se usa con el elemento <blaze-avatar> para establecer el tamaño del avatar.
  • texto: este atributo se usa con el elemento <blaze-avatar> para configurar el texto que se mostrará dentro del avatar.

Sintaxis:

Con componente <blaze-avatar>

<blaze-avatar 
    size="small"
    alt="..."
    src="..."
    alt-2="..."
    src-2="...">
</blaze-avatar>

Con CSS Puro

<div class="c-avatar u-small">
  <img class="c-avatar__img" src="...">
</div>

Ejemplo 1: Este ejemplo muestra el uso del elemento <blaze-avatar> para hacer uso del componente Avatar.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title> Blaze UI - Avatar </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
  
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
  
    <style>
        body {
            font-family: sans-serif;
        }
  
        .wrapper {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }
    </style>
</head>
  
<body>
    <div class="u-centered">
        <h2 style="color: green;"> 
            GeeksforGeeks
        </h2>
          
        <h3> Avatar- Blaze UI </h3>
    </div>
  
    <div class="wrapper u-window-box-super">
  
        <!-- Blaze UI super sized avatar 
            element initials in it -->
        <blaze-avatar size="super" text="VP"></blaze-avatar>
  
        <!-- Blaze UI extra large avatar element with 
            primary image and secondary image -->
        <blaze-avatar size="xlarge" alt="gfg_profile"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
            src-2=
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
            alt-2="gfg_profile_secondary">
        </blaze-avatar>
  
        <!-- Blaze UI large sized avatar element with 
                primary image and secondary image -->
        <blaze-avatar size="large" alt="gfg_profile"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
            src-2=
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
            alt-2="gfg_profile_secondary">
        </blaze-avatar>
  
        <!-- Blaze UI medium sized avatar element with 
                primary image and secondary image -->
        <blaze-avatar size="medium" alt="gfg_profile"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
            src-2=
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
            alt-2="gfg_profile_secondary">
        </blaze-avatar>
  
        <!-- Blaze UI small sized avatar element with 
                primary image and secondary image -->
        <blaze-avatar size="small" alt="gfg_profile"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
            src-2=
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
            alt-2="gfg_profile_secondary">
        </blaze-avatar>
  
        <!-- Blaze UI extra small sized avatar element 
                with primary image and secondary image -->
        <blaze-avatar size="xsmall" alt="gfg_profile"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
            src-2=
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
            alt-2="gfg_profile_secondary">
        </blaze-avatar>
    </div>
</body>
  
</html>

Producción:

Avatares de Blaze UI usando el elemento <blaze-avatar>

Ejemplo 2: este ejemplo muestra el uso de clases CSS para hacer uso del componente Blaze UI Avatar.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
                "width=device-width, initial-scale=1.0">
    <title> Blaze UI - Avatar </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
  
    <!-- We do not need blaze UI javascript as 
        we are using only css classes of avatar component -->
    <style>
        body {
            font-family: sans-serif;
        }
        .wrapper {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }
    </style>
</head>
  
<body>
    <div class="u-centered">
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2>
          
        <h3> CSS Only Avatar - Blaze UI </h3>
    </div>
  
    <div class="wrapper u-window-box-super">
  
        <!-- Blaze UI super sized avatar element initials 
                in it using "data-text" attribute -->
        <div class="c-avatar u-super" data-text="GFG"></div>
  
        <!-- Blaze UI extra large avatar element with 
                primary image and secondary image -->
        <div class="c-avatar u-xlarge">
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_primary"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" 
            />
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_secondary"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png" 
            />
        </div>
  
        <!-- Blaze UI large sized avatar element with 
                primary image and secondary image -->
        <div class="c-avatar u-large">
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_primary"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" 
            />
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_secondary"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png" 
            />
        </div>
  
        <!-- Blaze UI medium sized avatar element with 
                primary image and secondary image -->
        <div class="c-avatar u-medium">
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_primary"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" 
            />
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_secondary"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png" 
            />
        </div>
  
        <!-- Blaze UI small sized avatar element with 
                primary image and secondary image -->
        <div class="c-avatar u-small">
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_primary"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" 
            />
            <img 
                class="c-avatar__img" 
                alt="gfg_pfp_secondary"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png" 
            />
        </div>
    </div>
</body>
  
</html>

Producción:

Avatares de interfaz de usuario de Blaze con CSS puro

Ejemplo 3: Este ejemplo ilustra cómo hacer Avatar usando una sola imagen y dos imágenes.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
                "width=device-width, initial-scale=1.0">
    <title>Blaze UI - Avatar</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
  
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
  
    <style>
        body {
            font-family: sans-serif;
        }
  
        .wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>
  
<body>
    <div class="u-centered">
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2>
          
        <h3> Avatar - Blaze UI </h3>
    </div>
  
    <div class="wrapper u-window-box-super">
  
          
<p><b> Avatars Using Single Image </b></p>
  
        <div>
            <!-- Blaze UI extra large avatar 
                    element with single image -->
            <blaze-avatar size="xlarge" alt="gfg_profile"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png">
            </blaze-avatar>
              
            <!-- Blaze UI large sized avatar 
                element with single image -->
            <blaze-avatar size="large" alt="gfg_profile"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png">
            </blaze-avatar>
        </div>
  
          
<p><b> Avatars Using Two Image </b></p>
  
        <div>
            <!-- Blaze UI extra large avatar 
                element with two images -->
            <blaze-avatar size="xlarge" alt="gfg_profile"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
                src-2=
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
                alt-2="gfg_profile_secondary">
            </blaze-avatar>
              
            <!-- Blaze UI large sized avatar 
                element with two images -->
            <blaze-avatar size="large" alt="gfg_profile"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
                src-2=
"https://media.geeksforgeeks.org/wp-content/uploads/20220423003515/gfglogogreenbg-200x200.png"
                alt-2="gfg_profile_secondary">
            </blaze-avatar>
        </div>
    </div>
</body>
  
</html>

Producción:

Avatar usando una sola imagen y dos imágenes

Ejemplo 4: Este ejemplo ilustra el uso del elemento Blaze UI Avatar con iniciales.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
                "width=device-width, initial-scale=1.0">
    <title> Blaze UI - Avatar </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
  
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
  
    <style>
        body {
            font-family: sans-serif;
        }
  
        .wrapper {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
    </style>
</head>
  
<body>
    <div class="u-centered">
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2>
        <h3> 
            Avatar - Using Initials - Blaze UI 
        </h3>
    </div>
  
    <div class="wrapper u-window-box-super">
        <!-- Super sized avatar initials in it -->
        <blaze-avatar size="super" 
                      text="VP">
        </blaze-avatar>
  
        <!-- Extra large sized avatar initials in it -->
        <blaze-avatar size="xlarge" 
                      text="AM">
        </blaze-avatar>
  
        <!-- Large sized avatar initials in it -->
        <blaze-avatar size="large" 
                      text="PM">
        </blaze-avatar>
  
        <!-- Small sized avatar initials in it -->
        <blaze-avatar size="small" 
                      text="PR">
        </blaze-avatar>
  
        <!-- Extra small sized avatar initials in it -->
        <blaze-avatar size="xsmall" 
                      text="BM">
        </blaze-avatar>
    </div>
</body>
  
</html>

Producción:

Elemento de avatar Blaze UI con iniciales

Referencia: https://www.blazeui.com/components/avatars

Publicación traducida automáticamente

Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *