Alternador CSS básico – Barcelona Geeks

Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS.

Toggler facilita alternar cualquier elemento o animar cualquier elemento, con un clic. Podemos alternar cualquier clase especificando el atributo de alternancia de datos . También podemos hacer un elemento cerrable usando un atributo cerrable por datos .

Atributos del conmutador CSS de la Fundación:

data-toggler : La clase que queremos alternar.
data-toggle : este atributo toma la identificación del objetivo como el valor del atributo.

Sintaxis:

<p>
    <a data-toggle="exampleToggle">Toggle</a>
</p>
<ul class="menu" id="exampleToggle" data-toggler=".expanded">
  Content
</ul>

Ejemplo 1: Este ejemplo ilustra la clase Toggler en Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Toggler</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
            crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <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" 
            integrity=
"sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" 
            crossorigin="anonymous">
    </script>
</head>
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>Foundation CSS Toggler</h3>
    <p>
        <a data-toggle="toggleExample">Toggle!</a>
    </p>
  
    <ul class="menu" 
        id="toggleExample" 
        data-toggler=".expanded">
        <li>
            <a href="#">Menu 1</a>
        </li>
        <li>
            <a href="#">Menu 2</a>
        </li>
        <li>
            <a href="#">Menu 3</a>
        </li>
        <li>
            <a href="#">Menu 4</a>
        </li>
        <li>
            <a href="#">Menu 5</a>
        </li>
    </ul>
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>
</html>

Producción:

Alternador CSS básico

Ejemplo 2: este ejemplo implementa la clase de llamada con un atributo que se puede cerrar con datos para cerrar el panel en Foundation CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Toggler</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
            crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <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" 
            integrity=
"sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" 
            crossorigin="anonymous">
    </script>
</head>
  
<body>
    <h1 style="color: green;">
    GeeksforGeeks
  </h1>
    <h3>Foundation CSS Toggler</h3>
    <strong>Close an element:</strong>
    <div class="callout" data-closable>
        <button class="close-button" data-close>×</button>
        <p>
            A Computer Science portal for geeks.
            It contains well written, well thought 
            and well-explained computer science 
            and programming articles
        </p>
    </div>
    <div class="callout" data-closable>
        <button class="close-button" data-close>×</button>
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
             alt="GFG_logo"> 
    </div>
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>
</html>

Producción:

Alternador CSS básico

Enlace de referencia: https://get.foundation/sites/docs/toggler.html#

Publicación traducida automáticamente

Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta