Skip to main content
Version: 4.3.1

FrameInfiniteGridOptions

Type: TSInterface

PROPERTYTYPEDESCRIPTION
horizontalboolean

Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.

percentageArray<"position" | "size"> | boolean

Whether to set the css size and position of the item to %.

isEqualSizeboolean

Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved.

isConstantSizeboolean

Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.

gapnumber

Gap used to create space around items.

attributePrefixstring

The prefix to use element's data attribute.

resizeDebouncenumber

Debounce time to set in the resize event. (unit: ms)

maxResizeDebouncenumber

Maximum time to debounce the resize event. (0 is not set)

autoResizeboolean

Whether the resize method should be called automatically after a window resize event.

useFitboolean

Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0.

useTransformboolean

Whether to use transform property instead of using left and top css properties.

renderOnPropertyChangeboolean

Whether to automatically render through property change.

preserveUIOnDestroyboolean

Whether to preserve the UI of the existing container or item when destroying.

defaultDirection"start" | "end"

The default direction value when direction is not set in the render option.

outlineLengthnumber

The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.

outlineSizenumber

The size of the outline. If the outline size is 0, it is calculated according to the grid type.

useRoundedSizeboolean

Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.

useResizeObserverboolean

Whether to use ResizeObserver event to detect container size change when autoResize option is used.

observeChildrenboolean

Whether to detect size change of children if useResizeObserver option is used.

externalItemRendererItemRenderer | null

You can set the ItemRenderer directly externally.

externalContainerManagerContainerManager | null

You can set the ContainerManager directly externally.

framenumber[][]

The shape of the grid. You can set the shape and order of items with a 2d array ([contentPos][inlinePos]). You can place items as many times as you fill the array with numbers, and zeros and spaces are empty spaces. The order of the items is arranged in ascending order of the numeric values that fill the array. (default: [])

useFrameFillboolean

Make sure that the frame can be attached after the previous frame. (default: true)

rectSizenumber | {inlineSize: number, contentSize: number}

1x1 rect size. If it is 0, it is determined by the number of columns in the frame. (default: 0)

horizontalboolean

Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.

percentageArray<"position" | "size"> | boolean

Whether to set the css size and position of the item to %.

isEqualSizeboolean

Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved.

isConstantSizeboolean

Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.

gapnumber

Gap used to create space around items.

attributePrefixstring

The prefix to use element's data attribute.

resizeDebouncenumber

Debounce time to set in the resize event. (unit: ms)

maxResizeDebouncenumber

Maximum time to debounce the resize event. (0 is not set)

autoResizeboolean

Whether the resize method should be called automatically after a window resize event.

useFitboolean

Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0.

useTransformboolean

Whether to use transform property instead of using left and top css properties.

renderOnPropertyChangeboolean

Whether to automatically render through property change.

preserveUIOnDestroyboolean

Whether to preserve the UI of the existing container or item when destroying.

defaultDirection"start" | "end"

The default direction value when direction is not set in the render option.

outlineLengthnumber

The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.

outlineSizenumber

The size of the outline. If the outline size is 0, it is calculated according to the grid type.

useRoundedSizeboolean

Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.

useResizeObserverboolean

Whether to use ResizeObserver event to detect container size change when autoResize option is used.

observeChildrenboolean

Whether to detect size change of children if useResizeObserver option is used.

externalItemRendererItemRenderer | null

You can set the ItemRenderer directly externally.

externalContainerManagerContainerManager | null

You can set the ContainerManager directly externally.

containerboolean | string | HTMLElement

The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly. (default: false)

containerTagstring

If you create a container, you can set the container's tag. (default: "div")

thresholdnumber

The size of the scrollable area for adding the next group of items. (default: 100)

useRecycleboolean

Whether to show only the DOM of the visible area. (default: true)

gridConstructorGridFunction

Grid class to apply Infinite function.

rendererRenderer | null

class that renders the DOM.