Skip to main content
Version: 4.7.1

Grid

class Grid extends eg.Component

constructor

new Grid(containerElement, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
containerElementHTMLElement | string

A base element for a module

optionsPartial<Options>✔️{}

The option object of the Grid module

Properties

gap

Gap used to create space around items.

Type: $ts:Grid.GridOptions["gap"]

Default: 0

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
gap: 0,
});

grid.gap = 5;

defaultDirection

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

Type: $ts:Grid.GridOptions["defaultDirection"]

Default: "end"

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
defaultDirection: "end",
});

grid.defaultDirection = "start";

useFit

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. (default: true)

Type: $ts:Grid.GridOptions["useFit"]

Default: true

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
useFit: true,
});

grid.useFit = false;

preserveUIOnDestroy

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

Type: $ts:Grid.GridOptions["preserveUIOnDestroy"]

Default: false

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
preserveUIOnDestroy: false,
});

grid.preserveUIOnDestroy = true;

outlineLength

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

Type: $ts:Grid.GridOptions["outlineLength"]

Default: 0

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
outlineLength: 0,
outlineSize: 0,
});

grid.outlineLength = 3;

outlineSize

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

Type: $ts:Grid.GridOptions["outlineSize"]

Default: 0

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
outlineLength: 0,
outlineSize: 0,
});

grid.outlineSize = 300;

Methods

applyGrid

Apply the CSS rect of items to fit the Grid and calculate the outline.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
direcion"start" | "end"

The direction to apply the Grid. ("end": start to end, "start": end to start)

outlineArray<number>

The start outline to apply the Grid.

getContainerElement

Return Container Element.

Returns: HTMLElement

getItems

Return items.

Returns: GridItem[]

getChildren

Returns the children of the container element.

Returns: HTMLElement[]

setItems

Set items.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsGridItem[]

The items to set.

getContainerInlineSize

Gets the container's inline size. ("width" if horizontal is false, otherwise "height")

Returns: number

getOutlines

Returns the outlines of the start and end of the Grid.

Returns: GridOutlines

setOutlines

Set outlines.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
outlinesGridOutlines

The outlines to set.

syncElements

When elements change, it synchronizes and renders items.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsRenderOptions✔️{}

Options for rendering.

updateItems

Update the size of the items and render them.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsGridItem[]✔️this.items

Items to be updated.

optionsRenderOptions✔️{}

Options for rendering.

renderItems

Rearrange items to fit the grid and render them. When rearrange is complete, the renderComplete event is fired.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsRenderOptions✔️{}

Options for rendering.

import { MasonryGrid } from "@egjs/grid";
const grid = new MasonryGrid();

grid.on("renderComplete", e => {
console.log(e);
});
grid.renderItems();

getStatus

Returns current status such as item's position, size. The returned status can be restored with the setStatus() method.

Returns: GridStatus

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
minimizeboolean✔️

Whether to minimize the status of the item. (default: false)

setStatus

Set status of the Grid module with the status returned through a call to the getStatus() method.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
statusGridStatus

getComputedOutlineSize

Get the inline size corresponding to outline.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsGridItem[]✔️this.items

Items to get outline size.

getComputedOutlineLength

Get the length corresponding to outline.

Returns: number

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsGridItem[]✔️this.items

Items to get outline length.

destroy

Releases the instnace and events and returns the CSS of the container and elements.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
OptionsDestroyOptions✔️{}

for destroy.

Events

contentError

This event is fired when an error occurs in the content.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eGrid.OnContentError

The object of data to be sent to an event

grid.on("contentError", e => {
e.update();
});

renderComplete

This event is fired when the Grid has completed rendering.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eGrid.OnRenderComplete

The object of data to be sent to an event

grid.on("renderComplete", e => {
console.log(e.mounted, e.updated, e.useResize);
});