How to make a selection like on the example?

There are three elements when you press on one of them it stands out, it's understandable. But when the transition from 1 element to 3rd, the selection still flies over the second element(a LINK TO GODSEND https://codesandbox.io/s/cvn6w). How it is implemented? Check occurs whether the element is pressed next, or through another? And then add on a certain class time, and then to remove? Please tell me
April 7th 20 at 15:27
1 answer
April 7th 20 at 15:29
Solution
Not looking like that's what MaterialUI, but how to do it:
New item indicator is not within a specific tab, and inside the root for all tabs of the item.
State determines which tab is active in the same component when the active tab changes, then the Ref on it (or rather the DOM element that he rederic) is passed to the indicator and receives the required offset and width through the measurement of the DOM element.

There is an important caveat - don't forget to change the indicator parameters when resize (caused for example by changing the width of the browser window) of the active tab
thank you - allen_Bins commented on April 7th 20 at 15:32
about changing the resolution,and if you do separate the hook and wrap it to use the callback,to pass the Ref,and it turns out when changing the width will change everything - allen_Bins commented on April 7th 20 at 15:35
@Aisha.Paucek, in a basic sense, the hook with this (if I understood correctly Your idea). As if the width of the tabs is set is not static (as, for example, the percentage of the container/window), these data are not reactive. And Ref is also not updated as the DOM element remains the same.
I see several ways to deal with this (they are not mutually exclusive):

Did so to make the hook or method for a component, which will ciggerets and measure the width of the active tab and then transmitted to the indicator. And triggering a way
1) hang effect the listener on resize of the window (pros: cheap, cons: in addition to resizing of the window there is still a resize of the container, the width of the text in the tab and many more, so unreliable)
2) check the width of the active tab in the interval (pros: versatility cons: expensive or will be delayed)
3) hang on ResizeObserver (my personal favorite, but it's better to have had polyfil, if support for older browsers in the plans. The combination of reliability and reasonable price) - Maiya_Kris93 commented on April 7th 20 at 15:38
@Maddison, thank you very much - allen_Bins commented on April 7th 20 at 15:41

Find more questions by tags CSSJavaScript