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. 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 las pestañas de navegación que se utilizan para mostrar el contenido del panel sin salir de la página actual. Podemos ahorrar espacio en nuestra página web creando pestañas y almacenando contenido en ellas. Las pestañas verticales son aquellas pestañas que se crean en una dirección vertical y el contenido se muestra en el lado derecho de la pestaña. En este artículo, discutiremos cómo crear las pestañas verticales en Foundation CSS.
Clases de pestañas verticales de Foundation CSS :
- tabs : Se utiliza para crear las pestañas.
- vertical : Se utiliza para crear pestañas verticales.
- tabs-title: Se utiliza para dar el título de la pestaña.
- tabs-content: Se utiliza para dar el contenido de la pestaña.
Sintaxis:
<ul class="vertical tabs"
data-tabs id="">
.........
</ul>
Ejemplo 1: A continuación se muestra el ejemplo que ilustra las pestañas verticales con contenido.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<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"
crossorigin="anonymous">
</script>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
Foundation CSS Vertical Tabs
</h3>
<div class="grid-x">
<ul class="vertical tabs" data-tabs id="vertical-tabs">
<li class="tabs-title is-active">
<a href="#tab1" aria-selected="true">First Tab</a>
</li>
<li class="tabs-title">
<a href="#tab2">Second Tab</a>
</li>
<li class="tabs-title">
<a href="#tab3">Third Tab</a>
</li>
</ul>
<div>
<div class="tabs-content vertical"
data-tabs-content="vertical-tabs">
<div class="tabs-panel is-active" id="tab1">
<p>Tab 1 content</p>
<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="tabs-panel" id="tab2">
<p>Tab 2 content</p>
<p>
With the idea of imparting programming
knowledge, Mr. Sandeep Jain, an IIT Roorkee
alumnus started a dream, GeeksforGeeks.
</p>
</div>
<div class="tabs-panel" id="tab3">
<p>Tab 3 content</p>
<p>
A Computer Science portal for geeks.
It contains well written, well thought and
well explained computer science and programming articles
</p>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Ejemplo 2: A continuación se muestra el ejemplo que ilustra las pestañas verticales con texto e imágenes .
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
crossorigin="anonymous">
<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"
crossorigin="anonymous">
</script>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Vertical Tabs</h3>
<div class="grid-x">
<ul class="vertical tabs" data-tabs id="vertical-tabs">
<li class="tabs-title is-active">
<a href="#tab1" aria-selected="true">First Tab</a>
</li>
<li class="tabs-title">
<a href="#tab2">Second Tab</a>
</li>
<li class="tabs-title">
<a href="#tab3">Third Tab</a>
</li>
<li class="tabs-title">
<a href="#tab4">Fourth Tab</a>
</li>
<li class="tabs-title">
<a href="#tab5">Fifth Tab</a>
</li>
</ul>
<div>
<div class="tabs-content vertical" data-tabs-content="vertical-tabs">
<div class="tabs-panel is-active" id="tab1">
<p>Tab 1 content</p>
<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="tabs-panel" id="tab2">
<p>Tab 2 Image</p>
<strong>GeeksforGeeks Image</strong>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG">
</div>
<div class="tabs-panel" id="tab3">
<p>Tab 3 content</p>
<p>
With the idea of imparting programming
knowledge, Mr. Sandeep Jain, an IIT Roorkee
alumnus started a dream, GeeksforGeeks.
</p>
</div>
<div class="tabs-panel" id="tab4">
<p>Tab 4 Image</p>
<strong>GFG Image</strong>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" alt="">
</div>
<div class="tabs-panel" id="tab5">
<p>Tab 5 content</p>
<p>
With every tick of time, we are adding
arrows in our quiver. From articles on various
computer science subjects for practice
</p>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/tabs.html#vertical-tabs
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