Tabs con Foundation

Clase 11 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Clase anteriorSiguiente clase

Resumen

Vamos a crear navegación por tabs con Foundation, esto nos permite tener una navegación interna sin cambiar la URL

Recuerda tener la documentación oficial en caso de duda.

David Camacho

student•

Los tabs estan compuestos por dos cosas:

- Pestañas de navegacion

Contenido.

Para agregar nuesdtra navegación por tabs es indispensable crear una etiqueta ul con la clase tabs, con el atributo data-tabs y asignarle un id

"Esto es similar al dropdwon en el menu".

Para meter las pestañas en etiquetas li: A las etiquetas li, le vamos a dar una clase llamada tabs-title:

Y dentro de ella vamos a meter una etiqueta <a>.

Estas etiquetas <a> deberan tener como href un # junto con el id que le vamos a asignar a el div correspondiente de esa seccion.

Ejemplo: <a href="#panelViernes">Viernes</a>

TIPS:

- text-transform: uppercase;//Nos sirve para transformar el texto a mayusculas

Los tabs-title Foundation no nos permite centrarlos, para ello debemos agregar en nuestro archivo css unas propiedades, con el fin de pisar esos estilos:

.tabs-title {

display: inline-block;

float: none;

}

Si no agregamos estos estilos, Foundation lo que hace es tirarnos los tabs-title a la izquierda.

Ya realizada la navegación, procedemos a construir el contenido para esa navegación.

Para ello vamos a crear un div con clase 'tabs-content' y con el atributo data-tabs-content, este atributo va a tener como valor el id que se le asigno al ul. En el ejemplo de la clase le asignamos 'lineup-tabs'

<div class="tabs-content" data-tabs-content="lineup-tabs">

Es indispensable agregar el id que se le asigno al ul ya que en nuestra pagina podemos tener distintos menu de navegacion con distintos contenidos

Dentro de este tabs-content vamos a crear los divs para cada titulo.

Para ello creamos un div con la clase 'tabs-panel' y le damos como id 'panelViernes'

panelViernes porque ese fue el href que le dimos a la primera pestaña de navegacion.

<div class="tabs-panel" id="panelViernres"></div>

Debemos activar un panel por defecto, para que sea el que se muestre cuando el usuario cargue la pagina por primera vez, para eso le agregamos la clase 'is-active' para que la seccion se muestre por defecto, en este caso lo vamos a hacer con el panelViernes, tanto en el title como en el contenido.

Cesar Aguilar fonseca

student•

