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 su uso y tiene excelentes elementos diferentes para usar para hacer que su sitio web se vea más sorprendente. 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 Avatars brinda la función de agregar 2 imágenes en un solo avatar. El tamaño de los 2 avatares de imágenes varía de súper, extragrande, grande, pequeño y extrapequeño.
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 c-avatar ..."> <img class="c-avatar__img" alt="..." src="..."> <img class="c-avatar__img" alt="..." src="..."> </div>
Ejemplo 1: el siguiente código muestra el avatar de Blaze UI con 2 imágenes usando la etiqueta de avatar de Blaze UI de tamaño super, xlarge y large .
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> <h3>super</h3> <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> <h3>xlarge</h3> <blaze-avatar size="xlarge" 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> <h3>large</h3> <blaze-avatar size="large" 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 el avatar de Blaze UI con 2 imágenes usando la etiqueta de avatar de Blaze UI de tamaño mediano, pequeño y extra pequeño.
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> <h3>medium</h3> <blaze-avatar 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> <h3>small</h3> <blaze-avatar size="small" 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> <h3>xsmall</h3> <blaze-avatar size="xsmall" 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:
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