버전: Next

Grid

class Grid

constructor

new Grid(containerElement, options)

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
containerElement	HTMLElement \| string			모듈을 적용할 기준 엘리먼트
options	Partial<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을 계산한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
direcion	"start" \| "end"			Grid를 적용할 방향. ("end": 시작에서 끝 방향, "start": 끝에서 시작 방향)
outline	Array<number>			Grid를 적용할 시작 outline.

getContainerElement

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

Returns: HTMLElement

getItems

아이템들을 반환한다.

Returns: GridItem[]

getChildren

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

Returns: HTMLElement[]

setItems

아이템들을 설정한다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	GridItem[]			설정할 아이템들

getContainerInlineSize

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

Returns: number

getOutlines

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

Returns: GridOutlines

setOutlines

아웃라인을 설정한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
outlines	GridOutlines			설정할 아웃라인.

syncElements

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
options	RenderOptions	✔️	{}	렌더링을 하기 위한 옵션.

updateItems

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	GridItem[]	✔️	this.items	업데이트할 아이템들.
options	RenderOptions	✔️	{}	렌더링을 하기 위한 옵션.

renderItems

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
options	RenderOptions	✔️	{}	렌더링을 하기 위한 옵션.

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

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

getStatus

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

Returns: GridStatus

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
minimize	boolean	✔️		item의 status를 최소화할지 여부. (default: false)

setStatus

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
status	GridStatus

getComputedOutlineSize

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	GridItem[]	✔️	this.items	outline 사이즈를 구하기 위한 아이템들.

getComputedOutlineLength

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

Returns: number

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	GridItem[]	✔️	this.items	outline length를 구하기 위한 아이템들.

destroy

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
Options	DestroyOptions	✔️	{}	destory()를 위한 옵션

trigger

inherited

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

Returns: this

컴포넌트 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
event	string \| ComponentEvent			발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스
params	Array<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

컴포넌트 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string \| $ts:...			등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttach	function \| $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

이벤트 등록 여부

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string			등록 여부를 확인할 이벤트의 이름

import Component from "@egjs/component";

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

on

inherited

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

Returns: this

컴포넌트 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string \| $ts:...			등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttach	function \| $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

컴포넌트 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string \| $ts:...	✔️		해제할 이벤트의 이름
handlerToDetach	function \| $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

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	Grid.OnContentError			이벤트에 전달되는 데이터 객체

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

renderComplete

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	Grid.OnRenderComplete			이벤트에 전달되는 데이터 객체

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

constructor​

Properties​

gap​

defaultDirection​

useFit​

preserveUIOnDestroy​

outlineLength​

outlineSize​

Methods​

applyGrid​

getContainerElement​

getItems​

getChildren​

setItems​

getContainerInlineSize​

getOutlines​

setOutlines​

syncElements​

updateItems​

renderItems​

getStatus​

setStatus​

getComputedOutlineSize​

getComputedOutlineLength​

destroy​

trigger​

once​

hasOn​

on​

off​

Events​

contentError​

renderComplete​

constructor

Properties

gap

defaultDirection

useFit

preserveUIOnDestroy

outlineLength

outlineSize

Methods

applyGrid

getContainerElement

getItems

getChildren

setItems

getContainerInlineSize

getOutlines

setOutlines

syncElements

updateItems

renderItems

getStatus

setStatus

getComputedOutlineSize

getComputedOutlineLength

destroy

trigger

once

hasOn

on

off

Events

contentError

renderComplete