Foundation CSS es un marco de front-end utilizado para sitios web, aplicaciones y correos electrónicos receptivos para cualquier dispositivo. También tiene muchas plantillas de front-end como Bootstrap, Semantic UI y otros marcos de front-end. Es flexible, legible y completamente personalizable. Los principales gigantes tecnológicos como Adobe, Amazon, Cisco, Hp, Mozilla, Samsung, etc. están utilizando Foundation CSS.
En este artículo, vamos a crear una página web simple con los conceptos básicos de las pestañas de acordeón receptivas en Foundation CSS.
Pestañas de acordeón receptivas: uno de los contenedores CSS básicos, se utilizan para intercambiar de manera receptiva entre dos componentes en varios puntos de interrupción. Hasta que se haga clic en el tema específico, el contenido de un encabezado o tema está oculto. El contenido de otros temas se ocultará automáticamente y el contenido se presentará como un cuadro desplegable. De un dispositivo a otro, cambiará de forma receptiva de pestañas a listas y viceversa.
Foundation CSS Responsive Accordion Tabs Clases básicas:
Para el diseño de acordeón:
- acordeón: esta clase, cuando se agrega a una lista desordenada, la convierte en un componente de acordeón.
- elemento de acordeón: esta clase, cuando se agrega a los elementos de la lista, los convierte en componentes de acordeón.
- acordeón-título: esta clase se utiliza para especificar el título de cada elemento de acordeón.
- contenido de acordeón: esta clase se agrega para contener el contenido debajo de cada elemento de acordeón.
Sintaxis:
<ul class="accordion" data-responsive-accordion-tabs=". . .">
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">. .</a>
<div class="accordion-content" data-tab-content>
<!--Tab content goes here--!>
</div>
</li>
</ul>
Para diseño de pestañas:
- pestañas: esta clase se utiliza para contener todos los elementos de la lista que se transforman en elementos de pestaña.
- tabs-title: Esta clase se utiliza para especificar el título de las respectivas pestañas.
- tab-content: esta clase se usa para agregar contenido para las pestañas respectivas.
- tabs-panel: esta clase agrega el panel que se mostrará cuando se haga clic en la pestaña respectiva.
Sintaxis:
<ul class="tabs" data-responsive-accordion-tabs=". . ." id="example-tabs">
<li class="tabs-title is-active">
<a href="#panel1" aria-selected="true">. .</a>
</li>
<li class="tabs-title">
<a href="#panel2">....</a>
</li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<!--Tab content--!>
</div>
<div class="tabs-panel" id="panel2">
<!--Tab content--!>
</div>
</div>
Foundation CSS Responsive Accordion Tabs Atributos básicos:
- [data-responsive-accordion-tabs]: este atributo se usa para indicar cómo actuarán las pestañas cuando se cambien los tamaños de pantalla, toma los valores del diseño predeterminado a tamaño de pantalla mediano o pequeño, luego a tamaño de pantalla grande.
- [data-tab-content]: este atributo se agrega al contenedor con el contenido del acordeón.
- [data-tabs-content=”idOfTabs”]: este atributo se agrega al contenedor con el contenido de la pestaña, toma la identificación del contenedor de pestañas.
Ejemplo 1: El siguiente código demuestra el uso de las pestañas de acordeón y lo cambia al diseño de pestañas cuando el tamaño de la pantalla es mediano.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Foundation CSS Stylesheet --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- jQuery CDN --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <!-- Foundation CSS JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Foundation CSS Responsive Accordion Tabs Basics</h3> <div style="width: 1100px;"> <!-- Creating an unordered list as an accordion --> <ul class="accordion" data-responsive-accordion-tabs ="accordion medium-tabs large-accordion"> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>GfG Logo</h6> </a> <div class="accordion-content" data-tab-content> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt=""> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>DS</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead"> A data structure is a particular way of organizing data in a computer so that it can be used effectively. For example, we can store a list of items having the same data-type using the array data structure. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>Algorithms</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead"> The word Algorithm means ” A set of rules to be followed in calculations or other problem-solving operations ” Or ” A procedure for solving a mathematical problem in a finite number of steps that frequently by recursive operations “. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>Competitive Programming</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead"> Competitive Programming is a mental sport which enables you to code a given problem under provided constraints. The purpose of this article is to guide every individual possessing a desire to excel in this sport. This article provides a detailed syllabus for Competitive Programming designed by industry experts to boost the preparation of the readers. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>GfG</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead"> A Computer Science portal for geeks. Gain and share your knowledge & skills with a variety of learning platforms offered by GeeksforGeeks. Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing. We provide a variety of services for you to learn, thrive and also have fun! </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>C++</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead"> C++ is a general-purpose programming language and is widely used nowadays for competitive programming. It has imperative, object-oriented and generic programming features. C++ runs on lots of platforms like Windows, Linux, Unix, Mac etc. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>Java</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead"> Java has been one of the most popular programming languages for many years. Java is Object Oriented. However, it is not considered as pure object-oriented as it provides support for primitive data types (like int, char, etc)The Java codes are first compiled into byte code (machine-independent code). Then the byte code runs on Java Virtual Machine (JVM) regardless of the underlying architecture. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>Python</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead"> Python is a high-level, general-purpose and a very popular programming language. Python programming language (latest Python 3) is being used in web development, Machine Learning applications, along with all cutting edge technology in Software Industry. Python Programming Language is very well suited for Beginners, also for experienced programmers with other programming languages like C++ and Java. </p> </div> </li> </ul> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra el uso del diseño de pestañas y lo cambia a un diseño de acordeón cuando el tamaño de la pantalla es mediano.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Foundation CSS Stylesheet --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- jQuery CDN --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <!-- Foundation CSS JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color:green;">GeeksforGeeks</h1> <h3>Foundation CSS Responsive Accordion Tabs Basics</h3> <div style="width:1100px;"> <!-- Creating an unordered list as an accordion --> <ul class="accordion" data-responsive-accordion-tabs ="tabs medium-accordion large-tabs"> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>GfG Logo</h6> </a> <div class="accordion-content" data-tab-content> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt=""> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>DS</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead"> A data structure is a particular way of organizing data in a computer so that it can be used effectively. For example, we can store a list of items having the same data-type using the array data structure. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>Algorithms</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead"> The word Algorithm means ” A set of rules to be followed in calculations or other problem-solving operations ” Or ” A procedure for solving a mathematical problem in a finite number of steps that frequently by recursive operations “. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>Competitive Programming</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead"> Competitive Programming is a mental sport which enables you to code a given problem under provided constraints. The purpose of this article is to guide every individual possessing a desire to excel in this sport. This article provides a detailed syllabus for Competitive Programming designed by industry experts to boost the preparation of the readers. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>GfG</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead">A Computer Science portal for geeks. Gain and share your knowledge & skills with a variety of learning platforms offered by GeeksforGeeks. Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing. We provide a variety of services for you to learn, thrive and also have fun! </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>C++</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead"> C++ is a general-purpose programming language and is widely used nowadays for competitive programming. It has imperative, object-oriented and generic programming features. C++ runs on lots of platforms like Windows, Linux, Unix, Mac etc. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>Java</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead"> Java has been one of the most popular programming languages for many years. Java is Object Oriented. However, it is not considered as pure object-oriented as it provides support for primitive data types (like int, char, etc) The Java codes are first compiled into byte code (machine-independent code). Then the byte code runs on Java Virtual Machine (JVM) regardless of the underlying architecture. </p> </div> </li> <li class="accordion-item" data-accordion-item> <a href="#" class="accordion-title"> <h6>Python</h6> </a> <div class="accordion-content" data-tab-content> <p class="lead"> Python is a high-level, general-purpose and a very popular programming language. Python programming language (latest Python 3) is being used in web development, Machine Learning applications, along with all cutting edge technology in Software Industry. Python Programming Language is very well suited for Beginners, also for experienced programmers with other programming languages like C++ and Java. </p> </div> </li> </ul> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/responsive-accordion-tabs.html#basics
Publicación traducida automáticamente
Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA