InfiniteGrid

Class: SquareLayout

eg.InfiniteGrid. SquareLayout

new eg.InfiniteGrid.SquareLayout(options)

SquareLayout.ts, line 33

SquareLayout is a layout that places all cards like squares on a checkerboard, and important cards are n times larger. The main card can be enlarged, and then a small card can be placed to naturally show the relationship of the card.

SquareLayout은 바둑판처럼 모든 카드를 정사각형으로 배치하고 중요한 카드는 크기를 N배로 키워서 보여주는 레이아웃이다. 주요 카드를 크게 표시하고, 그 다음에 작은 카드를 배치해 자연스럽게 카드의 관계를 나타낼 수 있습니다.

  • options optional
    Type: Object

    The option object of eg.InfiniteGrid.SquareLayout module

    eg.InfiniteGrid.SquareLayout 모듈의 옵션 객체

    • margin (default: 0) optional
      Type: String

      Margin used to create space around items

      아이템들 사이의 공간

    • horizontal (default: false) optional
      Type: Boolean

      Direction of the scroll movement (false: vertical, true: horizontal)

      스크롤 이동 방향 (false: 세로방향, true: 가로방향)

    • itemSize (default: 0) optional
      Type: Boolean

      The size of the items. If it is 0, it is calculated as the size of the first item in items. (priority: column > itemSize > element's size)

      아이템의 사이즈. 만약 아이템 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. (우선순위: column > itemSize > 엘리먼트의 사이즈)

    • column (default: 0) optional
      Type: Boolean

      The number of columns in the layout. If it is 0, the column is returned by itemSize. (priority: column > itemSize > element's size)

      레이아웃의 열의 개수. 만약 column이 0이면, itemSize로 열을 구합니다. (우선순위: column > itemSize > 엘리먼트의 사이즈)

Example
<script>
var ig = new eg.InfiniteGrid("#grid". {
	horizontal: true,
});

ig.setLayout(eg.InfiniteGrid.SquareLayout, {
	margin: 10,
	itemSize: 200,
});

// or

var layout = new eg.InfiniteGrid.SquareLayout({
	margin: 10,
	itemSize: 200,
	horizontal: true,
});

var item1 = '<div data-column="2"></div>';
var item2 = "<div></div>"
layout.append([item1, item2]);
</script>

Extends

Methods

inherited append(items, outline, cache){Object}

FrameLayout.ts, line 213

Adds items at the bottom of a outline.

아이템들을 아웃라인 아래에 추가한다.

  • items
    Type: Array

    Array of items to be layouted

    레이아웃할 아이템들의 배열

  • outline (default: []) optional
    Type: Array

    Array of outline points to be reference points

    기준점이 되는 아웃라인 점들의 배열

  • cache optional
    Type: boolean
Returns:
Type Description
Object
Layouted items and outline of start and end

레이아웃이 된 아이템과 시작과 끝의 아웃라인이 담긴 정보
Example
layout.prepend(items, [100]);

inherited layout(groups, outline){eg.InfiniteGrid.FrameLayout}

FrameLayout.ts, line 177

Adds items of groups at the bottom of a outline.

그룹들의 아이템들을 아웃라인 아래에 추가한다.

  • groups (default: []) optional
    Type: Array

    Array of groups to be layouted

    레이아웃할 그룹들의 배열

  • outline (default: []) optional
    Type: Array

    Array of outline points to be reference points

    기준점이 되는 아웃라인 점들의 배열

Returns:
Type Description
eg.InfiniteGrid.FrameLayout
An instance of a module itself

모듈 자신의 인스턴스
Example
layout.layout(groups, [100, 200, 300, 400]);

inherited prepend(items, outline, cache){Object}

FrameLayout.ts, line 226

Adds items at the top of a outline.

아이템을 아웃라인 위에 추가한다.

  • items
    Type: Array

    Array of items to be layouted

    레이아웃할 아이템들의 배열

  • outline (default: []) optional
    Type: Array

    Array of outline points to be reference points

    기준점이 되는 아웃라인 점들의 배열

  • cache optional
    Type: boolean
Returns:
Type Description
Object
Layouted items and outline of start and end

레이아웃이 된 아이템과 시작과 끝의 아웃라인이 담긴 정보
Example
layout.prepend(items, [100]);

inherited setSize(size){eg.InfiniteGrid.FrameLayout}

FrameLayout.ts, line 200

Set the viewport size of the layout.

레이아웃의 가시 사이즈를 설정한다.

  • size
    Type: Number

    The viewport size of container area where items are added to a layout

    레이아웃에 아이템을 추가하는 컨테이너 영역의 가시 사이즈

Returns:
Type Description
eg.InfiniteGrid.FrameLayout
An instance of a module itself

모듈 자신의 인스턴스
Example
layout.setSize(800);
comments powered by Disqus