Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Es un sistema que nos ayuda a construir experiencias de usuario consistentes de manera eficiente con suficiente flexibilidad. Este enfoque sistemático garantiza que nuestros estilos sean coherentes e interoperables entre sí. Cuenta con una escala de espaciado altamente componible, tipografía personalizable y colores significativos. Es altamente reutilizable y flexible y se crea con el sistema de diseño de GitHub.
Un botón es un componente importante en cualquier sitio web que se utiliza para generar eventos cada vez que el usuario hace clic en el botón. Si tenemos una colección de botones que deben unirse entre sí, los grupos de botones son un componente que nos proporciona Primer CSS para crear un grupo de botones.
Primer CSS Botón Grupos Clases:
- BtnGroup-item btn: esta clase se usa para crear un grupo de botones simple donde los botones se redondearán y espaciarán automáticamente.
- BtnGroup-item btn btn-sm: esta clase se usa para crear un grupo de botones que es más pequeño en tamaño.
- BtnGroup-parent: esta clase se usa para elementos principales, como <form>s o <details>s, dentro de la clase BtnGroup .
Sintaxis:
<div class="BtnGroup">
<button class="BtnGroup-item btn btn-sm" type="button">
...
</button>
...
</div
Nota: La sintaxis para las otras clases es la misma excepto por el nombre de la clase que cambiará.
Ejemplo 1: El siguiente ejemplo demostrará el uso de la clase btn BtnGroup-item para crear un grupo de botones simple.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Button Groups </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-left"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h3> Primer CSS Button Groups </h3> </div> <br> <div class="BtnGroup mb-3"> <button class="BtnGroup-item btn" type="button"> Button 1 </button> <button class="BtnGroup-item btn" type="button"> Button 2 </button> <button class="BtnGroup-item btn btn-danger" type="button"> Danger Button </button> </div> <div class="BtnGroup d-block mb-3 ml-0"> <button class="BtnGroup-item btn btn-outline" type="button"> Button 1 </button> <button class="BtnGroup-item btn btn-outline" type="button"> Button 2 </button> <button class="BtnGroup-item btn btn-primary" type="button"> Primary Button </button> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demostrará el uso de la clase BtnGroup-item btn btn-sm para crear botones de tamaño pequeño en un grupo de botones.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Button Groups </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-left"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Button Groups </h3> </div> <br> <div class="BtnGroup mb-3"> <button class="BtnGroup-item btn btn-sm" type="button"> Small Button 1 </button> <button class="BtnGroup-item btn btn-sm" type="button"> Small Button 2 </button> <button class="BtnGroup-item btn btn-sm btn-danger" type="button"> Small Danger Button </button> </div> <div class="BtnGroup d-block mb-3 ml-0"> <button class="BtnGroup-item btn btn-sm btn-outline" type="button"> Small Button 1 </button> <button class="BtnGroup-item btn btn-sm btn-outline" type="button"> Small Button 2 </button> <button class="BtnGroup-item btn btn-sm btn-primary" type="button"> Small Primary Button </button> </div> </body> </html>
Producción:
Ejemplo 3: El siguiente ejemplo demostrará el uso de la clase principal BtnGroup para crear un elemento principal como un formulario.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Button Groups </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-left"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Button Groups </h3> </div> <br> <div class="BtnGroup mb-3"> <button class="BtnGroup-item btn btn-sm" type="button"> Button 1 </button> <!--BtnGroup-parent--> <form class="BtnGroup-parent"> <button class="BtnGroup-item btn btn-sm" type="button"> This is inside a form </button> </form> <button class="BtnGroup-item btn btn-sm btn-danger" type="button"> Small Danger Button </button> </div> <div class="BtnGroup d-block mb-3 ml-0"> <button class="BtnGroup-item btn btn-sm btn-outline" type="button"> Small Button 1 </button> <button class="BtnGroup-item btn btn-sm btn-outline" type="button"> Small Button 2 </button> <form class="BtnGroup-parent"> <button class="BtnGroup-item btn btn-sm btn-primary" type="button"> This is also inside a form </button> </form> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/buttons
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA