Введение
AccordionBadgesBannerButtonCalendarCaptionCarouselCheckboxContentAreaCounterGridHeaderLinkListNotificationPaginationParagraphPreloaderRadioButtonSearchSelectSwitcherTabsTextFieldTextLinkTileTooltip
AccordionBoxAudioPlayerBannerBoxBenefitsIconsBenefitsPicturesBreadcrumbsButtonBannerButtonLinkBoxCardCardsBoxCarouselBoxContainerDownloadLinksFaqWrapperInstructionsPageTitlePartnersPictureWithDescriptionPropertyStepsStoreBannerTableTabsBoxTextBoxTextWithIconTitleDescriptionBoxVideoBannerVideoBlock
ИконкиЦвета

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;
}
Код DemoContent
const 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>
);
Код OuterObserveContainer
export 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>
    );
};
Код OuterControlContentContainer
export 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>
    );
};
Код increaseSizeComponent
export 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'));
}

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

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

Таб 1
Таб 2
Таб 3
Таб 4
Контент 1
Контент 2
Контент 3
Контент 4

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

Таб 1
Таб 2
Таб 3
Таб 4
Контент 1
Контент 2
Контент 3
Контент 4

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

Таб 1
Таб 2
Таб 3
Контент 1
Контент 2
Контент 3

Размер табов

Средний

Таб 1
Таб 2
Таб 3
Контент 1
Контент 2
Контент 3

Большой

Таб 1
Таб 2
Таб 3
Контент 1
Контент 2
Контент 3

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

Таб 1
Таб 2
Таб 3
Контент 1
Контент 2
Контент 3

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

Таб 1
Таб 2
Таб 3
Контент 1
Контент 2
Контент 3

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

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

Таб 1
Таб 2
Таб 3
Таб 4
Контент 1
Контент 2
Контент 3
Контент 4

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

Таб 1
Таб 2
Таб 3
Таб 4
Контент 1
Контент 2
Контент 3
Контент 4

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

Таб 1
Таб 2
Таб 3
Таб 4

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

Таб 1
Таб 2
Таб 3
Таб 4

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

Таб с большим количеством текста 1
Таб с большим количеством текста 2
Таб с большим количеством текста 3
Таб с большим количеством текста 4
Таб с большим количеством текста 6
Контент 1
Контент 2
Контент 3
Контент 4
Контент 6

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

Таб 1
Таб 2
Контент 1
Контент 2

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

Таб 1
Таб 2
Таб 3
Контент 1 (размонтируется при переключении на другой таб)

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

Таб 1
Таб 2
Таб 3
Таб 4
1