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 nos ayudan a navegar por varios documentos en un solo contenedor sin salir de la página. Actúan como un enlace que cambia el contenido dentro del contenedor según la pestaña que esté activa.
Clases de pestañas CSS de Foundation:
- pestañas: esta clase crea un contenedor básico para pestañas dentro del cual se crean todas las pestañas. Esto se usa en el elemento <ul>.
- tabs-title: esta clase crea las pestañas dentro del contenedor y los valores dentro de esta clase div se usan como títulos para las pestañas. Esto se usa en elementos <li>.
- is-active: esta clase nos permite saber qué clase y panel están activos de forma predeterminada al recargar.
- tabs-panel: Esta clase contiene todos los datos del panel asociados a cada pestaña.
- tabs-content: esta clase contiene los datos que deben mostrar las pestañas. Esta clase está anidada dentro de un div principal con un panel de pestañas de clase.
Sintaxis:
<ul class = "tabs" data-tabs id = "tabs_example">
<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 las pestañas horizontales creadas 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 /><br />
</center>
<ul class="tabs" 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 CSS básicas
Ejemplo 2: este es un ejemplo básico que ilustra las pestañas verticales creadas 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 /><br />
</center>
<ul class="vertical tabs" 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>
</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>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Pestañas CSS básicas
Referencia: https://get.foundation/sites/docs/tabs.html
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA