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>

Prop name	Type	Default	Description
className	string		Дополнительный класс для корневого элемента
classes	{ root?: string; wrapper?: string; swiperWrapper?: string; innerIndents?: string; tab?: string; activeTab?: string; panel?: string; }	{}	Дополнительные классы для корневого и внутренних элементов
dataAttrs	{ root?: Record<string, string>; slider?: Record<string, string>; panel?: Record<string, string>; prev?: Record<string, string>; next?: Record<string, string>; wrapper?: Record<...>; swiperWrapper?: Record<...>; }		Дополнительные data атрибуты к внутренним элементам
size	TabSizeType	medium	Размер табов
tabColorTheme	TabColorThemeType	white	Цветовая тема табов для определенных фонов
autoWidth	boolean	false	Ширина табов по размеру содержимого
align	TabAlignType	left	Горизонтальное выравнивание (только для autoWidth = true)
sticky	boolean	false	Фиксация табов у верхней границы окна
currentIndex	number		Индекс активного таба (включает режим управления табами снаружи)
defaultIndex	number	0	Индекс активного таба по умолчанию (не работает в режиме управления табами снаружи)
renderOnlyCurrentPanel	boolean	false	Рендер содержимого только для текущего таба
outerObserveContainer	HTMLDivElement		Внешний контейнер для режима фиксация табов
onTabClick	(index: number) => void		Обработчика клика по табам

Таб

Prop name	Type	Description
title	string	Заголовок таба
icon	ReactNode	Иконка таба
bubbleTitle	string \| number	Текст бабла
hasBubble	boolean	Наличие бабла нотификации
bubbleColor	"green" \| "red"	Цвет бабла
href	string	Ссылка
rel	string	Rel - атрибут тега <a>
dataAttrs	{ root?: Record<string, string>; inner?: Record<string, string>; }	Дополнительные data атрибуты к внутренним элементам
children	ReactNode	Дочерние элементы
renderTabWrapper	(tab: ReactNode) => ReactNode	Функция рендера компонента-обертки для заголовка и иконки