Fundação - botão Fechar

Descrição

O botão Fechar é usado quando você deseja que algo desapareça clicando nele. O botão Fechar é um elemento <button> , que usa a classe .close-button . O símbolo de multiplicação (×) é usado como o ícone X que será incluído no atributo aria-hidden = "true" , portanto, o ícone X não será lido pelos leitores de tela. Para esclarecer a finalidade do botão, ele é rotulado com o rótulo ária .

Clicar no botão Fechar não fechará o elemento, mas pode ser usado com Toggler , Revelar , Fora da tela e outros plug-ins que incluem ações de abrir / fechar.

Exemplo

O exemplo a seguir demonstra como usar o botão Fechar no 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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código html fornecido acima foundation_close_button.html Arquivo.
Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.

Referência Sass

Variáveis

A tabela a seguir lista as variáveis SASS no arquivo de configurações do projeto que faz com que os estilos padrão deste componente sejam personalizados.

Sr. Não.	Nome e Descrição	Tipo	Valor padrão
1	$closebutton-position Ele representa a posição padrão do botão Fechar. O primeiro valor e o segundo valor devem ser direito ou esquerdo e superior ou inferior, respectivamente.	Lista	bem no topo
2	$closebutton-offset-horizontal Ele representa o deslocamento para a direita (ou esquerda) para um botão Fechar.	Número	1rem
3	$closebutton-offset-vertical Ele representa o deslocamento superior (ou inferior) para um botão Fechar.	Número	0,5 rem
4	$closebutton-size Ele representa o tamanho da fonte padrão do botão Fechar.	Número	2em
5	$closebutton-lineheight Ele representa a altura da linha do botão Fechar, afetando o espaçamento dos elementos.	Número	1
6	$closebutton-color Ele representa a cor padrão do botão Fechar.	Cor	$ cinza escuro
7	$closebutton-color-hover Ele representa a cor padrão do botão Fechar quando pairado.	Cor	$ preto

Mixins

Para construir a saída CSS final deste componente, os seguintes mixins podem ser usados. Para construir sua própria estrutura de classes usando componentes Foundation, você mesmo pode usar os mixins.

CLOSE-BUTTON

@include close-button;

Ao usar os estilos nas variáveis de configuração, ele adiciona os estilos do botão Fechar.

↰ Previous page