Tabs o Pestañas

Descripción

Conjunto de shortcodes que muestran de manera alternativa, en forma de pestañas, varios contenidos. De apertura y cierre, permite otros shortcodes.

Parámetros

Shortcode [tab-item]

  • title: Encabezado el elemento. Obligatorio.
  • active: Si el elemento estará activo o no en cuanto cargue la página. Posibles valores: true, false. Valor predeterminado false.

En caso de que ninguno de los elementos [tab-item] tenga el parámetro active="true", se mostrará activo el primero de ellos.

Atención

El shortcode [tab-item] no funciona por sí solo, debe estar englobado dentro del shortcode [tabs].

Shortcode [tabs]

  • type: Estilo de las pestañas. Posibles valores: tabs, pills. Valor predeterminado tabs.
  • class: Clase CSS. Posibles valores: Cualquiera de las clases aplicables al elemento .nav. Ver la documentación en Bootstrap.

Uso

[tabs type="tabs" class=""][tab-item title="" active="false"][/tab-item] …[/tabs]

Ejemplos

Estilo tabs

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia.

Estilo pills

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia.

Clase justify-content-center

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia.

Clase justify-content-end

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia.

Clase nav-fill

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia.

Clase nav-justified

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia.