Blaze CSS es un kit de herramientas de interfaz de usuario de código abierto sin marco que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Es de naturaleza receptiva, ya que todos los componentes se desarrollan primero para dispositivos móviles y funcionan en cualquier tamaño de pantalla.
Un avatar es un componente importante en cualquier sitio web que es útil para las IU de chat, las imágenes de perfil y las fotos de cuentas. Un avatar proporciona un aspecto increíble a la interfaz de usuario. La interfaz de usuario de Blaze nos proporciona la funcionalidad de crear un avatar con las iniciales mostradas en él. Este componente se conoce como las Iniciales de Avatar .
Blaze UI Avatares Iniciales Clase:
- c-avatar: Esta clase se utiliza para crear un Avatar.
Sintaxis:
<!-- Write the initials that have to be displayed --> <div class="c-avatar" ... data-text="..."> </div>
Ejemplo 1: El siguiente ejemplo demuestra el uso de la clase c-avatar para crear Avatar Initials.
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 Avatars Initials </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color:green"> GeeksforGeeks <div class="c-heading__sub"> Blaze UI Avatars Initials </div> </h1> <br> <div class="c-avatar" data-text="AB"> <!--Avatar Initials--> </div> <div class="c-avatar" data-text="SN"> </div> <div class="c-avatar" data-text="WWE"> </div> <div class="c-avatar" data-text="VB"> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el uso de la clase c-avatar para crear Avatar Initials de varios tamaños.
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 Avatars Initials </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <h1 style="color:green"> GeeksforGeeks <div class="c-heading__sub"> Blaze UI Avatars Initials </div> </h1> <br> <div class="c-avatar c-avatar u-super" data-text="AB"> <!--Avatar Initials Super Size--> </div> <div class="c-avatar c-avatar u-xlarge" data-text="SN"> <!--Avatar Initials Xlarge Size--> </div> <div class="c-avatar c-avatar u-large" data-text="WWE"> <!--Avatar Initials Large Size--> </div> <div class="c-avatar c-avatar u-small" data-text="VB"> <!--Avatar Initials Small Size--> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/avatars/
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA