[MÚSICA] [MÚSICA] [MÚSICA] Hola. Estamos en un nuevo tutorial, en esta ocasión vamos a trabajar con los tabs y vamos a usar diferentes estilos para manejar lo que es las pestañas, como se dice en español, tabs en inglés, y vas a encontrar realmente en toda la documentación el término tab. Este componente es práctico, se suele utilizar para, en una misma vista, agrupar diferentes secciones de contenido o diferentes caracterÃsticas y con las pestañas ir moviéndose para ver una u otra caracterÃstica de una sola vez, es decir, no se va a ver todo junto. De alguna manera, la tendencia actual, en lo que es el diseño, es mostrar todo en la misma pantalla para que la persona no haga clics y se pueda mover con facilidad viendo toda la información. Pero, en algunas ocasiones, los tabs funcionan y por eso los vamos a ver. Luego vos vas a ver donde te conviene más utilizarlo. Bien. Lo que vamos a hacer es, acá estoy en la sección de precios, acá podemos ver cómo tenemos actualmente la vista. Y yo lo que you hice es, lo que voy a hacer es reemplazar toda esta parte de las tablas y la parte de las tarjetas con la sección de pestañas. Lo hago directamente para ahorrar tiempo. Y vamos a repasar un poquito el código para entenderlo. Y luego vamos a modificar un poquito estos estilos. Primero veamos cuál es el resultado de aplicar las pestañas. Fijate que puse tres pestañas, comparar, la parte de tarjetas y comentarios, que no tenemos ninguna reseña todavÃa pero la dejamos ahÃ. Entonces, la idea de esta parte es que uno pueda ver la comparación de precios por, como you vimos antes, lugar y calidad, las tarjetas y los comentarios. Bien. Entonces, ¿cómo lo construimos? Bueno, lo construimos como una lista, donde tenemos que aplicar dos clases, nav y nav-tabs. Le ponemos un id y el rol, y luego, dentro del listado, en lo que serÃa esta primer parte, que serÃa la definición del encabezado de las pestañas que vamos a tener, vamos a definirlo como Ãtems de una lista, con los componentes li. Le tenemos que definir la clase nav item y luego con un componente de referencia, de link. Tenemos que definir dos clases, nav-link y activo para el componente que está activo. Después le vamos a definir algún id. Generalmente, la convención, en estos casos, si bien no es que sea una regla, sino lo que se suele usar es poner le nombre de id-tab, el sufijo -tab como para referenciar que esto va a ser la pestaña. Y luego acá introducimos este primer concepto, que es los data attributes que vimos en la teorÃa, que, en este caso, bueno, va a ser data-toggle igual, y en este caso vamos a definirle que ocupe el rol de tab. Con esto you solo Bootstrap, por estos data attributes, incorpora lo que es la parte de JavaScript de la funcionalidad de las pestañas. Y con eso lo que hace es vincular estas pestañas con el panel o el contenido. Entonces, continuando un poco, luego lo que vamos a ver es, como parte importante, esto es más estándar, como parte importante es el href, que tiene que vincular con el id del panel que vamos a mostrar. Entonces, para repasar, podemos pensar el componente de pestañas como en dos partes, una parte donde se definen lo que serÃan las solapas, las pestañas, los tabs y, por otro lado, donde se definen los contenedores o los paneles que van a mostrar el contenido asociado a cada una de las pestañas. Esa parte de los contenedores la definimos con un div, al cual le tenemos que aplicar la clase tab-content, tab-content, y dentro pondremos los div, un div por cada uno de los paneles que van a estar asociados con las pestañas. Fijate acá, por ejemplo, el que contiene la tabla de comparativas. Tenemos el tab-content como contenedor global y dentro tenemos el div con la clase tab-pane para decir que esto va a ser un panel, fade y show, clases que definen, y ahora vas a ver, una pequeña animación que la incorporé para mostrártela. Es opcional, por supuesto, puedes mostrarla o no. Y luego la clase activo, active, para indicar que vamos a comenzar con este panel como activo. Si no lo definÃs, no se va a mostrar nada, va a quedar desprolijo. Esto tiene que ser consistente con el tab-active que vas a definir. Id compara, fijate que corresponde el id que definimos en el panel con el href de la pestaña. Bueno, el rol de tabpanel y el labelledby. Y dentro you, directamente, es la misma tabla tal cual la tenÃamos antes. Lo que hice fue copiar y pegarla aquÃ, en este contenedor, y con esto you lo tenemos definido. Fijate cómo quedaron las siguientes, tarjetas, el mismo componente de tarjetas y, por último, comentarios. Te vuelvo a remarcar lo mismo. Id comentarios, id tarjetas, y cuando vamos a las pestañas, el href tiene tarjetas y comentarios. Entonces es importante que lo tengas presente porque si no está bien el comentario, acá, el href no apunta, no referencia al mismo id que el panel, no lo vas a mostrar, no se va a mostrar. Entonces, cuando cliquees sobre la pestaña, no va a pasar nada. O sea, por ahà se te pone como activa la pestaña, si está bien definida, pero en el panel contenedor no lo puede asociar. ¿Está bien? Esto es por cómo funciona por detrás el componente de Bootstrap. Por un lado, los data attributes vinculan el comportamiento de los tabs, las pestañas, con el componente que acabamos de definir a través del toggle-tab. Y, por otro lado, esta convención de, con los href que indican el id, al momento de cliquearlo y ponerse como activo, busca lo que se referencia en la pestaña con el href, en este caso, por ejemplo, estamos viendo acá comentarios, con el contenedor de igual id, que se llama igual, entonces el id tiene que ser comentarios, el del contenedor. Si no, no va a funcionar. Entonces, de esta manera tenemos definido y podemos ver cómo nos podemos mover entre cada una de las pestañas y hace ese efecto, es muy rápido, se puede ajustar, que desaparece y aparece, ¿ves? No es que como que está estático, hace un fade y un show. Bien. Otra forma de mostrar este contenido, que lo hacemos con pestañas, que Bootstrap nos permite, es otra forma de hacerlo, aplicarle los estilos, es con lo que llaman los pills, el formato de pÃldora. Como botón, que se ve como botón. Que lo único que tenemos que hacer es, en vez de usar el nav-tab, usamos el nav-pills. ¿Y luego qué hacemos? El data-toggle tenemos que decirle que es un pill. Data-toggle, pill. Data-toggle, pill. Fijate cómo queda. El resto de comportamiento queda igual, simplemente lo que cambiamos es decirle que el estilo que aplique a este panel o esta forma de navegar el contenido, de hecho, dentro de la documentación lo vas a ver, dentro de la sección de navs, y luego le decimos a cada una de las pestañas que van a ser con pills. Comportamiento después es similar. El href tiene que referenciar lo mismo, el resto no cambia absolutamente nada. Bien. Por último, fijate una pequeña cosa. Que por ahà queda muy pegado. Vamos a ajustar un poquito estos estilos. Como siempre, esto es algo que me sirve a mÃ. Yo, generalmente, lo primero que hago para aplicar estilos es utilizar el panel de desarrollador del browser y ajustar los estilos directamente desde aquà para ir viendo cómo va quedando, y luego recién lo aplico en el archivo CCS. Pero de esta forma lo puedo ajustar y you veo visualmente cómo va quedando. Entonces, vamos a ver cómo queda con un padding-top. Bien. Acá tenemos una separación un poco más prolija. SÃ, pienso que queda mejor. Asà que esto mismo vamos a proceder a aplicarlo al tab-content. Bien. Entonces, ponemos tab-content. Padding-top, diez pÃxeles. Bien. you lo tenemos aquà definido. Vas a poder ver que hay varias formas más de utilizar pestañas, algunas lo ponen de forma, en vez de tener esta forma horizontal, uno puede armar como una pila de pestañas de forma vertical. Es otra forma de mostrar el contenido. Lo importante es que aprendas a utilizar este componente y luego lo vayas ajustando a las necesidades y a lo que vos quieras mostrar. Lo importante que tenés que tener en cuenta es, como siempre, el criterio principal es el uso que le vas a dar a esto y la funcionalidades que va a aprovechar el usuario y la experiencia que va a tener al utilizar este componente. Tendrás que evaluar si conviene utilizar un formato de pestañas o mostrar todo el contenido uno abajo del otro, qué queda más limpio, qué queda más prolijo. Quizás si te sirve, a veces, cuando uno utiliza pestañas cuando tiene información que quizás sea de igual jerarquÃa, es decir, es tan importante ver la comparación como tarjetas como comentarios, supongamos que ese sea el caso. Y uno quizás las podrÃa agrupar con pestañas. Por supuesto que esto es opinable y cada uno lo va a ver, qué es lo que convenga. O quizás toda esta información, si bien puede ser que uno la quiera utilizar como de igual importancia pero que sea algo adicional a otra información que uno está mostrando o a otros datos. Entonces uno pone pestañas para que se pueda explorar las diferentes aristas o caracterÃsticas del producto o lo que a uno le parezca. Seguramente conozcas un montón de sitios web que utilizan pestañas. Es bueno que trates de comprender cuál es el criterio, piensa en las razones, y eso seguramente te va a dar ideas o inspiraciones para tus proyectos. Vamos a commitear. Y cerramos esta sesión. Usando pestañas en la sección de precios. Ups. Ahà estamos. [MÚSICA] [MÚSICA]
