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>

Twig

<twig:tabs
  id="idContainerTabs"
  mode="horizontal"
  customClass="classContainerTabs"
  :tabs="[
    {
      'id': 'tab-1',
      'title': 'Tab item 1',
      'active': 'true',
      'href': '#tab-content-1'
    },
    {
      'id': 'tab-2',
      'title': 'Tab item 2',
      'href': '#tab-content-2'
    },
    {
      'id': 'tab-3',
      'title': 'Tab item 3',
      'href': '#tab-content-3'
    }
  ]"
/>

Lista de parámetros para tabs

Ruby

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

Twig

Parámetro

Tipo

Detalle

id	String	Identificador único del componente.
mode	String | "horizontal" | "vertical" (opcional)	Define la orientación de los tabs. Por defecto es "horizontal".
customClass	String (opcional)	Permite agregar clases personalizadas al contenedor de los tabs.
:tabs	Array de objetos	Lista de pestañas del componente. Cada objeto define una tab individual. Ver estructura a continuación.

Lista de parámetros para tab items

Ruby

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

Twig

Parámetro

Tipo

Detalle

id	String	Identificador único del tab.
title	String	Título visible del tab.
href	String	Enlace ancla para asociar el tab con su contenido.
active	Boolean (opcional)	Define si el tab está activo al cargar el componente. Solo uno debe estar activo.
disabled	Boolean (opcional)	Indica si el tab está deshabilitado.
badge	String (opcional)	Muestra un badge con el texto indicado. Aplica solo cuando el modo es "tabs".
customClassBadge	String (opcional)	Clase personalizada para el badge (solo si está habilitado). Ejemplo: "badge badge-chip-danger".
dropdown	Array de objetos (opcional)	Convierte el tab en un menú desplegable. Cada objeto representa una opción con label y href.

---

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.