InfiniteGrid

Class: FrameLayout

eg.InfiniteGrid. FrameLayout

new eg.InfiniteGrid.FrameLayout(options)

FrameLayout.ts, line 105

FrameLayout is a layout that allows you to place cards in a given frame. It is a layout that corresponds to a level intermediate between the placement of the image directly by the designer and the layout using the algorithm.

FrameLayout은 주어진 프레임에 맞춰 카드를 배치하는 레이아웃입니다. 디자이너가 직접 이미지를 배치하는 것과 알고리즘을 사용한 배치의 중간 정도 수준에 해당하는 레이아웃이다.

  • options optional
    Type: Object

    The option object of eg.InfiniteGrid.FrameLayout module

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

    • 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.

      아이템의 사이즈. 만약 아이템 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다.

    • frame (default: []) optional
      Type: Boolean

      The size of the items. If it is 0, it is calculated as the size of the first item in items.

      아이템의 사이즈. 만약 아이템 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다.

    • frameFill (default: true) optional
      Type: Boolean

      Make sure that the frame can be attached after the previous frame.

      다음 프레임이 전 프레임에 이어 붙일 수 있는지 있는지 확인한다.

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

ig.setLayout(eg.InfiniteGrid.FrameLayout, {
  margin: 10,
  itemSize: 200,
  frame: [
    [1, 1, 1, 1, 1],
    [0, 0, 2, 2, 2],
    [0, 0, 2, 2, 2],
    [3, 4, 5, 5, 5],
  ],
});

// or

var layout = new eg.InfiniteGrid.FrameLayout({
  margin: 10,
  itemSize: 200,
  horizontal: true,
  frame: [
    [1, 1, 1, 1, 1],
    [0, 0, 2, 2, 2],
    [0, 0, 2, 2, 2],
    [3, 4, 5, 5, 5],
  ],
});

</script>

Methods

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

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

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

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