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, dejaremos de usar los botones de Tamaños de grupo. Los tamaños de grupo pueden tener un tamaño compartido, aquí podemos crear un grupo de botones simple que seguirá un tamaño fijo, cada tamaño de botón será el mismo dentro de ese grupo.
Clase de tamaños de grupo de variación de botón de interfaz de usuario semántica:
- small: Esta clase se utiliza para crear botones de tamaño pequeño.
- medio: esta clase se utiliza para crear un botón de tamaño medio que es el valor predeterminado.
- large: Esta clase se utiliza para crear botones de gran tamaño.
Sintaxis:
<div class="ui buttons Button-Variation-Group-Sizes">
<button class="ui button">...</button>
<button class="ui button">...</button>
...
</div>
Ejemplo 1: En este ejemplo, usaremos diferentes tamaños en botones normales.
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 Group Sizes</strong> </center> <br><br> <strong>Group sizes: Small</strong> <br> <div class="small ui buttons"> <button class="ui button">Like</button> <button class="ui button">Share</button> <button class="ui button">Subscribe</button> </div> <br> <strong>Group sizes: Medium</strong> <br> <div class="medium ui buttons"> <button class="ui button">Like</button> <button class="ui button">Share</button> <button class="ui button">Subscribe</button> </div> <br> <strong>Group sizes: Large</strong> <br> <div class="large ui buttons"> <button class="ui button">Like</button> <button class="ui button">Share</button> <button class="ui button">Subscribe</button> </div> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, usaremos diferentes tamaños en los botones de iconos.
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 Group Sizes</strong> </center> <br><br> <strong>Group Sizes: Small</strong> <div class="ui small basic icon buttons"> <button class="ui button">Like <i class="like icon"></i> </button> <button class="ui button">Share <i class="share icon"></i> </button> <button class="ui button">Subscribe <i class="user icon"></i> </button> </div> <br><br> <strong>Group Sizes: Medium</strong> <div class="ui medium basic icon buttons"> <button class="ui button">Like <i class="like icon"></i> </button> <button class="ui button">Share <i class="share icon"></i> </button> <button class="ui button">Subscribe <i class="user icon"></i> </button> </div> <br><br> <strong>Group Sizes: Large</strong> <div class="ui large basic icon buttons"> <button class="ui button">Like <i class="like icon"></i> </button> <button class="ui button">Share <i class="share icon"></i> </button> <button class="ui button">Subscribe <i class="user icon"></i> </button> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/button.html#group-sizes
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA