El grupo de botones de interfaz de usuario semántica también ofrece una variación de grupo de botones, hay botones de icono, botones de icono etiquetados, botones de grupo mixto, ancho igual, botones de colores, botones básicos, botones de tamaño de grupo, etc.
En este artículo, hablaremos del Grupo Mixto. El grupo mixto se puede formatear para usar varios tipos de botones juntos, aquí podemos crear varios tipos de botones que seguirán un ancho fijo de cada botón que será el mismo dentro de ese grupo.
Clase de grupo mixto de variaciones de botones de interfaz de usuario semántica:
- botones: esta clase se utiliza para crear un grupo de botones mixtos.
Sintaxis:
<div class="ui buttons">
<button class="labeled icon">
<i class="icon"></i>
...
</button>
</div>
Ejemplo: El siguiente ejemplo ilustra el grupo mixto de variaciones de botón de interfaz de usuario semántica:
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 Variations Mixed Group</strong> </center> <br><br> <strong>Labeled icon button:</strong> <div class="ui green buttons"> <button class="ui labeled icon button"> <i class="left chevron icon"></i> Previous </button> <button class="ui button"> <i class="play icon"></i> </button> <button class="ui right labeled icon button"> Next <i class="right chevron icon"></i> </button> </div> </body> </html>
Producción:
Grupo mixto de variaciones de botones de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/button.html#mixed-group
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA