Creé un componente de pestaña, la única parte que no puedo lograr es que, en lugar de TabIndicator para tomar completamente la longitud del contenedor de pestañas, necesito establecer solo el ancho del texto.
Dado que cada texto tiene un ancho diferente, estoy usando js para calcularlo, pero en lugar de obtener el ancho, puedo obtener el ancho del contenedor.
¿Cómo puedo hacer que la línea TabIndicator activa solo se expanda desde el principio del texto hasta el final del texto?
Soy capaz de lograr el ancho del contenedor. Agregar el enlace de sandbox para el mismo.
Es simple. Debe restar rellenos adicionales mientras calcula el inicio y el ancho del indicador.
.tab tiene un relleno de 6px horizontalmente
.tab-default-container tiene un relleno de 1 rem en el escritorio, es 16px
. Así que cambia el código algo como:
if (tabMeta && tabsMeta) { startValue = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft + 22; //16+6=22 } //22 from both sides = 44px tor remove. const newIndicatorStyle = { left: startValue, width: tabMeta ? tabMeta.width - 44 : 0 }; Caja de arena actualizada.
Nota: ha utilizado la unidad relativa rem , puede evaluarse diferente en diferentes configuraciones y dispositivos, puede que no sea 1rem = 16px.
El rem (para “root em”) es el tamaño de fuente del elemento raíz del documento.
Así que haz los cálculos teniendo en cuenta esto.