La presencia de Spectre Avatar se utiliza para establecer el indicador de las presencias. Podemos agregar un elemento <i> y colocar una clase de presencia de avatar dentro de ese elemento y agregar en línea, ausente u ocupado lo que quieras mostrar.
Presencia de Espectro Avatar Clase:
- avatar-presence: esta clase se utiliza para representar el diseño de presencia en el avatar.
- en línea: esta clase se utiliza para establecer el estado de presencia en línea.
- ocupado: Esta clase se utiliza para establecer el estado de presencia ocupado.
- ausente: Esta clase se utiliza para establecer el estado de presencia ausente.
Sintaxis:
<figure class="avatar avatar-xl"> <img src="..." alt="..."> <i class="avatar-presence online"></i> </figure>
El siguiente ejemplo ilustra la presencia de Spectre Avatar:
Ejemplo: En este ejemplo, veremos que se están utilizando las tres clases de presencia.
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 presence Class</strong> <br><br> <div> <strong><u>Presence Busy:</u> Geeksforgeeks </strong> <figure class="avatar"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" alt="Geekdforgeeks"> <i class="avatar-presence busy"></i> </figure> <p>A Computer Science Portal for Geeks</p> </div> <div> <strong><u>Presence Away:</u> Geeksforgeeks </strong> <figure class="avatar"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" alt="Geekdforgeeks"> <i class="avatar-presence away"></i> </figure> <p>A Computer Science Portal for Geeks</p> </div> <div> <strong><u>Presence Online:</u> Geeksforgeeks </strong> <figure class="avatar"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" alt="Geekdforgeeks"> <i class="avatar-presence online"></i> </figure> <p>A Computer Science Portal for Geeks</p> </div> </center> </body> </html>
Producción:
Presencia de Espectro Avatar
Referencia: https://picturepan2.github.io/spectre/components/avatars.html#avatars-presence
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA