Skip to main content

GridList

Loading...

How to use

import { GridList } from '@vibrant-ui/components';

Properties

PropTypeDefaultDescription
renderItem() => ReactElement | nulldata로부터 아이템을 받아 리스트에 렌더할 요소를 지정합니다
dataarray배열 형태로 renderItem으로 전달될 아이템의 리스트를 지정합니다
columnsnumber열의 개수
maxRowsnumber최대 행의 개수
breakpointsnumber[]오버라이드할 반응형 브레이크포인트를 지정합니다
keyExtractor(item: Data, index: number) => string주어진 아이템에 대한 키를 지정합니다
columnSpacingnumber0열 사이의 간격
rowSpacingnumber0행 사이의 간격
onItemImpressed(item: Data, index: number | null) => void;아이템이 화면에 보이는 순간 호출되는 콜백함수
onEndReached() => void;리스트의 끝에 도달했을 때 호출되는 콜백함수

Usage

Breakpoints

Theme에 정의된 브레이크포인트가 아닌 커스텀한 브레이크포인트로 열의 개수나 간격 등을 설정하고 싶은 경우에 breakpoints 속성을 통해 해당 GridList에 커스텀한 브레이크포인트를 지정할 수 있습니다.

<GridList
data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
// 해당 브레이크포인트를 기준으로 열의 개수가 설정됩니다
breakpoints={[480, 720, 960]}
columns={[2, 3, 4]}
renderItem={({ item }) => (
<Box
aspectRatio={4 / 3}
width="100%"
background="onPrimaryContainer"
justifyContent="center"
alignItems="center"
>
<Body level={1} color="onPrimary">
{item}
</Body>
</Box>
)}
keyExtractor={(item) => item}
rowSpacing={8}
columnSpacing={8}
/>
Previous
GhostButton