JustifiedInfiniteGridOptions

Type: TSInterface

PROPERTY	TYPE	DEFAULT	DESCRIPTION
horizontal	boolean	false	스크롤 이동 방향. (true: 가로방향, false: 세로방향) horizontal이 false 면 inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.
percentage	Array<"position" | "size"> | boolean	false	item의 css size와 position를 %로 설정할지 여부.
isEqualSize	boolean	false	카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.
isConstantSize	boolean	false	모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.
gap	number | {horizontal?: number, vertical?: number}	5	아이템들 사이의 공간.
attributePrefix	string	"data-grid-"	엘리먼트의 데이타 속성에 사용할 접두사.
resizeDebounce	number	100	리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)
maxResizeDebounce	number	0	리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)
autoResize	boolean	true	window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.
useFit	boolean	true	렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.
useTransform	boolean	false	left, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.
renderOnPropertyChange	boolean	true	property의 변화를 통해 자동으로 render를 할지 여부.
preserveUIOnDestroy	boolean	false	destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.
defaultDirection	"start" | "end"	"end"	render옵션에서 direction을 미설정시의 기본 방향값.
outlineLength	number	0	outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.
outlineSize	number	0	outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다.
useRoundedSize	boolean	true	사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.
useResizeObserver	boolean	false	autoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.
observeChildren	boolean	false	useResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.
externalItemRenderer	ItemRenderer | null		외부에서 직접 ItemRenderer를 설정할 수 있다.
externalContainerManager	ContainerManager | null		외부에서 직접 ContainerManager를 설정할 수 있다.
columnRange	number | number[]	[1, 8]	한 줄에 들어가는 아이템의 최소, 최대 개수.
rowRange	number | number[]	0	한 그룹에 들어가는 행의 최소, 최대 개수, 0은 미설정이다.
sizeRange	number | number[]	[0, Infinity]	아이템이 조정되는 최소, 최대 사이즈. 계산이 되지 않는 경우 최소, 최대 사이즈를 벗어날 수 있다.
displayedRow	number	-1	컨테이너 크기에 계산될 최대 row 개수. overflow: hidden을 설정하면 화면에 가릴 수 있다. -1은 미설정이다.
isCroppedSize	boolean	false	row사이즈가 sizeRange에 벗어나면 크롭할지 여부. true로 설정하면 비율이 깨질 수 있다.
inlineOffset	number	0	inline 방향의 offset 수치 만큼 제외하고 비율을 유지한다. 각 아이템의 element에 'data-grid-inline-offset' 을 설정하면 우선 적용한다.
contentOffset	number	0	content 방향의 offset 수치 만큼 제외하고 비율을 유지한다. 각 아이템의 Element 또는 JSX에 'data-grid-content-offset' 을 설정하면 우선 적용한다.
stretch	boolean	false	기본적으로 아이템의 비율을 깨서 inline size를 stretch하여 container를 꽉 채우게 가능하다. sizeRange의 범위를 좁게 설정하면 stretch가 잘 될 수 있다.
stretchRange	Array<string | number>	["-10%", "+10%"]	string 값으로 -, +, %이 붙으면 원본 크기에 대한 상대값이며 number 값으로 들어오면 절대 값으로 stretch 범위를 설정할 수 있습니다. 각 아이템의 Element 또는 JSX에 data-grid-min-stretch, data-grid-max-stretch을 설정하면 우선 적용한다.
passUnstretchRow	boolean		마지막 row에 배치되는 아이템들 경우 stretch되지 않고 비율유지한채로 그려진다. InfiniteGrid를 사용하는 경우 다음 그룹과 같이 계산되어 재렌더링한다.
horizontal	boolean	false	스크롤 이동 방향. (true: 가로방향, false: 세로방향) horizontal이 false 면 inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.
percentage	Array<"position" | "size"> | boolean	false	item의 css size와 position를 %로 설정할지 여부.
isEqualSize	boolean	false	카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.
isConstantSize	boolean	false	모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.
gap	number | {horizontal?: number, vertical?: number}	5	아이템들 사이의 공간.
attributePrefix	string	"data-grid-"	엘리먼트의 데이타 속성에 사용할 접두사.
resizeDebounce	number	100	리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)
maxResizeDebounce	number	0	리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)
autoResize	boolean	true	window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.
useFit	boolean	true	렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.
useTransform	boolean	false	left, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.
renderOnPropertyChange	boolean	true	property의 변화를 통해 자동으로 render를 할지 여부.
preserveUIOnDestroy	boolean	false	destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.
defaultDirection	"start" | "end"	"end"	render옵션에서 direction을 미설정시의 기본 방향값.
outlineLength	number	0	outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.
outlineSize	number	0	outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다.
useRoundedSize	boolean	true	사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.
useResizeObserver	boolean	false	autoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.
observeChildren	boolean	false	useResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.
externalItemRenderer	ItemRenderer | null		외부에서 직접 ItemRenderer를 설정할 수 있다.
externalContainerManager	ContainerManager | null		외부에서 직접 ContainerManager를 설정할 수 있다.
container	boolean | HTMLElement | string | Ref<HTMLElement>	false	container를 적용할 대상. false면 자기 자신, true면 container를 생성. string 또는 HTMLElement는 직접 대상을 지정.
containerTag	string	"div"	container를 생성한다면 container의 tag를 정할 수 있다.
threshold	number	100	다음 아이템 그룹을 추가하기 위한 스크롤 영역의 크기.
useRecycle	boolean	true	보이는 영역의 DOM만 보여줄지 여부.
scrollContainer	HTMLElement | string | Ref<HTMLElement> | null		scrollContainer를 직접 정할 수 있다. 이 경우 container는 wrapper 자기 자신이 된다.
gridConstructor	GridFunction		Infinite 기능을 적용할 Grid 클래스.
appliedItemChecker	(item: InfiniteGridItem, grid: Grid) => boolean		렌더링 되지 않는 아이템를 Grid에 포함시킬지 체크하는 함수.
renderer	Renderer | null		DOM을 렌더하는 클래스.