Navigation Tabs

Los tabs es un componente que se utiliza para ocultar contenido detrás de un elemento seleccionable. Esto también se puede utilizar como una pseudo-navegación para una página, donde las pestañas son enlaces y los elementos de pestaña son el contenido.

Playground

• Tab item 1
• Tab item 2
• Tab item 3

Contenido Tab item 1

Contenido Tab item 2

Contenido Tab item 3

dropdown item 1

dropdown item 2

Selecciona un modoTabsPills

Item dropdown

Badge en item

Tab disabled

Ruby

<%= tabs_widget  do |tb| %>
  <%= tb.tab 'Tab item 1', id: 'tab-1',  active: true do %>
    Contenido Tab item 1
  <% end %>
  <%= tb.tab 'Tab item 2', id: 'tab-2' do %>
    Contenido Tab item 2
  <% end %>
  <%= tb.tab 'Tab item 3', id: 'tab-3'  do %>
    Contenido Tab item 3
  <% end %>
  
<% end %>

Html

<div class="nav-tabs-custom">
  <ul class='nav nav-tabs' id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="item-1-tab" data-toggle="tab" href="#tab-item-1" role="tab" aria-controls="tab-item-1" aria-selected="true">
        Tab item 1
        
      </a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="item-2-tab" data-toggle="tab" href="#tab-item-2" role="tab" aria-controls="tab-item-2" aria-selected="false">
        Tab item 2
        
      </a>
    </li>
    <li class="nav-item " role="presentation">
      <a class="nav-link" id="item-3-tab" data-toggle="tab" href="#tab-item-3" role="tab" aria-controls="tab-item-3" aria-selected="false">
        Tab item 3
        
        
      </a>
    </li>
    
  </ul>
</div>

    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="tab-item-1" role="tabpanel" aria-labelledby="item-1-tab">Contenido Tab item 1</div>
      <div class="tab-pane fade" id="tab-item-2" role="tabpanel" aria-labelledby="item-2-tab">Contenido Tab item 2</div>
      <div class="tab-pane fade" id="tab-item-3" role="tabpanel" aria-labelledby="item-3-tab">Contenido Tab item 3</div>
    
    </div>

Lista de parámetros para tabs

Parámetro

Tipo

Detalle

mode	String	attributes del widget (pills, scrolling-tabs o tabs)
title	String	que sería el titulo de los tabs
icon	String	icono que acompaña el titulo
tabs_class	Block	Clase adicional a los tabs

Lista de parámetros para tab items

Parámetro

Tipo

Detalle

title	String	Label del item del tab
id	String	Id del item del tab
badge	String	Contenido del badge si es que tiene
active	Boolean	Si el tab se encuentra activo o no
data	Hash	Si es necesario agregar data adicional
disabled	Boolean	Si el tab se encuentra deshabilitado o no

---

Anatomía

1. Tab item Default

2. Tab item Active

3. Tab item Disabled

4. Badge [opcional]

Puede llevar o no una notificación.

5. Dropdown [opcional]

Los tab items pueden llevar un dropdown que despliega opciones.

6. Scroll [opcional]

Los tabs pueden llevar una variante “scrolling-tab” en caso de que su contenido crezca demasiado. Este comportamiento es solo para su uso en desktop, ya que en mobile los controladores desaparecen y se remplaza por el gesto del dedo, deslizando de manera orgánica.

---

Casos de uso

Los tabs son una manera fácil de organizar el contenido al agrupar información similar en la misma página. Esto permite ver el contenido sin tener que navegar fuera de esa página.

El tabs_widget es un componente que se utiliza para ocultar contenido detrás de un elemento seleccionable. Esto también se puede utilizar como una pseudo-navegación para una página, donde las pestañas son enlaces y los elementos de pestaña son el contenido.