Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Foundation CSS nos ofrece un Grupo de Botones donde se pueden agrupar botones de idéntica naturaleza. Foundation CSS permite que los botones en el grupo de botones se dividan donde cada botón se separa con un borde consistente. Para dividir un botón en n botones , debemos crear n botones dentro del grupo de botones.
Clases divididas de grupo de botones CSS básicos:
- solo flecha: cree un botón que contenga solo una flecha.
- show-for-sr: Oculta el texto de la vista, pero los lectores de pantalla pueden capturarlo para una mejor accesibilidad.
Sintaxis:
<div class="button-group">
<a class="button">...</a>
<a class="button Button-Group-Split-Class>
...
</a>
</div>
Ejemplo 1: en el siguiente ejemplo, hemos creado un botón de división simple
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Button Group Split</title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"/>
<link rel="stylesheet"
href=
"/cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity=
"sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"/>
</head>
<body class="grid-x align-middle
align-center grid-container"
style="height: 95vh; width: 100vw">
<div>
<h2 style="color: green">GeekforGeeks</h2>
<h4>Foundation CSS Button Group Split</h4>
<div class="button-group">
<a class="button">Select</a>
<a class="button">
<i class="fa-solid fa-gear"></i>
</a>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
División del grupo de botones CSS de la base
Ejemplo 2: en el siguiente ejemplo, hemos creado un botón dividido que se puede desplazar
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Button Group Split</title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"/>
<link rel="stylesheet"
href=
"/cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity=
"sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"/>
</head>
<body class="grid-x align-middle
align-center grid-container"
style="height: 95vh; width: 100vw">
<div>
<h2 style="color: green">GeekforGeeks</h2>
<h4>Foundation CSS Button Group Split</h4>
<div class="button-group">
<a class="button">Hover</a>
<a class="button" type="button"
data-toggle="hover">
<i class="fa-solid fa-arrow-down"></i>
</a>
<div class="dropdown-pane"
id="hover"
data-dropdown
data-hover="true"
data-hover-pane="true" >
You can see me when hovered.
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
División del grupo de botones CSS de la base
Referencia: https://get.foundation/sites/docs/button-group.html#split-buttons
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA