InfiniteGrid

Class: JustifiedLayout

eg.InfiniteGrid. JustifiedLayout

new eg.InfiniteGrid.JustifiedLayout(options)

JustifiedLayout.ts, line 19

'justified' is a printing term with the meaning that 'it fits in one row wide'. JustifiedLayout is a layout that the card is filled up on the basis of a line given a size.

'justified'는 '1행의 너비에 맞게 꼭 들어찬'이라는 의미를 가진 인쇄 용어다. 용어의 의미대로 너비가 주어진 사이즈를 기준으로 카드가 가득 차도록 배치하는 레이아웃이다.

  • options optional
    Type: Object

    The option object of eg.InfiniteGrid.JustifiedLayout module

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

    • 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: 가로방향)

    • minSize (default: 0) optional
      Type: Number

      Minimum size of item to be resized

      아이템이 조정되는 최소 크기

    • maxSize (default: 0) optional
      Type: Number

      Maximum size of item to be resized

      아이템이 조정되는 최대 크기

    • column (default: [1, 8]) optional
      Type: Array | Number

      The number of items in a line

      한 줄에 들어가는 아이템의 개수

    • row (default: 0) optional
      Type: Array | Number

      The number or range of rows in a group, 0 is not set

      한 그룹에 들어가는 열의 개수, 0은 미설정이다

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

ig.setLayout(eg.InfiniteGrid.JustifiedLayout, {
  margin: 10,
  minSize: 100,
  maxSize: 300,
});

// or

var layout = new eg.InfiniteGrid.JustifiedLayout({
  margin: 10,
  minSize: 100,
  maxSize: 300,
  column: 5,
  horizontal: true,
});

</script>

Methods

append(items, outline, cache){Object}

JustifiedLayout.ts, line 97

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.JustifiedLayout}

JustifiedLayout.ts, line 123

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.JustifiedLayout
An instance of a module itself

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

prepend(items, outline, cache){Object}

JustifiedLayout.ts, line 110

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.JustifiedLayout}

JustifiedLayout.ts, line 84

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.JustifiedLayout
An instance of a module itself

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