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.
Las variaciones del grupo de botones tienen diferentes tipos de botones, como botones verticales, de icono, etiquetados, de grupo mixto, de igual ancho, de colores, básicos y de diferentes tamaños en las variaciones de grupo. En este artículo aprenderemos los botones de iconos de variaciones de grupos de botones.
Clase de botones de icono de variaciones de grupo de botones de interfaz de usuario semántica:
- botones de icono: Esta clase solía incluir el icono en el botón de grupos.
Sintaxis:
<div class="ui icon buttons">
<button class="ui button">
<i class=".."></i>
</button>
...
</div>
El siguiente ejemplo ilustra el icono del grupo de variaciones de botones:
Ejemplo:
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>Geeksforgeeks</h1> <strong>Semantic UI Button Group Variations Icon Buttons</strong> <br><br> <div> <strong>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="pause green icon"></i> </button> <button class="ui button"> <i class="share blue icon"></i> </button> </div> </div> </center> </body> </html>
Producción:
Botones de icono de variaciones de grupo de botones de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/button.html#icon-buttons
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA