Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco que utiliza componentes de JavaScript para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
Podemos usar Blaze UI Avatars para integrar un avatar en el elemento de figura. Si desea crear cualquier cosa que parezca un perfil de usuario, debe usar esta funcionalidad absolutamente. Las IU de chat, las fotografías de perfil y las fotos de la cuenta se pueden crear con los avatares de la IU de Blaze.
Blaze UI tiene 6 atributos, tamaño , alt , src , alt-2 , src- 2 y texto . Los atributos proporcionan información adicional sobre ese elemento en particular.
- tamaño: El atributo de tamaño especifica el tamaño del Avatar.
- src: el atributo src especifica la URL de la imagen que se va a mostrar.
- src-2: el atributo src-2 especifica la URL de la imagen secundaria más pequeña.
- alt: el atributo alt especifica el texto alternativo a la imagen.
- alt-2: El atributo alt-2 especifica el texto alternativo a la imagen secundaria.
- texto: el atributo de texto especifica el texto que se mostrará en el medio del círculo.
Blaze UI Avatar Clases de CSS :
- c-avatar: esta clase se usa para agregar el avatar usando la clase.
- c-avatar__img: esta clase se usa para agregar imágenes al avatar.
Podemos agregar avatares usando la etiqueta de avatar proporcionada por Blaze UI sin definir ninguna clase. Para esto, siga la siguiente sintaxis dada.
Sintaxis:
<blaze-avatar
size="..."
alt="..."
src="..."
alt-2="..."
src-2="...">
</blaze-avatar>
Podemos agregar avatares usando las clases de avatar proporcionadas por Blaze UI.
Sintaxis:
<div class="c-avatar ..."> <img class="c-avatar__img" alt="..." src="..."> </div>
Ejemplo 1: el siguiente código muestra los atributos de los avatares de la interfaz de usuario de Blaze mediante la etiqueta de avatares de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html> <head> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Blaze UI Avatar </h2> <blaze-avatar size="super" alt="geeksforgeeks" src= "https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png" alt-2="geeksforgeeks" src-2= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"> </blaze-avatar> </body> </html>
Producción:
Ejemplo 2: el siguiente código muestra los atributos de los avatares de la interfaz de usuario de Blaze mediante las clases CSS de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html> <head> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Blaze UI Avatar using CSS classes. </h2> <div class="c-avatar c-avatar u-super"> <img class="c-avatar__img" alt="GeeksforGeeks" src= "https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"> </div> <h2> Blaze UI Avatar using CSS classes with Initials. </h2> <div class="c-avatar c-avatar u-super" data-text="GFG"></div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/avatars/
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA