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 las variaciones de grupos de botones con botones de íconos etiquetados.
Variaciones del grupo de botones de la interfaz de usuario semántica Botones de iconos etiquetados Clase:
- icono etiquetado: Esta clase solía incluir el icono etiquetado en el botón de grupos.
Sintaxis:
<div class="ui labeled icon buttons">
<button class="ui button">
<i class=""></i>
</button>
</div>
El siguiente ejemplo ilustra el icono etiquetado 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 labeled Icon Buttons</strong> <br><br> <div> <strong>Labeled Icon Buttons:</strong> <div class="ui labeled icon buttons"> <button class="ui red button"> <i class="like icon"></i> Like </button> <button class="ui green button"> <i class="play icon"></i> Play </button> <button class="ui blue button"> <i class="shuffle icon"></i> Shuffle </button> </div> <br><br> <strong>Vertical Labeled Icon Buttons:</strong> <div class="ui vertical labeled icon buttons"> <button class="ui red button"> <i class="like icon"></i> Like </button> <button class="ui green button"> <i class="play icon"></i> Play </button> <button class="ui blue button"> <i class="shuffle icon"></i> Shuffle </button> </div> </div> </center> </body> </html>
Producción:
Botones de iconos etiquetados Variaciones del grupo de botones de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/button.html#labeled-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