ScrollTabsLayout

<ScrollTabsLayout>
  <ScrollTabsLayout.Header>
    <Paper
      height={200}
      p={20}
      backgroundColor="primaryContainer"
    >
      <Title level={4}>Header</Title>
    </Paper>
  </ScrollTabsLayout.Header>

  <ScrollTabsLayout.Item tabId="first" title="First Tab">
    <HStack height={500}>
      <Paper backgroundColor="error" width="100%" p={20}>
        <Title level={4}>First Page</Title>
      </Paper>
    </HStack>
  </ScrollTabsLayout.Item>
  <ScrollTabsLayout.Item tabId="second" title="Second Tab">
    <HStack width="100%" height={500}>
      <Paper backgroundColor="success" width="100%" p={20}>
        <Title level={4}>Second Page</Title>
      </Paper>
    </HStack>
  </ScrollTabsLayout.Item>
  <ScrollTabsLayout.Item tabId="third" title="Third Tab">
    <HStack width="100%" height={500}>
      <Paper
        backgroundColor="informative"
        width="100%"
        p={20}
      >
        <Title level={4}>Third Page</Title>
      </Paper>
    </HStack>
  </ScrollTabsLayout.Item>
</ScrollTabsLayout>

How to use

import { ScrollTabsLayout } from '@vibrant-ui/layouts';

Properties

ScrollTabsLayout

Prop	Type	Default	Description
type	fitContent | fullWidth	fitContent	탭을 컨텐츠에 맞게 보여줄 지(fit-content), 너비 전체를 균등하게 차지할 지(fullWidth) 탭의 레이아웃을 지정합니다.
onTabChange	({ id: string; title: string }) => void	-	선택된 탭이 바뀔 때 호출되는 콜백함수입니다.
children(*)	ScrollTabsLayout.Header | ScrollTabsLayout.Item	-

ScrollTabsLayout.Header

헤더 영역을 지정합니다.

Prop	Type	Default	Description
children	ReactElementChild

ScrollTabsLayout.Footer

푸터 영역을 지정합니다.

Prop	Type	Default	Description
children	ReactElementChild

ScrollTabsLayout.Item

탭의 제목이나 탭 패널의 컨텐츠 등을 지정합니다.

Prop	Type	Default	Description
title	string		탭의 제목을 지정합니다.
tabId	string		탭의 아이디를 지정합니다.
children	ReactElementChild		탭 패널의 컨텐츠 요소를 지정합니다.