Acordeón de fregadero de cocina Foundation CSS

Posted on by Rudeus Greyrat

Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que hace que sea muy fácil diseñar 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.


The Kitchen Sink tiene los elementos básicos para funcionar bien en nuestros sitios web y aplicaciones. El elemento Acordeón es un componente que le ayuda a mostrar una gran cantidad de datos en un espacio limitado y luego mostrarlos y ocultarlos según sea necesario. Se pueden usar para contener tipos arbitrarios de contenido, como imágenes, textos, enlaces, reseñas, preguntas frecuentes, etc. 

Foundation CSS Kitchen Sink Clases de acordeón:

  • acordeón: esta clase se utiliza para crear el acordeón y está vinculada con el atributo data-accordion .
  • accordion-item: Esta clase se utiliza para crear los diferentes paneles dentro de un acordeón y está vinculada con el atributo data-accordion-item. Cualquier panel o elemento de acordeón se puede activar utilizando la clase está activo junto con la clase elemento de acordeón, es decir, [el elemento de acordeón está activo].
  • acordeón-título: Esta clase se utiliza para crear un título de acordeón. Se usa junto con la etiqueta <a> con el nombre de clase de acordeón-título.
  • contenido de acordeón: esta clase se utiliza para mostrar todo el contenido dentro de cada pestaña de acordeón y está vinculada con el atributo de contenido de pestaña de datos .

Sintaxis :

<div class="accordion" data-accordion>
   <div class="accordion-item" data-accordion-item>
     <a href="#" class="accordion-title"></a>
     <div class="accordion-content" data-tab-content>
       <p>Content </p>
     </div>
   </div>
</div>

Ejemplo : Este es el ejemplo básico para Kitchen Sink Accordion en Foundation CSS.

HTML

<!DOCTYPE html>
<html>
  
<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>
    <h2>GeeksforGeesk</h2>
    <h4>Foundation CSS Kitchen Sink Accordion</h4>
    <div class="accordion" data-accordion>
        <br>
        <div class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">
                GFG Foundation Accordion 1
            </a>
  
            <div class="accordion-content" data-tab-content>
                <p>Accordion 1 subheading</p>
   
                <a href="#">Link 1</a> 
            </div>
        </div>
        <div class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">
                GFG Foundation Accordion 2
            </a>
            <div class="accordion-content" data-tab-content>
                <p>Accordion 2 subheading</p>
   
                <a href="#">Link 2</a> 
            </div>
        </div>
        <div class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">
                GFG Foundation Accordion 3
            </a>
            <div class="accordion-content" data-tab-content>
                <p>Accordion3 subheading</p>
  
                <a href="#">Link 3</a> 
            </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Salida :

Foundation CSS Fregadero de cocina Acordeón Opciones avanzadas:

Foundation CSS también proporciona a los usuarios algunas opciones avanzadas para aumentar la accesibilidad. Estos se pueden usar junto con el atributo  data-accordion .

  • todo cerrado : De forma predeterminada, un elemento de acordeón siempre permanece activo. Uno puede cambiar esto cambiando la opción allowAllClosed a ‘true’ . Por lo tanto, el div tendría un atributo como data-accordion data-allow-all-closed=”true” .
  • expansión múltiple: de forma predeterminada, solo un elemento de acordeón puede permanecer activo. Pero se puede cambiar agregando la opción Multi-expand y cambiando su valor a ‘true’ . Por lo tanto, el div tendría un atributo como data-accordion data-multi-expand=”true” .
  • disabled: Disabled es una propiedad única mediante la cual se puede desactivar la navegación en el Acordeón. Por lo tanto, el div tendría un atributo como data-accordion disabled .

Sintaxis :

<div class="accordion" attribute-name></div>

Ejemplo : el código siguiente muestra la clase Acordeón del fregadero de la cocina junto con la variante completamente cerrada .

HTML

<!DOCTYPE html>
<html>
  
<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>
    <h2>GeeksforGeeks</h2>
    <h4>Foundation CSS Kitchen Sink Accordion</h4>
    <div class="accordion" 
         data-accordion data-allow-all-closed="true">
        <div class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">
                GFG Foundation Accordion 1
            </a>
            <div class="accordion-content" data-tab-content>
                <p>Accordion 1 content</p>
   
                <a href="#">Link 1</a> 
            </div>
        </div>
        <div class="accordion-item is-active" data-accordion-item>
            <a href="#" class="accordion-title">
                GFG Foundation Accordion 2
            </a>
            <div class="accordion-content" data-tab-content>
                <p>Accordion 2 content</p>
   
                <a href="#">Link 2</a> 
            </div>
        </div>
        <div class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">
                GFG Foundation Accordion 3
            </a>
            <div class="accordion-content" data-tab-content>
                <p>Accordion3 content</p>
   
                <a href="#">Link 3</a>
            </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Producción:

Ejemplo : el código siguiente muestra la clase Acordeón del fregadero de la cocina junto con la variante de expansión múltiple .

HTML

<!DOCTYPE html>
<html>
  
<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>
    <h2>GeeksforGeeks</h2>
    <h4>Foundation CSS Kitchen Sink Accordion</h4>
    <div class="accordion"
         data-accordion data-multi-expand="true">
        <div class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">
                GFG Foundation Accordion 1
            </a>
            <div class="accordion-content" data-tab-content>
                <p>Accordion 1 content</p>
   
                <a href="#">Link 1</a> 
            </div>
        </div>
        <div class="accordion-item is-active" data-accordion-item>
           <a href="#" class="accordion-title">
                GFG Foundation Accordion 2
           </a>
            <div class="accordion-content" data-tab-content>
                <p>Accordion 2 content</p>
   
                <a href="#">Link 2</a> 
            </div>
        </div>
        <div class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">
                GFG Foundation Accordion 3
            </a>
            <div class="accordion-content" data-tab-content>
                <p>Accordion3 content</p>
   
                <a href="#">Link 3</a> 
            </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Salida :

Ejemplo : el código siguiente muestra la clase Acordeón del fregadero de la cocina junto con la variante deshabilitada .

HTML

<!DOCTYPE html>
<html>
  
<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>
    <h2>GeeksforGeeks</h2>
    <h4>Foundation CSS Kitchen Sink Accordion</h4>
    <div class="accordion" data-accordion disabled>
        <div class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">
                GFG Foundation Accordion 1
            </a>
            <div class="accordion-content" data-tab-content>
                <p>Accordion 1 content</p>
  
                <a href="#">Link 1</a> 
            </div>
        </div>
        <div class="accordion-item is-active" data-accordion-item>
            <a href="#" class="accordion-title">
                GFG Foundation Accordion 2
            </a>
            <div class="accordion-content" data-tab-content>
                <p>Accordion 2 content</p>
  
                <a href="#">Link 2</a> 
            </div>
        </div>
        <div class="accordion-item" data-accordion-item>
            <a href="#" class="accordion-title">
                GFG Foundation Accordion 3
            </a>
            <div class="accordion-content" data-tab-content>
                <p>Accordion3 content</p>
   
                <a href="#">Link 3</a> 
            </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>

Salida :

Referencia: https://get.foundation/sites/docs/kitchen-sink.html#accordion

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *