Skip to main content

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

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

ScrollTabsLayout.Header

헤더 영역을 지정합니다.

PropTypeDefaultDescription
childrenReactElementChild

ScrollTabsLayout.Footer

푸터 영역을 지정합니다.

PropTypeDefaultDescription
childrenReactElementChild

ScrollTabsLayout.Item

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

PropTypeDefaultDescription
titlestring탭의 제목을 지정합니다.
tabIdstring탭의 아이디를 지정합니다.
childrenReactElementChild탭 패널의 컨텐츠 요소를 지정합니다.
Previous
Ratio