Fundación - Botón Cerrar

Descripción

El botón Cerrar se usa cuando desea que algo desaparezca haciendo clic en él. El botón Cerrar es un elemento <button> , que usa la clase .close-button . El símbolo de multiplicación (×) se utiliza como el icono X que se incluirá dentro del atributo aria-hidden = "true" , por lo que los lectores de pantalla no leerán el icono X. Para aclarar el propósito del botón, está etiquetado con aria-label .

Hacer clic en el botón de cierre no cerrará el elemento, pero se puede usar con Toggler , Reveal , Off-canvas y otros complementos que incluyen acciones de abrir / cerrar.

Ejemplo

El siguiente ejemplo demuestra cómo utilizar el botón de cierre en Foundation.

<html>
   <head>
      <title>Close Button</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- 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/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <div class = "callout">
         <button class = "close-button" aria-label = "Close alert" type = "button">
            <span aria-hidden = "true">×</span>
         </button>
         <p>This is an example of close button!</p>
      </div>

      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente foundation_close_button.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

Referencia de Sass

Variables

La siguiente tabla enumera las variables SASS en el archivo de configuración del proyecto que hace que los estilos predeterminados de este componente se personalicen.

No Señor.	Nombre y descripción	Tipo	Valor por defecto
1	$closebutton-position Representa la posición predeterminada del botón de cierre. El primer valor y el segundo valor deben ser a la derecha o izquierda y arriba o abajo respectivamente.	Lista	Justo arriba
2	$closebutton-offset-horizontal Representa el desplazamiento a la derecha (o izquierda) de un botón de cierre.	Número	1rem
3	$closebutton-offset-vertical Representa el desplazamiento superior (o inferior) de un botón de cierre.	Número	0.5rem
4	$closebutton-size Representa el tamaño de fuente predeterminado del botón de cierre.	Número	2em
5	$closebutton-lineheight Representa la altura de la línea del botón de cierre, lo que afecta el espaciado de los elementos.	Número	1
6	$closebutton-color Representa el color predeterminado del botón de cierre.	Color	$ gris oscuro
7	$closebutton-color-hover Representa el color predeterminado del botón de cierre cuando se desplaza.	Color	$ negro

Mixins

Para construir la salida CSS final de este componente, se pueden usar los siguientes mixins. Para construir su propia estructura de clases usando componentes Foundation, puede usar los mixins usted mismo.

CLOSE-BUTTON

@include close-button;

Al usar los estilos en las variables de configuración, agrega estilos de botón de cierre.

↰ Previous page