Как сделать выделение элемента как на примере?

Question

[Vann Damm]

Есть три элемента когда нажимаешь на один из их он выделяется, это понятно. Но вот когда делается переход от 1 элемента к 3 -ему, выделение еще пролетает над вторым элементом(ССЫЛКА НА КОДСЭНД https://codesandbox.io/s/cvn6w). Как это реализовано? Проверка происходит является ли нажатый элемент следующим, или через еще один? И тогда добавлять на определенное время класс, и потом удалять? Подскажите пожалуйста

Comments

[Александр Епихин]

Откройте devtools, найдите там выделение - https://yadi.sk/i/oeT_VLGQZ6S42A и поклацайте по элементам меню

[yurii_oliiarnyk]

Подчеркивание, это отдельный див-елемент, который попросту меняет позицию при смене активного елемента меню
Соответственно, что бы сменить позицию с 1го к 3му елементу, нужно пройти через 2ой
Все намного проще)

[Vann Damm]

yurii_oliiarnyk, т.е нужно узнать позицию нажатого элемента. И соответсвенно перемещать

[Vann Damm]

yurii_oliiarnyk, спасибо за ответ

[Vann Damm]

Александр Епихин, спасибо

Answer 1

[Eshil]

Не смотрел как именно это делают MaterialUI, но как это можно сделать:
Создавать элемент индикатора не внутри конкретного таба, а внутри корневого для всех табов элемента.
Стейт определяющий какой таб активен будет в этом же компоненте и когда активный таб меняется, то реф на него (точнее на DOM-элемент который он редерит) передается индикатору, который и получает необходимое смещение и ширину через измерение DOM-элемента.

Тут есть важный подводный камень - не забыть изменить параметры индикатора при ресайзе (вызванном, например, изменением ширины окна браузера) активного таба

Comments

[Vann Damm]

благодарю

[Vann Damm]

по поводу изменения разрешения,а если сделать отдельно хук и обернуть его в use callback,в него передавать реф,и получается при изменении ширины будет всё меняться

[Eshil]

effect_tw, в базовом смысле хук с этим не поможет (если я правильно понял Вашу идею). Так как если ширина табов задается не статично (а, например, процентом от контейнера/окна), то эти данные не реактивны. И реф тоже не обновится, так как DOM-элемент остался тем же.
Вижу несколько способов с этим разобраться (они не взаимоисключающие):

Таки да сделать хук или метод у компонента, который будет тиггериться и измерять ширину активного таба и далее передаваться индикатору. А триггерить его одним из способов
1) вешать эффектом слушатель на ресайз окна (плюсы: дешево, минусы: кроме ресайза окна есть еще ресайз контейнера, ширина текста в табе и многое другое, поэтому ненадежно)
2) проверять ширину активного таба по интервалу (плюсы: универсальность, минусы: дорого, либо будет запаздывать)
3) повесить на ResizeObserver (мой личный фаворит, но лучше завести полифил, если поддержка старых браузеров в планах. Комбинация надежности и умеренной цены)

[Vann Damm]

Eshil, спасибо большое