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. 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. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney.
Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. El botón de cierre del fregadero de la cocina es un componente simple que se usa en los casos en que el usuario quiere mostrar que algo se puede cerrar . El botón Cerrar es un elemento <button> , que usa la clase .close-button . Se usa junto con otros componentes de Foundation CSS como Toggler, Reveal, Off-canvas y otros complementos que incluyen acciones de apertura/cierre .
Clase de botón de cierre de fregadero de cocina Foundation CSS:
- close-button: Se utiliza con un elemento de botón. Por lo general, se muestra con un icono de multiplicación (X; ×) y tiene un efecto de desplazamiento. Este ícono está envuelto en un <span> con el atributo aria-hidden=”true”, por lo que los lectores de pantalla no leen el ícono X. Para aclarar el propósito del botón, está etiquetado con aria-label.
Sintaxis:
<div class="callout" data-closable>
<button class="close-button" type="button" data-close>
<span aria-hidden="true">...</span>
</button>
<p>...</p>
</div>
Ejemplo 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink Close Button</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Foundation CSS Kitchen Sink Close Button</h3> <br /> <div class="callout" data-closable> <button class="close-button" aria-label="Close alert" type="button" data-close> <span aria-hidden="true">×</span> </button> <p>Look at this close button!</p> </div> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Botón de cierre del fregadero de cocina Foundation CSS
Ejemplo 2: este ejemplo muestra el componente de llamada usando el botón de cerrar.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"/> <!-- Compressed JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Foundation CSS Kitchen Sink Close Button</h3> <br/> <div class="callout alert" data-closable> <p>Close button being used with callout.</p> <button class="close-button" aria-label="Dismiss alert" type="button" data-close> <span aria-hidden="true">×</span> </button> </div> </center> <script> $(document).foundation(); </script> </body> </html>
Producción:
Botón de cierre del fregadero de cocina Foundation CSS
Referencia: https://get.foundation/sites/docs/kitchen-sink.html#close-button
Publicación traducida automáticamente
Artículo escrito por vividhpandey13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA