Spectre Avatars nos ofrece incluir avatar en el elemento figura. Si desea diseñar un perfil de usuario como las cosas, entonces definitivamente necesita usar esta función. Para agregar una clase de avatar al elemento <img> . Hay 4 tamaños adicionales disponibles, incluidos avatar-xl (64 px), avatar-lg (48 px), avatar-sm (24 px) y avatar-xs (16 px). De forma predeterminada, el tamaño del avatar es de 32 px.
Supongamos que el perfil de usuario no tiene imágenes, entonces hay una solución para eso, también puede usar sus iniciales para avatares. Agregue la clase de avatar y la clase de tamaño de avatar al elemento <div>. El atributo inicial de datos es el nombre que aparece dentro del avatar.
Clase de avatares de espectro:
- avatar: Esta clase también se usa para incluir el avatar.
- avatar-xl|lg|sm|xs: Esta clase se utiliza para definir el tamaño del avatar.
Avatares de espectro:
- Iconos de Spectre Avatar: Iconos de Spectre Avatar nos ofrece incluir una imagen como icono.
- Presencia de Spectre Avatar: La presencia de Spectre Avatar se utiliza para establecer el indicador de las presencias.
Nota: debe agregar el atributo inicial de datos para mencionar la inicial si falta la imagen del avatar. Si no hay inicial de datos o no se especifica el atributo, el avatar aparecerá como un punto.
Sintaxis:
<figure class="avatar avatar-xl" data-initial="GG"> ... </figure>
El siguiente ejemplo ilustra el Spectre Avatar:
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Avatar Class</strong> <br><br> <div> <strong>Different Sizes & Presence Avatars:</strong> <figure class="avatar avatar-xs"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" alt="Geekdforgeeks"> <i class="avatar-presence"></i> </figure> <figure class="avatar avatar-sm"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" alt="Geekdforgeeks"> <i class="avatar-presence busy"></i> </figure> <figure class="avatar avatar-lg"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" alt="Geekdforgeeks"> <i class="avatar-presence online"></i> </figure> <figure class="avatar avatar-xl"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" alt="Geekdforgeeks"> <i class="avatar-presence away"></i> </figure> <br><br> <strong>Different Sizes & Without Image Avatars:</strong> <figure class="avatar avatar-xs" data-initial="AA" style="background-color: green;"> <i class="avatar-presence online"></i> </figure> <figure class="avatar avatar-sm" data-initial="AB" style="background-color: green;"> <i class="avatar-presence online"></i> </figure> <figure class="avatar avatar-lg" data-initial="AC" style="background-color: green;"> <i class="avatar-presence online"></i> </figure> <figure class="avatar avatar-xl" data-initial="AD" style="background-color: green;"> <i class="avatar-presence online"></i> </figure> </div> </center> </body> </html>
Producción:
Referencia: https://picturepan2.github.io/spectre/components/avatars.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA