Tabs
Las tabs son muy versátiles tanto en la ordenación y las construcciones de navegación. Con el paquete de base de Foundation, las tabs en el formato especificado a continuación ya están conectadas - no hay trabajo extra que se requiere.
Pestañas simples
Las fichas están hechas de dos objetos: un objeto
dl que contiene las mismas fichas, y un objeto ul que contiene el contenido de la ficha. Si simplemente quieres pestañas visuales (como se ve en esta documentación) sin conexión en la página, sólo tiene la lista de lesionados. Si desea pestañas funcionales, sólo asegúrese de que cada ficha está relacionada con una identificación, y que en la ficha correspondiente tiene un identificador de #tabnameTab.
Nota: La tercera pestaña es usa las clases de visibilidad móviles para ocultar en dispositivos pequeños.
<dl class="tabs" >
<dd class="active"><a href="#simple1" > Simple Tab 1</a></dd>
<dd><a href="#simple2" > Simple Tab 2</a></dd>
<dd class="hide-for-small"><a href="#simple3" > Simple Tab 3</a></dd>
</dl>
<ul class="tabs-content" >
<li class="active" id="simple1Tab" > This is simple tab 1's content. Pretty neat, huh?</li>
<li id="simple2Tab" > This is simple tab 2's content. Now you see it!</li>
<li id="simple3Tab" > This is simple tab 3's content. It's, you know...okay.</li>
</ul>
Tab Sizing
Si quieres que tus pestañas para ejecutar todo el ancho de su contenedor de manera uniforme, usted puede agregar la clase de .two-up, .three-up, .four-up, y .five-up.
<dl class="tabs three-up" >
<dd class="active"><a href="#evenTab1" > Even Tab 1</a></dd>
<dd><a href="#evenTab2" > Even Tab 2</a></dd>
<dd><a href="#evenTab3" > Even Tab 3</a></dd>
</dl>
Tabs contenidos
tabs de contenidos tienen una clase simple que añadir "contained" en el elemento de las fichas de contenido. Lo que significa que el contenido de la ficha tiene un borde alrededor de ella atándola a las pestañas. Puede seguir utilizando los tamaños estándar de las columnas dentro de un elemento de tabulación.
También te darás cuenta en este ejemplo que un elemento
dt puede servir para agrupar las etiquetas de las pestañas.
<dl class="tabs contained" >
<dt>Title 1</dt>
<dd class="active"><a href="#simpleContained1" > Simple Tab 1</a></dd>
<dd><a href="#simpleContained2" > Simple Tab 2</a></dd>
<dt>Title 1</dt>
<dd class="hide-on-phones"><a href="#simpleContained3" > Simple Tab 3</a></dd>
</dl>
<ul class="tabs-content contained" >
<li class="active" id="simpleContained1Tab" > This is simple tab 1's content. Pretty neat, huh?</li>
<li id="simpleContained2Tab" > This is simple tab 2's content. Now you see it!</li>
<li id="simpleContained3Tab" > This is simple tab 3's content. It's only okay.</li>
</ul>
Pill-Style Tabs
Si usted necesita una visión alternativa para las tabs (especialmente para los filtros, o similares), puede utilizar el estilo píldora de pestañas. Se verá así:
<dl class="tabs pill" >
<dd class="active"><a href="#pillTab1" > Pill Tab 1</a></dd>
<dd><a href="#pillTab2" > Pill Tab 2</a></dd>
<dd><a href="#pillTab3" > Pill Tab 3</a></dd>
</dl>
Vertical Tabs
También puede utilizar las pestañas en una configuración vertical mediante la adición de una clase de "vertical" al elemento
dl. Éstos son grandes para navegación más escalable.
<dl class="nice vertical tabs" >
<dd class="active"><a href="#vertical1" > Vertical Tab 1</a></dd>
<dd><a href="#vertical2" > Vertical Tab 2</a></dd>
<dd><a href="#vertical3" > Vertical Tab 3</a></dd>
</dl>
Mobile Tabs
Si quieres un grupo estándar, tabulador horizontal para actuar vertical en pequeños dispositivos, añadiendo una clase de "móvil" a un grupo de fichas estándar (no vertical) va a cambiar a barras de navegación llenando el ancho en pantallas pequeñas.
