Tabs

Componentes

Tabs o pestañas

Los tabs o pestañas, son una opción para agrupar contenido diferente, pero relacionado y organizado en vistas o secciones. Esto permite a los usuarios navegar sin tener la necesidad de salir de la página.

Buenas prácticas

  • Utilizar etiquetas claras y concisas.
  • Usar un diseño consistente.
  • Limitar el número de tabs.
  • Organizar las tabs de forma lógica.
  • Hacer que las tabs sean fáciles de interactuar.
  • Utilizar las pestañas sólo cuando los usuarios no necesiten ver el contenido de varias pestañas simultáneamente.
  • Resaltar la pestaña seleccionada y activa.
  • Hacer visibles las pestañas no activas.
  • Utilizar sólo una fila de Tabs

En el sistema de diseño de la Finis, hacemos uso de los siguientes tipos de tabs:


        


<div class="uft-tabpanel" data-tabpanel>


    <!-- < md : Select -->


    <div


        class="uft-tabs d-flex d-lg-none mb-32">


        <label for="tabSelect"><strong>Seleccione tab</strong></label>


        <select


            name="tabSelect"


            id="tabSelect"


            data-tabselect>


            <option value="tab-01">Tab 1</option>


            <option value="tab-02">Tab 2</option>


            <option value="tab-03">Tab 3</option>


            <option value="tab-04">Tab 4</option>


        </select>


    </div>


    <!-- > md : Select -->


    <ul class="uft-tabs d-none d-lg-flex">


        <li class="uft-tab">


            <a


                href="javascript:void(0);"


                class="uft-tab-link"


                data-tabtarget="tab-01"


                data-tabactive>Tab 1</a>


        </li>


        <li class="uft-tab">


            <a


                href="javascript:void(0);"


                class="uft-tab-link"


                data-tabtarget="tab-02">Tab 2</a>


        </li>


        <li class="uft-tab">


            <a


                href="javascript:void(0);"


                class="uft-tab-link"


                data-tabtarget="tab-03">Tab 3</a>


        </li>


        <li class="uft-tab">


            <a


                href="javascript:void(0);"


                class="uft-tab-link"


                data-tabtarget="tab-04">Tab 4</a>


        </li>


    </ul>


    <div class="uft-tab-body">


        <div data-tab="tab-01">


            <p>


                1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi


                aspernatur beatae consequatur cum dolorum eveniet in inventore, iusto


                magnam necessitatibus officia officiis provident, sint velit, vitae. In


                iste laboriosam vero.


            </p>


        </div>


        <div data-tab="tab-02">


            <p>


                2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur


                exercitationem harum id!


            </p>


        </div>


        <div data-tab="tab-03">


            <p>


                3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. A assumenda


                autem blanditiis debitis dicta est et eum, excepturi ipsam iusto


                maiores, minima minus natus nulla numquam odit optio praesentium quas


                qui quis, quo recusandae rem repellat repellendus rerum? Earum,


                repudiandae!


            </p>


        </div>


        <div data-tab="tab-04">


            <p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est.</p>


        </div>


    </div>


</div>