En este artículo, veremos el grupo de botones de Bulma con complementos. Como sabemos que podemos agregar complementos con botones en los controles de formulario de Bulma, de manera similar también podemos agrupar dos o más complementos de botón para hacer un grupo. Para crear un grupo con complementos, podemos crear dos o más contenedores de campo con la clase has-addons dentro de ellos.
Grupo de botones de Bulma con clase de complementos:
- has-addons: esta clase se usa para combinar los controles de botón en un contenedor. El uso de dos clases de complementos en un contenedor de campo puede agrupar varios complementos de botones.
Sintaxis:
<div class="field has-addons">
<p class="control">
<button class="button">
....
</button>
</p>
</div>
....
Ejemplo 1: El siguiente ejemplo ilustra el grupo de botones de Bulma con complementos.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GFG</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <script src= "https://use.fontawesome.com/releases/v5.15.4/js/all.js"> </script> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success">GeekforGeeks</h1> <h1 class="subtitle">Bulma Button Group with addons</h1> <div class="field has-addons"> <p class="control"> <button class="button"> <span class="icon is-small"> <i class="fas fa-list"></i> </span> <span>Option</span> </button> </p> <p class="control"> <button class="button"> <span class="icon is-small"> <i class="fas fa-trash"></i> </span> <span>Delete</span> </button> </p> <p class="control"> <button class="button"> <span class="icon is-small"> <i class="fas fa-copy"></i> </span> <span>Copy</span> </button> </p> </div> <div class="field has-addons"> <p class="control"> <button class="button is-info"> <span class="icon is-small"> <i class="fab fa-facebook"></i> </span> <span>Facebook</span> </button> </p> <p class="control"> <button class="button is-dark"> <span class="icon is-small"> <i class="fab fa-github"></i> </span> <span>GitHub</span> </button> </p> <p class="control"> <button class="button is-danger"> <span class="icon is-small"> <i class="fab fa-instagram"></i> </span> <span>Instagram</span> </button> </p> <p class="control"> <button class="button"> <span class="icon is-small"> <i class="fab fa-twitter"></i> </span> <span>Twitter</span> </button> </p> </div> </div> </body> </html>
Producción:
Grupo de botones de Bulma con complementos
Ejemplo 2: Este ejemplo ilustra el grupo de botones de colores de Bulma con complementos.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GFG</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <script src= "https://use.fontawesome.com/releases/v5.15.4/js/all.js"> </script> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success">GeekforGeeks</h1> <h1 class="subtitle">Bulma Button Group with addons</h1> <div class="field has-addons"> <p class="control"> <button class="button"> <span class="icon is-small"> <i class="fas fa-thumbs-up"></i> </span> </button> </p> <p class="control"> <button class="button"> <span class="icon is-small"> <i class="fas fa-thumbs-down"></i> </span> </button> </p> <p class="control"> <button class="button"> <span class="icon is-small"> <i class="fas fa-thumbtack"></i> </span> </button> </p> </div> <div class="field has-addons"> <p class="control"> <button class="button"> <span class="icon is-small"> <i class="fas fa-bold"></i> </span> <span>Bold</span> </button> </p> <p class="control"> <button class="button"> <span class="icon is-small"> <i class="fas fa-italic"></i> </span> <span>Italic</span> </button> </p> <p class="control"> <button class="button "> <span class="icon is-small"> <i class="fas fa-underline"></i> </span> <span>Underline</span> </button> </p> </div> </div> </body> </html>
Producción:
Grupo de botones de Bulma con complementos
Referencia: https://bulma.io/documentation/elements/button/#button-group-with-addons
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA