получить элемент активной вкладки для отображения границы - PullRequest
Новая
       7

получить элемент активной вкладки для отображения границы

1 голос
/ 06 мая 2019

Я использую реагирующие зацепки для компонентов вкладки.Мне нужно показать границу под активным элементом вкладки.Это работает только после нажатия на вкладку.Это не работает изначально.Я использую ref для получения элемента активной вкладки, но он не работает.Вот как я это сделал 

<code>const Tabs = ({ activeTab, children }) => {
  const [tabElements, setTabElements] = useState({});
  const tabsElements = useRef({});
  useEffect(() => {
    console.log("ref", tabsElements);
    setTabElements(prevState => ({
      ...prevState,
      ...tabsElements
    }));
  }, []);
  return (
    <TabsContext.TabProvider activeTab={activeTab}>
      <TabsContext.TabConsumer>
        {value => (
          <ReactTabs>
            <TabsContainer>
              <ListTabs>
                {value.context.tabs.map(tab => (
                  <TabTitleItem
                    key={tab.id}
                    onClick={value.context.onClick(tab)}
                    id={tab.id}
                    ref={tabElement => {
                      tabsElements.current[tab.id] = tabElement;
                    }}
                    isActiveTab={value.context.activeTab.id === tab.id}
                  >
                    <TabAnchorItem>{tab.title}</TabAnchorItem>
                  </TabTitleItem>
                ))}
              </ListTabs>
              <pre>{JSON.stringify(tabElements, null, 2)}
{дети} )});};

здесь есть коды и поля:

https://codesandbox.io/s/0qnvyllqpp

Как показать линию границы чуть ниже активного элемента вкладки?

1 Ответ

1 голос
/ 06 мая 2019

Для решения вышеизложенного необходимо немного изменить свою стратегию.Вместо того, чтобы иметь компонент ActiveTabBorder, который принимает ref и отображает результат на основе позиции элементов, мы добавляем стиль для границы внутри самого TabTitleItem с псевдоэлементом :after и стилизуем его немного по-другому, используя display: flex

Ваши стилизованные компоненты будут выглядеть следующим образом 

export const ListTabs = styled.ul`
  padding-left: 0;
  list-style: none;
  margin: 0;
  display: flex;
  justify-content: center;
`;

export const TabTitleItem = styled.li`
  position: relative;
  transition: all 800ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  padding: 16px 30px;
  cursor: pointer;
  opacity: 0.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  ${props =>
    props.isActiveTab &&
    `
        transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        cursor: default;
        opacity: 1;

       &:after {
        content: '';
        height: 5px;
        background-color: blue;
        position: absolute;
        bottom: 0;
        transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
        width: 100%;
       }

    `}
`;

Рабочая демонстрация

...