TabsBox

Компонент TabsBox является оберткой над компонентом Tabs из раздела Компоненты и имеет идентичные свойства и методы

import { TabsBox, TabBox } from '@megafon/ui-shared';

Демо данныеexport 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>
);

Базовое использование

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