본문으로 건너뛰기
버전: 4.9.0

Grid

class Grid

constructor

new Grid(containerElement, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
containerElementHTMLElement | string모듈을 적용할 기준 엘리먼트
optionsPartial<Options>✔️{}Grid 모듈의 옵션 객체

Properties

gap

아이템들 사이의 공간.

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

Default: 0

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

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

grid.gap = 5;

defaultDirection

render옵션에서 direction을 미설정시의 기본 방향값.

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

Default: "end"

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

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

grid.defaultDirection = "start";

useFit

렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 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

destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.

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

Default: false

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

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

grid.preserveUIOnDestroy = true;

outlineLength

outline의 개수. 아웃라인의 개수가 0이라면 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

outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다.

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

Grid에 맞게 아이템들의 CSS rect를 적용하고 outline을 계산한다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
direcion"start" | "end"Grid를 적용할 방향. ("end": 시작에서 끝 방향, "start": 끝에서 시작 방향)
outlineArray<number>Grid를 적용할 시작 outline.

getContainerElement

컨테이너 엘리먼트를 반환한다.

Returns: HTMLElement

getItems

아이템들을 반환한다.

Returns: GridItem[]

getChildren

컨테이너 엘리먼트의 children을 반환한다.

Returns: HTMLElement[]

setItems

아이템들을 설정한다.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsGridItem[]설정할 아이템들

getContainerInlineSize

container의 inline 사이즈를 가져온다. (horizontal이 false면 "width", 아니면 "height")

Returns: number

getOutlines

Grid의 처음과 끝의 outline을 반환한다.

Returns: GridOutlines

setOutlines

아웃라인을 설정한다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
outlinesGridOutlines설정할 아웃라인.

syncElements

elements가 바뀐 경우 동기화를 하고 렌더링을 한다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsRenderOptions✔️{}렌더링을 하기 위한 옵션.

updateItems

아이템들의 사이즈를 업데이트하고 렌더링을 한다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsGridItem[]✔️this.items업데이트할 아이템들.
optionsRenderOptions✔️{}렌더링을 하기 위한 옵션.

renderItems

grid에 맞게 아이템을 재배치하고 렌더링을 한다. 배치가 완료되면 renderComplete 이벤트가 발생한다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsRenderOptions✔️{}렌더링을 하기 위한 옵션.
import { MasonryGrid } from "@egjs/grid";
const grid = new MasonryGrid();

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

getStatus

아이템의 위치, 사이즈 등 현재 상태를 반환한다. 반환한 상태는 setStatus() 메서드로 복원할 수 있다.

Returns: GridStatus

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
minimizeboolean✔️item의 status를 최소화할지 여부. (default: false)

setStatus

getStatus() 메서드에 대한 호출을 통해 반환된 상태로 Grid 모듈의 상태를 설정한다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
statusGridStatus

getComputedOutlineSize

outline에 해당하는 inline 사이즈를 구한다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsGridItem[]✔️this.itemsoutline 사이즈를 구하기 위한 아이템들.

getComputedOutlineLength

outline에 해당하는 length를 가져온다.

Returns: number

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsGridItem[]✔️this.itemsoutline length를 구하기 위한 아이템들.

destroy

인스턴스와 이벤트를 해제하고 컨테이너와 엘리먼트들의 CSS를 되돌린다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
OptionsDestroyOptions✔️{}destory()를 위한 옵션

trigger

inherited

커스텀 이벤트를 발생시킨다

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventstring | ComponentEvent발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스
paramsArray<any> | $ts:...커스텀 이벤트가 발생할 때 전달할 데이터
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

이벤트가 한번만 실행된다.

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttachfunction | $ts:...✔️등록할 이벤트의 핸들러 함수
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

컴포넌트에 이벤트가 등록됐는지 확인한다.

Returns: boolean

  • 이벤트 등록 여부
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring등록 여부를 확인할 이벤트의 이름
import Component from "@egjs/component";

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

on

inherited

컴포넌트에 이벤트를 등록한다.

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttachfunction | $ts:...✔️등록할 이벤트의 핸들러 함수
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

컴포넌트에 등록된 이벤트를 해제한다.
eventName이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.
handlerToAttach가 주어지지 않았을 경우 eventName에 해당하는 모든 이벤트 핸들러를 제거한다.

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...✔️해제할 이벤트의 이름
handlerToDetachfunction | $ts:...✔️해제할 이벤트의 핸들러 함수
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

콘텐츠 로드에 에러가 날 때 발생하는 이벤트.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eGrid.OnContentError이벤트에 전달되는 데이터 객체
grid.on("contentError", e => {
e.update();
});

renderComplete

Grid가 렌더링이 완료됐을 때 발생하는 이벤트이다.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eGrid.OnRenderComplete이벤트에 전달되는 데이터 객체
grid.on("renderComplete", e => {
console.log(e.mounted, e.updated, e.useResize);
});