Grid

class Grid extends eg.Component

Properties

Methods

Events

gap
defaultDirection
useFit
preserveUIOnDestroy

applyGrid
getContainerElement
getItems
getChildren
setItems
getContainerInlineSize
getOutlines
setOutlines
syncElements
updateItems
renderItems
getStatus
setStatus
destroy

contentError
renderComplete

Constructor

new Grid(containerElement, options)

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
containerElement	HTMLElement | string			A base element for a module
options	Partial<Options>	✔️	{}	The option object of the Grid module

Properties

gap

Gap used to create space around items.

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

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

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

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

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

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

grid.preserveUIOnDestroy = true;

Methods

applyGrid

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
direcion	"start" | "end"			The direction to apply the Grid. ("end": start to end, "start": end to start)
outline	Array<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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	GridItem[]			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.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
outlines	GridOutlines			The outlines to set.

syncElements

When elements change, it synchronizes and renders items.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
options	RenderOptions	✔️	{}	Options for rendering.

updateItems

Update the size of the items and render them.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	GridItem[]	✔️	this.items	Items to be updated.
options	RenderOptions	✔️	{}	Options for rendering.

renderItems

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
options	RenderOptions	✔️	{}	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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
minimize	boolean	✔️		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.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
status	GridStatus

destroy

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
Options	DestroyOptions	✔️	{}	for destroy.

Events

contentError

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	Grid.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.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	Grid.OnRenderComplete			The object of data to be sent to an event

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