En mi pagina después de haber hecho click en alguno de los tabs o de las pestañas el background-color cambiaba por un momento y era de este color, busque diferencias en código pero al final esta fue la solución, si les pasa espero que les sirva.
![](

/* solución */
.tabs-title > a:focus, .tabs-title > a[aria-selected='true']{
	background-color: #9676AF;
}

Roberto Alexander Grave Vicente

student•

Gracias me fue Util

Jesús Auriol Villamarín Ortiz

student•

Me paso igual, es algo fastidioso, por eso es bueno apoyarse con las herramientas de desarrollador

Juan David lemus Rubiano

student•

les digo que esa clase is-active parece que no sirviera, por que por ningun lago aparecio el texto, puede ser la version de foundation que estoy usando no se,

Roger Carlos Ariel Alba

student•

Hola!
Me paso lo mismo, pero creo que tiene que ver con el navegador y/o el OS.

te dire nu fue hasta despues de que agregue ambos “is-active” y en el <a href="#nombreDelPanel"> osea hasta que termina el ejercicio que me funciono.

Te dejo mi codigo por si te sirve.

<section id="lineup-container">
        <h3 class="text-center">Lineup</h3>
        <ul class="tabs text-center" data-tabs id="lineup-tabs">
            <li class="tabs-title is-active"><a href="#panelViernes">Viernes</a></li>
            <li class="tabs-title"><a href="#panelSabado">Sábado</a></li>
            <li class="tabs-title"><a href="#panelDomingo">Domingo</a></li>
        </ul>
        <div class="tabs-content" data-tabs-content="lineup-tabs">
            <div class="tabs-panel is-active" id="panelViernes">
                ContenidoViernes
            </div>
            <div class="tabs-panel" id="panelSabado">
                ContenidoSabado
            </div>
            <div class="tabs-panel" id="panelDomingo">
                ContenidoDomingo
            </div>
        </div>
        
        
    </section>

Juan David lemus Rubiano

student•

encontre el error, me fui a la documentacion y vi que en los li class=“tabs-title is active” al li hay que agregarle la clase is-active, ahi les dejo la sugerencia por si alguie le pasa lo mismo

Hernán Quiroga

student•

Es justo lo que necesitaba ! no logré hacerlo en Bootstrap (excepto con carrousel, aunque fue muy tedioso). Creo que me voy a pasar a Fundation, al menos para mi proyecto actual, las clases son mas largas y poco amigables que bootstrap, pero me resulta mas fácil. Veremos…

Carlos Francisco Betancourt Requena

student•

Mi resumen:

Las tabs se componen de dos partes principales, la navegación (tabs) y el contenido de cada una de ellas.

La navegación se construye a través de la etiqueta <ul> con la clase tabs, con el atributo data-tabs y un id personalizado, el cual se utiliza para enlazar la etiqueta <div> que envuelve el contenido de cada tab. Las etiquetas <li> deben tener la clase tabs-title, los <li> contienen los enlaces <a>.

El contenido de las tabs, debe estar envuelto por una etiqueta <div> con la clase tabs-content, que a su vez tiene el atributo data-tabs-content, el cual lleva como valor el id que se especificó en la etique <ul> de la navegación. Dentro del <div> antes mencionado deben estar cada uno de los contenidos que corresponde a cada tab, éstos contenidos deben estar envueltos en un <div> con la clase tabs-panel y con un id que lo identifique, el cual es utilizado para referenciar el enlace <a> de cada navegación.

Clase is-active: se utiliza en la etiqueta <li> de la navegación y hace que ésta se muestre diferente al resto de los enlaces, indicando que está activo; también debe utilizarse en el <div> que envuelve uno de los contenidos de los tabs, comúnmente el primero de ellos.

Mi código:

<ul class="tabs text-center" data-tabs id="lineup-tabs">
	<li class="tabs-title is-active"><a href="#panel-viernes">Viernes</a></li>
	<li class="tabs-title"><a href="#panel-sabado">Sábado</a></li>
	<li class="tabs-title"><a href="#panel-domingo">Domingo</a></li>
</ul>
<div class="tabs-content" data-tabs-content="lineup-tabs">
	<div class="tabs-panel is-active" id="panel-viernes">
        	Contenido del Viernes.
        </div>
        <div class="tabs-panel" id="panel-sabado">
		Contenido del Sábado.
        </div>
        <div class="tabs-panel" id="panel-domingo">
        	Contenido del Domingo.
        </div>
</div>

Saludos!!!

Itzel

student•

hay alguna página donde podamos ver el listado de clases de foundation?

Itzel

student•

perfecto gracias!!

Juan David lemus Rubiano

student•

sacha, tampco dijistes como borrar el pading, aunque yo lo hice, pero otra persona no se daria cuenta

José Pedro Cruz Rodríguez

student•

La clase is-active no me funciona, como podría solucionarlo?

Javier Eduardo Perez Carreño

student•

Solo tiene que agregar # al inicio del atributo htref de las etiquetas <a></<a> de viernes, sábado y domingo

<ul class="tabs text-center" data-tabs id="lineup-tabs">
      <li class="tabs-title is-active">
        <a href="#panelViernes">Viernes</a>
      </li>
      <li class="tabs-title">
        <a href="#panelSabado">Sábado</a>
      </li>
      <li class="tabs-title">
        <a href="#panelDomingo">Domingo</a>
      </li>
    </ul>

Julio César Perdomo Correa

student•

Abrí la consola de chrome y obtuve el error
Syntax error, unrecognized expression: #
¿Alguien sabe cómo arreglarlo?

Diego Forero

Team Platzi•

Estas haciendo un comentario que inicia con #?

Lo que te dice es que no reconoce el # revisa la linea en la que te da el error.

Julio César Perdomo Correa

student•

Listo, lo que pasa es que estaba definiendo mal los enlaces del line-up container.

Ivan Cardozo

student•

No anda el boton de pantalla completa

Diego Forero

Team Platzi•

A mi me funciona sin problema, puedes abrir la consola del navegador y revisar si hay algun error cuando intentas usar full screen.

Ivan Cardozo

student•

Ya anda perfecto

Tabs con Foundation

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman