Skip to main content
Version: 4.11.1

InfiniteGridOptions

Type: TSInterface

PROPERTYTYPEDEFAULTDESCRIPTION
horizontalbooleanfalse

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"> | booleanfalse

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

isEqualSizebooleanfalse

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.

isConstantSizebooleanfalse

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

gapnumber5

Gap used to create space around items.

attributePrefixstring"data-grid-"

The prefix to use element's data attribute.

resizeDebouncenumber100

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

maxResizeDebouncenumber0

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

autoResizebooleantrue

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

useFitbooleantrue

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.

useTransformbooleanfalse

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

renderOnPropertyChangebooleantrue

Whether to automatically render through property change.

preserveUIOnDestroybooleanfalse

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

defaultDirection"start" | "end""end"

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

outlineLengthnumber0

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

outlineSizenumber0

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

useRoundedSizebooleantrue

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.

useResizeObserverbooleanfalse

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

observeChildrenbooleanfalse

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 | HTMLElement | string | Ref<HTMLElement>false

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

containerTagstring"div"

If you create a container, you can set the container's tag.

thresholdnumber100

The size of the scrollable area for adding the next group of items.

useRecyclebooleantrue

Whether to show only the DOM of the visible area.

scrollContainerHTMLElement | string | Ref<HTMLElement> | null

You can set the scrollContainer directly. In this case, the container becomes the wrapper itself.

gridConstructorGridFunction

Grid class to apply Infinite function.

appliedItemChecker(item: InfiniteGridItem, grid: Grid) => boolean

A function that checks whether non-rendering items are included in the Grid.

rendererRenderer | null

class that renders the DOM.