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. El botón de interfaz de usuario semántica ofrece varios tipos de componentes de microbotones como tipos, grupos, contenido, estados, variaciones y variaciones de grupo.
En este artículo, aprenderemos sobre la variación de los botones de iconos.
Clase de botones de iconos de interfaz de usuario semántica:
- botones de icono: Esta clase se utiliza para incluir el grupo de botones de icono.
Sintaxis:
<div class="ui icon buttons"> <button class="ui button"> <i class="... icon">....</i> .... </button> </div>
Nota: De forma predeterminada, el grupo de botones es horizontal, para que sea vertical, debemos agregar la clase «vertical» al div principal .
Ejemplo 1: Este ejemplo ilustra las clases de botones de iconos horizontales y horizontales .
HTML
<!DOCTYPE html> <html lang="en"> <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> <strong>Semantic UI Icon button group</strong><br/> <div> <strong>Horizontal Icon Buttons:</strong> <div class="ui icon buttons"> <button class="ui button"> <i class="like red icon"></i> </button> <button class="ui button"> <i class="comment blue icon"></i> </button> <button class="ui button"> <i class="share green icon"></i> </button> </div> <br><br> </div> </center> </body> </html>
Producción:
Grupo de botones de iconos de interfaz de usuario semántica
Ejemplo 2: Este ejemplo ilustra las clases de botones de iconos horizontales y verticales .
HTML
<!DOCTYPE html> <html lang="en"> <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> <strong>Semantic UI Icon button group</strong><br/> <div> <strong>Vertical Icon Button group:</strong> <div class="ui vertical icon buttons"> <button class="ui red button"> <i class="play icon"></i> </button> <button class="ui blue button"> <i class="backward icon"></i> </button> <button class="ui green button"> <i class="random icon"></i> </button> </div> </div> </center> </body> </html>
Producción:
Grupo de botones de iconos de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/button.html#icon-buttons
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA