본문으로 건너뛰기
버전: 4.7.1

MasonryInfiniteGridOptions

Type: TSInterface

PROPERTYTYPEDESCRIPTION
horizontalboolean스크롤 이동 방향. (true: 가로방향, false: 세로방향) horizontal이 false 면 inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.
percentageArray<"position" | "size"> | booleanitem의 css size와 position를 %로 설정할지 여부.
isEqualSizeboolean카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.
isConstantSizeboolean모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.
gapnumber아이템들 사이의 공간.
attributePrefixstring엘리먼트의 데이타 속성에 사용할 접두사.
resizeDebouncenumber리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)
maxResizeDebouncenumber리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)
autoResizebooleanwindow의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.
useFitboolean렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.
useTransformbooleanleft, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.
renderOnPropertyChangebooleanproperty의 변화를 통해 자동으로 render를 할지 여부.
preserveUIOnDestroybooleandestroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.
defaultDirection"start" | "end"render옵션에서 direction을 미설정시의 기본 방향값.
outlineLengthnumberoutline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.
outlineSizenumberoutline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다.
useRoundedSizeboolean사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.
useResizeObserverbooleanautoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.
observeChildrenbooleanuseResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.
externalItemRendererItemRenderer | null외부에서 직접 ItemRenderer를 설정할 수 있다.
externalContainerManagerContainerManager | null외부에서 직접 ContainerManager를 설정할 수 있다.
columnnumber열의 개수. 열의 개수가 0이라면, 컨테이너의 사이즈에 의해 계산이 된다. outlineLength 대신 사용할 수 있다.(default: 0)
columnSizenumber열의 사이즈. 만약 열의 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. outlineSize 대신 사용할 수 있다.(default: 0)
columnSizeRationumber열의 사이즈 비율(inlineSize / contentSize). 0은 미설정이다.
alignGridAlign아이템들의 위치의 정렬. stretch를 사용하고 싶다면 column, columnSize 또는 maxStretchColumnSize 옵션을 설정해라. ("start", "center", "end", "justify", "stretch") (default: "justify")
columnCalculationThresholdnumber칼럼 개수를 계산하기 위한 차이 임계값. offset 사이즈는 반올림으로 게산하기 때문에 정확하지 않을 수 있다. (default: 1)
maxStretchColumnSizenumberstretch를 사용한 경우 최대로 늘릴 수 있는 column의 사이즈를 설정하여 column을 자동 계산할 수 있다. (default: Infinity)
horizontalboolean스크롤 이동 방향. (true: 가로방향, false: 세로방향) horizontal이 false 면 inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.
percentageArray<"position" | "size"> | booleanitem의 css size와 position를 %로 설정할지 여부.
isEqualSizeboolean카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.
isConstantSizeboolean모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.
gapnumber아이템들 사이의 공간.
attributePrefixstring엘리먼트의 데이타 속성에 사용할 접두사.
resizeDebouncenumber리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)
maxResizeDebouncenumber리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)
autoResizebooleanwindow의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.
useFitboolean렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.
useTransformbooleanleft, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.
renderOnPropertyChangebooleanproperty의 변화를 통해 자동으로 render를 할지 여부.
preserveUIOnDestroybooleandestroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.
defaultDirection"start" | "end"render옵션에서 direction을 미설정시의 기본 방향값.
outlineLengthnumberoutline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.
outlineSizenumberoutline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다.
useRoundedSizeboolean사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.
useResizeObserverbooleanautoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.
observeChildrenbooleanuseResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.
externalItemRendererItemRenderer | null외부에서 직접 ItemRenderer를 설정할 수 있다.
externalContainerManagerContainerManager | null외부에서 직접 ContainerManager를 설정할 수 있다.
containerboolean | HTMLElement | string | Ref<HTMLElement>container를 적용할 대상. false면 자기 자신, true면 container를 생성. string 또는 HTMLElement는 직접 대상을 지정.
containerTagstringcontainer를 생성한다면 container의 tag를 정할 수 있다.
thresholdnumber다음 아이템 그룹을 추가하기 위한 스크롤 영역의 크기.
useRecycleboolean보이는 영역의 DOM만 보여줄지 여부.
scrollContainerHTMLElement | string | Ref<HTMLElement> | nullscrollContainer를 직접 정할 수 있다. 이 경우 container는 wrapper 자기 자신이 된다.
gridConstructorGridFunctionInfinite 기능을 적용할 Grid 클래스.
rendererRenderer | nullDOM을 렌더하는 클래스.