Semantic UI es un marco de código abierto que utiliza CSS y jQuery 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. En este artículo, aprenderemos sobre el estado del conjunto de iconos.
Está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar, y utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
Se utiliza un estado de conjunto de iconos de interfaz de usuario semántica para representar el símbolo de estado para diferentes estados. Un conjunto de iconos contiene un número arbitrario de glifos y los iconos pueden representar diferentes estados.
Clase de estado del conjunto de iconos de interfaz de usuario semántica:
- Status-icon-class-name: Esta clase se utiliza para incluir el icono dentro de la etiqueta. Consulte el enlace de referencia para ver la lista de nombres de clases.
Sintaxis:
<a class="ui label"> <i class="... icon"></i> ... </a>
El siguiente ejemplo ilustra el estado del conjunto de iconos de la interfaz de usuario semántica:
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">GeeksForGeeks</h1> <h2>Semantic UI Icon Set Status </h2> <i class="ban icon"> ban icon</i><br><br> <i class="battery empty icon"> battery empty icon </i><br><br> <i class="battery full icon"> battery full icon </i><br><br> <i class="bell outline icon"> bell outline icon </i> </center> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">GeeksforGeeks</h1> <h2>Semantic UI Icon Set Status</h2> <i class="calendar icon green"> calendar icon </i><br><br> <i class="calendar check icon green"> calendar check icon </i><br><br> <i class="cart arrow down icon green"> cart arrow down icon </i><br><br> <i class="exclamation icon green"> exclamation icon </i> </center> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#status
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA