Tabs

import { Tabs, Tab } from '@megafon/ui-core';

Примеры и код
Свойства и методы

Особенности использования на мобильных разрешениях

На разрешении меньше 1024 у списка табов при переполнении появляются "уши", для корректного отображения которых необходимо предоставить табам возможность растянуться на всю страницу.

По умолчанию табы растягиваются за счет отрицательных отступов на величину гайдовых боковых отступов у контента страницы (16px на 320-767 и 48px на 768-1023), которые затем компенсируются с помощью padding для выравнивания основных видимых табов по ширине контента.

Если на странице используются не гайдовые отступы для контента, то необходимо переопределить дефолтные оступы табов с помощью дополнительного класса, переданного в свойство innerIndentsClass

.custom-indents-class {
    padding-left: 22px;
    padding-right: 22px;
    margin-left: -22px;
    margin-right: -22px;
}

Код DemoContentconst DemoContent = ({ children }) => (
    <div
        style={{
            padding: '0 0 20px 0',
        }}
    >
        <div
            style={{
                padding: '80px 0',
                background: 'rgba(0, 0, 0, 0.05)',
                fontSize: '20px',
                textAlign: 'center',
            }}
        >
            {children}
        </div>
    </div>
);

Код OuterObserveContainerexport const OuterObserveContainer = ({ height = '200px', children }) => {
    const rootRef = React.useRef<HTMLDivElement>(null);
    const [observeContainer, setObserveContainer] = React.useState<HTMLDivElement | null>(null);

    React.useEffect(() => {
        setObserveContainer(rootRef.current);
    }, []);

    return (
        <div ref={rootRef}>
            <Tabs sticky outerObserveContainer={observeContainer}>
                {children}
            </Tabs>
            <div style={{ width: '100%', height, background: '#F6F6F6' }} />
        </div>
    );
};

Код OuterControlContentContainerexport const OuterControlContentContainer = ({ height = '200px', children }) => {
    const [currentIndex, setCurrentIndex] = React.useState<number>(1);

    const handleTabClick = (index: number): void => {
        setCurrentIndex(index + 1);
    };

    return (
        <div>
            <Tabs onTabClick={handleTabClick}>{children}</Tabs>
            <div
                style={{
                    width: '100%',
                    background: '#F6F6F6',
                    textAlign: 'center',
                    padding: '50px',
                    fontSize: '32px',
                }}
            >
                {currentIndex}
            </div>
        </div>
    );
};

Код increaseSizeComponentexport const increaseSizeComponent = () => {
    const tabs = document.querySelector('.oversize-height') as HTMLDivElement;
    const actualHeight = tabs?.style.height;
    const oversizeHeight = '1500px';

    if (actualHeight === oversizeHeight) {
        tabs.style.height = 'auto';
        tabs.style.border = 'unset';
        tabs.style.marginBottom = '0';
    } else {
        tabs.style.height = oversizeHeight;
        tabs.style.border = '1px solid gray';
        tabs.style.marginBottom = '20px';
    }

    window.dispatchEvent(new Event('resize'));
}

Горизонтальное выравнивание табов

Табы растягиваются на всю ширину контейнера (по умолчанию)

<ContentArea>
      <Tabs>
          <Tab title="Таб 1">
              <DemoContent>Контент 1</DemoContent>
          </Tab>
          <Tab title="Таб 2">
              <DemoContent>Контент 2</DemoContent>
          </Tab>
          <Tab title="Таб 3">
              <DemoContent>Контент 3</DemoContent>
          </Tab>
          <Tab title="Таб 4">
              <DemoContent>Контент 4</DemoContent>
          </Tab>
      </Tabs>
  </ContentArea>

Табы ужимаются под размер содержимого (выравнивание слева по умолчанию)

<ContentArea>
      <Tabs autoWidth>
          <Tab title="Таб 1">
              <DemoContent>Контент 1</DemoContent>
          </Tab>
          <Tab title="Таб 2">
              <DemoContent>Контент 2</DemoContent>
          </Tab>
          <Tab title="Таб 3">
              <DemoContent>Контент 3</DemoContent>
          </Tab>
          <Tab title="Таб 4">
              <DemoContent>Контент 4</DemoContent>
          </Tab>
      </Tabs>
  </ContentArea>

Табы ужимаются под размер содержимого, выравнивание по центру

<ContentArea>
      <Tabs align="center" autoWidth>
          <Tab title="Таб 1">
              <DemoContent>Контент 1</DemoContent>
          </Tab>
          <Tab title="Таб 2">
              <DemoContent>Контент 2</DemoContent>
          </Tab>
          <Tab title="Таб 3">
              <DemoContent>Контент 3</DemoContent>
          </Tab>
      </Tabs>
  </ContentArea>

Размер табов

Средний

<ContentArea>
      <Tabs size="medium">
          <Tab title="Таб 1">
              <DemoContent>Контент 1</DemoContent>
          </Tab>
          <Tab title="Таб 2">
              <DemoContent>Контент 2</DemoContent>
          </Tab>
          <Tab title="Таб 3" icon={<Balance />}>
              <DemoContent>Контент 3</DemoContent>
          </Tab>
      </Tabs>
  </ContentArea>

Большой

<ContentArea>
      <Tabs size="large">
          <Tab title="Таб 1">
              <DemoContent>Контент 1</DemoContent>
          </Tab>
          <Tab title="Таб 2">
              <DemoContent>Контент 2</DemoContent>
          </Tab>
          <Tab title="Таб 3" icon={<Balance />}>
              <DemoContent>Контент 3</DemoContent>
          </Tab>
      </Tabs>
  </ContentArea>

Цветовая тема табов для использования на зеленом фоне

<ContentArea outerBackgroundColor="green">
      <Tabs size="large" tabColorTheme="green">
          <Tab title="Таб 1">
              <DemoContent>Контент 1</DemoContent>
          </Tab>
          <Tab title="Таб 2">
              <DemoContent>Контент 2</DemoContent>
          </Tab>
          <Tab title="Таб 3" icon={<Balance />}>
              <DemoContent>Контент 3</DemoContent>
          </Tab>
      </Tabs>
  </ContentArea>

Цветовая тема табов для использования на сером фоне

<ContentArea outerBackgroundColor="spbSky0">
      <Tabs size="large" tabColorTheme="gray">
          <Tab title="Таб 1">
              <DemoContent>Контент 1</DemoContent>
          </Tab>
          <Tab title="Таб 2">
              <DemoContent>Контент 2</DemoContent>
          </Tab>
          <Tab title="Таб 3" icon={<Balance />}>
              <DemoContent>Контент 3</DemoContent>
          </Tab>
      </Tabs>
  </ContentArea>

Фиксация табов у верхней границы окна

Использование по умолчанию

<ContentArea>
      <Tabs sticky>
          <Tab title="Таб 1">
              <DemoContent>Контент 1</DemoContent>
          </Tab>
          <Tab title="Таб 2">
              <DemoContent>Контент 2</DemoContent>
          </Tab>
          <Tab title="Таб 3">
              <DemoContent>Контент 3</DemoContent>
          </Tab>
          <Tab title="Таб 4">
              <DemoContent>Контент 4</DemoContent>
          </Tab>
      </Tabs>
  </ContentArea>

При ресайзе экрана, вследствии которого высота компонента стала больше высоты viewport`а

<ContentArea>
      <Tabs sticky className="oversize-height">
          <Tab title="Таб 1">
              <DemoContent>Контент 1</DemoContent>
          </Tab>
          <Tab title="Таб 2">
              <DemoContent>Контент 2</DemoContent>
          </Tab>
          <Tab title="Таб 3">
              <DemoContent>Контент 3</DemoContent>
          </Tab>
          <Tab title="Таб 4">
              <DemoContent>Контент 4</DemoContent>
          </Tab>
      </Tabs>
      <Button onClick={increaseSizeComponent}>Эмуляция увеличения размера компонента</Button>
  </ContentArea>

При передаче контейнера для отслеживания режима фиксации извне

<ContentArea>
      <OuterObserveContainer>
          <Tab title="Таб 1" />
          <Tab title="Таб 2" />
          <Tab title="Таб 3" />
          <Tab title="Таб 4" />
      </OuterObserveContainer>
  </ContentArea>

При передаче контейнера для отслеживания режима фиксации извне, при высоте контейнера больше высоты viewport`а

