Fondazione - Pulsante Chiudi

Descrizione

Il pulsante Chiudi viene utilizzato quando si desidera che qualcosa vada via facendo clic su di esso. Il pulsante Chiudi è un elemento <button> , che utilizza la classe .close-button . Il simbolo di moltiplicazione (×) viene utilizzato come icona X che verrà racchiusa all'interno dell'attributo aria-hidden = "true" , quindi l'icona X non verrà letta dagli screen reader. Per chiarire lo scopo del pulsante, è etichettato con aria-label .

Fare clic sul pulsante di chiusura non chiuderà l'elemento, ma può essere utilizzato con Toggler , Reveal , Off-canvas e altri plugin che includono azioni di apertura / chiusura.

Esempio

L'esempio seguente mostra come utilizzare il pulsante di chiusura in 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

  • Salva il codice html sopra indicato foundation_close_button.html file.

  • Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

Riferimento Sass

Variabili

La tabella seguente elenca le variabili SASS nel file delle impostazioni del progetto che rendono gli stili predefiniti di questo componente personalizzabili.

Sr.No. Nome e descrizione genere Valore predefinito
1

$closebutton-position

Rappresenta la posizione predefinita del pulsante di chiusura. Il primo valore e il secondo valore devono essere rispettivamente destro o sinistro e superiore o inferiore .

 Elenco in alto a destra
2

$closebutton-offset-horizontal

Rappresenta l'offset destro (o sinistro) per un pulsante di chiusura.

 Numero 1rem
3

$closebutton-offset-vertical

Rappresenta l'offset superiore (o inferiore) per un pulsante di chiusura.

 Numero 0.5rem
4

$closebutton-size

Rappresenta la dimensione del carattere predefinita del pulsante di chiusura.

 Numero 2em
5

$closebutton-lineheight

Rappresenta l'altezza della linea del pulsante di chiusura, influenzando la spaziatura degli elementi.

 Numero 1
6

$closebutton-color

Rappresenta il colore predefinito del pulsante di chiusura.

 Colore $ grigio scuro
7

$closebutton-color-hover

Rappresenta il colore predefinito del pulsante di chiusura quando si passa con il mouse.

 Colore $ nero

Mixins

Per creare l'output CSS finale di questo componente, è possibile utilizzare i seguenti mixin. Per costruire la tua struttura di classe usando i componenti Foundation, puoi usare tu stesso i mixin.

CLOSE-BUTTON

@include close-button;

Utilizzando gli stili nelle variabili delle impostazioni, aggiunge gli stili del pulsante di chiusura.