Estoy tratando de implementar un componente de pestañas simples en una aplicación de una sola página. La pestaña seleccionada debería (obviamente) mostrar su contenido, mientras que las pestañas no seleccionadas mantienen su contenido disponible pero oculto. ¿Cómo debo ocultar el contenido en las pestañas no seleccionadas?
Cada una de las técnicas canónicas para ocultar contenido tiene problemas:
| técnica | retirarse |
|---|---|
opacity: 0 | El usuario aún puede potencialmente interactuar con contenido invisible. Se rompe si un subelemento del elemento de pestaña establece la propiedad de opacity . |
color: transparent, background: transparent | Los mismos problemas que el anterior. |
display: none | El componente en las pestañas no seleccionadas se carga en un div sin dimensiones, lo que, según mi experiencia, provoca problemas de representación cuando ese contenido se muestra más tarde. (Varias bibliotecas de React que estoy usando no calculan correctamente las dimensiones internas de las columnas o lo que sea cuando se representan inicialmente en una display: none div y luego se muestran). |
visibility: hidden | Todavía ocupa espacio en la página. Se rompe si algún subelemento del elemento de pestaña establece la propiedad de visibility . |
En resumen: quiero saber cómo representar el contenido como si realmente se estuviera cargando en la página (es decir, con las dimensiones adecuadas), pero de forma completamente invisible, sin espacio reservado para él en la página y sin posibilidad de interacción con el usuario. Idealmente, la solución debería ser independiente de las propiedades CSS que se establezcan en el componente arbitrario dentro de la propia pestaña; es decir, el CSS dentro del contenido de la pestaña no debería poder romper la visualización de las pestañas. ¿Hay alguna combinación recomendada de propiedades CSS ( visibility , opacity , display , position , z-index , etc.) que haga lo que quiero aquí?