Skip to main content
Version: 4.12.0

Grid

class Grid
Properties
Methods
Events
gap
defaultDirection
useFit
preserveUIOnDestroy
outlineLength
outlineSize
applyGrid
getContainerElement
getItems
getChildren
setItems
getContainerInlineSize
getOutlines
setOutlines
syncElements
updateItems
renderItems
getStatus
setStatus
getComputedOutlineSize
getComputedOutlineLength
destroy
trigger
once
hasOn
on
off
contentError
renderComplete

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.

trigger​

inherited

Trigger a custom event.

Returns: this

  • An instance of the component itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventstring | ComponentEvent

The name of the custom event to be triggered or an instance of the ComponentEvent

paramsArray<any> | $ts:...

Event data to be sent when triggering a custom event 

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  beforeHi: ComponentEvent<{ foo: number; bar: string }>;
  hi: { foo: { a: number; b: boolean } };
  someEvent: (foo: number, bar: string) => void;
  someOtherEvent: void; // When there's no event argument
}> {
  some(){
    if(this.trigger("beforeHi")){ // When event call to stop return false.
      this.trigger("hi");// fire hi event.
    }
  }
}

const some = new Some();
some.on("beforeHi", e => {
  if(condition){
    e.stop(); // When event call to stop, `hi` event not call.
  }
  // `currentTarget` is component instance.
  console.log(some === e.currentTarget); // true

  typeof e.foo; // number
  typeof e.bar; // string
});
some.on("hi", e => {
  typeof e.foo.b; // boolean
});
// If you want to more know event design. You can see article.
// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F

once​

inherited

Executed event just one time.

Returns: this

  • An instance of the component itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...

The name of the event to be attached or an event name - event handler mapped object.

handlerToAttachfunction | $ts:...✔️

The handler function of the event to be attached 

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: ComponentEvent;
}> {
  hi() {
    alert("hi");
  }
  thing() {
    this.once("hi", this.hi);
  }
}

var some = new Some();
some.thing();
some.trigger(new ComponentEvent("hi"));
// fire alert("hi");
some.trigger(new ComponentEvent("hi"));
// Nothing happens

hasOn​

inherited

Checks whether an event has been attached to a component.

Returns: boolean

  • Indicates whether the event is attached.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring

The name of the event to be attached 

import Component from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  some() {
    this.hasOn("hi");// check hi event.
  }
}

on​

inherited

Attaches an event to a component.

Returns: this

  • An instance of a component itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...

The name of the event to be attached or an event name - event handler mapped object.

handlerToAttachfunction | $ts:...✔️

The handler function of the event to be attached 

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  hi() {
    console.log("hi");
  }
  some() {
    this.on("hi",this.hi); //attach event
  }
}

off​

inherited

Detaches an event from the component.
If the eventName is not given this will detach all event handlers attached.
If the handlerToDetach is not given, this will detach all event handlers for eventName.

Returns: this

  • An instance of a component itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...✔️

The name of the event to be detached

handlerToDetachfunction | $ts:...✔️

The handler function of the event to be detached 

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  hi() {
    console.log("hi");
  }
  some() {
    this.off("hi",this.hi); //detach event
  }
}

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);
});