<ContentArea>
      <OuterObserveContainer height={'1500px'}>
          <Tab title="Таб 1" />
          <Tab title="Таб 2" />
          <Tab title="Таб 3" />
          <Tab title="Таб 4" />
      </OuterObserveContainer>
  </ContentArea>

Переполнение табов

<ContentArea>
      <Tabs>
          <Tab title="Таб с большим количеством текста 1">
              <DemoContent>Контент 1</DemoContent>
          </Tab>
          <Tab title="Таб с большим количеством текста 2">
              <DemoContent>Контент 2</DemoContent>
          </Tab>
          <Tab title="Таб с большим количеством текста 3">
              <DemoContent>Контент 3</DemoContent>
          </Tab>
          <Tab title="Таб с большим количеством текста 4">
              <DemoContent>Контент 4</DemoContent>
          </Tab>
          <Tab title="Таб с большим количеством текста 6">
              <DemoContent>Контент 6</DemoContent>
          </Tab>
      </Tabs>
  </ContentArea>

Таб с иконкой и компонентом-оберткой

<ContentArea>
      <Tabs>
          <Tab
              title="Таб 1"
              icon={<Balance />}
              renderTabWrapper={tab => <div className="demo-wrapper">{tab}</div>}
          >
              <DemoContent>Контент 1</DemoContent>
          </Tab>
          <Tab title="Таб 2">
              <DemoContent>Контент 2</DemoContent>
          </Tab>
      </Tabs>
  </ContentArea>

Рендер содержимого только для текущего таба

<ContentArea>
      <Tabs renderOnlyCurrentPanel>
          <Tab title="Таб 1">
              <DemoContent>Контент 1 (размонтируется при переключении на другой таб)</DemoContent>
          </Tab>
          <Tab title="Таб 2">
              <DemoContent>Контент 2 (размонтируется при переключении на другой таб)</DemoContent>
          </Tab>
          <Tab title="Таб 3">
              <DemoContent>Контент 3 (размонтируется при переключении на другой таб)</DemoContent>
          </Tab>
      </Tabs>
  </ContentArea>

Переключение внешнего контента

<ContentArea>
      <OuterControlContentContainer>
          <Tab title="Таб 1" />
          <Tab title="Таб 2" />
          <Tab title="Таб 3" />
          <Tab title="Таб 4" />
      </OuterControlContentContainer>
  </ContentArea>

Размер табов

Средний

<ContentArea>
      <Tabs size="medium">
          <Tab title="Таб 1" hasBubble>
              <DemoContent>Контент 1</DemoContent>
          </Tab>
          <Tab title="Таб 2" hasBubble bubbleColor={'red'}>
              <DemoContent>Контент 2</DemoContent>
          </Tab>
          <Tab title="Таб 3" hasBubble bubbleTitle={2}>
              <DemoContent>Контент 3</DemoContent>
          </Tab>
          <Tab title="Таб 4" icon={<Balance />} hasBubble>
              <DemoContent>Контент 4</DemoContent>
          </Tab>
      </Tabs>
  </ContentArea>

Большой

<ContentArea>
      <Tabs size="large">
          <Tab title="Таб 1" hasBubble>
              <DemoContent>Контент 1</DemoContent>
          </Tab>
          <Tab title="Таб 2" hasBubble bubbleColor={'red'}>
              <DemoContent>Контент 2</DemoContent>
          </Tab>
          <Tab title="Таб 3" hasBubble bubbleTitle={2}>
              <DemoContent>Контент 3</DemoContent>
          </Tab>
          <Tab title="Таб 4" icon={<Balance />} hasBubble>
              <DemoContent>Контент 4</DemoContent>
          </Tab>
      </Tabs>
  </ContentArea>