Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. 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.
Las pestañas son componentes que ayudan a navegar por varios documentos en un solo contenedor sin salir de la página. Hay varios tipos de variaciones de pestañas en Foundation CSS, como pestañas horizontales, pestañas verticales y pestañas plegables. En este artículo, aprenderemos sobre las pestañas colapsadas en Foundation CSS.
La variación Pestañas colapsadas hace que la pestaña se colapse al hacer clic si está abierta. Para crear una pestaña plegable en Foundation CSS, usamos el atributo data-active-collapse cuyo valor se establece en true . De forma predeterminada, el valor del atributo data-active-collapse se establece en false .
Atributo de las pestañas colapsadas de Foundation CSS:
- data-active-collapse: este atributo permite que la pestaña se contraiga cuando se hace clic. Acepta los valores booleanos y el valor predeterminado es falso . Si se establece en verdadero, hará que la pestaña se colapse si se hace clic en ella.
Sintaxis:
<ul class = "tabs" data-active-collapse="true">
<li class = "tabs-title is-active"> ... </li>
</ul>
<div class = "tabs-content">
<div class = "tabs-panel is-active">
...
</div>
</div>
Ejemplo 1: este es un ejemplo básico que ilustra pestañas colapsadas horizontales hechas con Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<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/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">
</script>
</head>
<body style="padding: 30px;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Tabs</strong>
<br />
</center>
<ul class="tabs"
data-active-collapse="true"
data-tabs id="tabs_example">
<li class="tabs-title is-active">
<a href="#content1">Tab1</a>
</li>
<li class="tabs-title">
<a href="#content2">Tab2</a>
</li>
<li class="tabs-title">
<a href="#content3">Tab3</a>
</li>
<li class="tabs-title">
<a href="#content4">Tab4</a>
</li>
</ul>
<div class="tabs-content"
data-tabs-content="tabs_example">
<div class="tabs-panel is-active"
id="content1">
<h1>GeeksforGeeks</h1>
</div>
<div class="tabs-panel"
id="content2">
<img src=
"http://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png" />
</div>
<div class="tabs-panel"
id="content3">
<p>This is tab 3</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
</div>
<div class="tabs-panel"
id="content4">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png" />
</div>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Pestañas de contracción horizontal de Foundation CSS
Ejemplo 2: este es un ejemplo básico que ilustra pestañas colapsadas verticales hechas con Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<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/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">
</script>
</head>
<body style="padding: 30px;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Tabs</strong>
<br />
</center>
<ul class="vertical tabs"
data-active-collapse="true"
data-tabs id="tabs_example">
<li class="tabs-title is-active">
<a href="#content1">Tab1</a>
</li>
<li class="tabs-title">
<a href="#content2">Tab2</a>
</li>
<li class="tabs-title">
<a href="#content3">Tab3</a>
</li>
<li class="tabs-title">
<a href="#content4">Tab4</a>
</li>
</ul>
<div class="tabs-content"
data-tabs-content="tabs_example">
<div class="tabs-panel is-active"
id="content1">
<h1>GeeksforGeeks</h1>
</div>
<div class="tabs-panel" id="content2">
<img src=
"http://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png" />
</div>
<div class="tabs-panel"
id="content3">
<p>This is tab 3</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
</div>
<div class="tabs-panel"
id="content4">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png" />
</div>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Pestañas plegables verticales CSS de Foundation
Referencia: https://get.foundation/sites/docs/tabs.html#collapsing-tabs
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA