@egjs/grid/declaration/grids/MasonryGrid.d.ts

A component that can arrange items according to the type of grids

/**
 * egjs-grid
 * Copyright (c) 2021-present NAVER Corp.
 * MIT license
 */
import Grid from "../Grid";
import { PROPERTY_TYPE } from "../consts";
import { GridOptions, Properties, GridOutlines, GridAlign, MasonryGridVerticalAlign } from "../types";
import { GridItem } from "../GridItem";
/**
 * @typedef
 * @memberof Grid.MasonryGrid
 * @extends Grid.GridOptions
 */
export interface MasonryGridOptions extends GridOptions {
    /**
     * The number of columns. If the number of columns is 0, it is automatically calculated according to the size of the container. Can be used instead of outlineLength.
     * <ko>열의 개수. 열의 개수가 0이라면, 컨테이너의 사이즈에 의해 계산이 된다. outlineLength 대신 사용할 수 있다.</ko>
     * @default 0
     */
    column?: number;
    /**
     * The size of the columns. If it is 0, it is calculated as the size of the first item in items. Can be used instead of outlineSize.
     * <ko>열의 사이즈. 만약 열의 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. outlineSize 대신 사용할 수 있다.</ko>
     * @default 0
     */
    columnSize?: number;
    /**
     * The size ratio(inlineSize / contentSize) of the columns. 0 is not set. `true` is automatically calculated as orgInlineSize / orgContentSize.
     * <ko>열의 사이즈 비율(inlineSize / contentSize). 0은 미설정이다. `true` 는 orgInlineSize / orgContentSize로 자동 계산이 된다.</ko>
     * @default 0
     */
    columnSizeRatio?: number | boolean;
    /**
     * Align of the position of the items. If you want to use `stretch`, be sure to set `column`, `columnSize` or `maxStretchColumnSize` option. ("start", "center", "end", "justify", "stretch")
     * <ko>아이템들의 위치의 정렬. `stretch`를 사용하고 싶다면 `column`, `columnSize` 또는 `maxStretchColumnSize` 옵션을 설정해라.  ("start", "center", "end", "justify", "stretch")</ko>
     * @default "justify"
     */
    align?: GridAlign;
    /**
     * Content direction alignment of items. “Masonry” is sorted in the form of masonry. Others are applied as content direction alignment, similar to vertical-align of inline-block.
     * If you set multiple columns (`data-grid-column`), the screen may look strange.
     * <ko>아이템들의 Content 방향의 정렬. "masonry"는 masonry 형태로 정렬이 된다. 그 외는 inline-block의 vertical-align과 유사하게 content 방향 정렬로 적용이 된다.칼럼(`data-grid-column` )을 여러개 설정하면 화면이 이상하게 보일 수 있다. </ko>
     * @default "masonry"
     */
    contentAlign?: MasonryGridVerticalAlign;
    /**
     * Difference Threshold for Counting Columns. Since offsetSize is calculated by rounding, the number of columns may not be accurate.
     * <ko>칼럼 개수를 계산하기 위한 차이 임계값. offset 사이즈는 반올림으로 게산하기 때문에 정확하지 않을 수 있다.</ko>
     * @default 1
     */
    columnCalculationThreshold?: number;
    /**
     * If stretch is used, the column can be automatically calculated by setting the maximum size of the column that can be stretched.
     * <ko>stretch를 사용한 경우 최대로 늘릴 수 있는 column의 사이즈를 설정하여 column을 자동 계산할 수 있다.</ko>
     * @default Infinity
     */
    maxStretchColumnSize?: number;
    /**
     * Adjust the contentSize of the items to make the outlines equal.
     * "scale-down": Scales down to fit the start of the item's outline.
     * "scale-center": Scales down or up to fit the center of the item's outline.
     * "scale-up": Scales up to fit the end of the item's outline.
     * <ko>아이템들의 contentSize를 조절하여 outline을 동등하게 한다.
     * "scale-down": 아이템들의 아웃라인 시작 부분에 맞춰 축소시킨다.
     * "scale-center": 아이템들의 아웃라인 중간 부분에 맞춰 축소시키거나 확장시킨다.
     * "scale-up": 아이템들의 아웃라인 끝 부분에 맞춰 확장시킨다.</ko>
     * @default ""
     */
    stretchOutline?: "scale-down" | "scale-up" | "scale-center" | "";
    /**
     * When using stretchOutline, the contentSize of the items is adjusted to adjust the outline to a value between min and max. ([minSize, maxSize])
     * <ko>stretchOutline를 사용하는 경우 아이템들의 contentSize를 조절하여 container의 outline을 min과 max 사이 값으로 조절한다. ([minSize, maxSize])</ko>
     * @default [0, Infinity]
     */
    stretchContainerSize?: number[];
    /**
     * adjust the minimum and maximum item size of the items. ([minSize, maxSize])
     * <ko>아이템들의 item size 최소, 최대 크기를 조절한다. ([minSize, maxSize])</ko>
     * @default [0, Infinity]
     */
    stretchItemSize?: Array<string | number>;
}
/**
 * MasonryGrid is a grid that stacks items with the same width as a stack of bricks. Adjust the width of all images to the same size, find the lowest height column, and insert a new item.
 * @ko MasonryGrid는 벽돌을 쌓아 올린 모양처럼 동일한 너비를 가진 아이템를 쌓는 레이아웃이다. 모든 이미지의 너비를 동일한 크기로 조정하고, 가장 높이가 낮은 열을 찾아 새로운 이미지를 삽입한다. 따라서 배치된 아이템 사이에 빈 공간이 생기지는 않지만 배치된 레이아웃의 아래쪽은 울퉁불퉁해진다.
 * @memberof Grid
 * @param {HTMLElement | string} container - A base element for a module <ko>모듈을 적용할 기준 엘리먼트</ko>
 * @param {Grid.MasonryGrid.MasonryGridOptions} options - The option object of the MasonryGrid module <ko>MasonryGrid 모듈의 옵션 객체</ko>
 */
export declare class MasonryGrid extends Grid<MasonryGridOptions> {
    static propertyTypes: {
        column: PROPERTY_TYPE;
        columnSize: PROPERTY_TYPE;
        columnSizeRatio: PROPERTY_TYPE;
        align: PROPERTY_TYPE;
        columnCalculationThreshold: PROPERTY_TYPE;
        maxStretchColumnSize: PROPERTY_TYPE;
        contentAlign: PROPERTY_TYPE;
        stretchOutline: PROPERTY_TYPE;
        stretchContainerSize: PROPERTY_TYPE;
        stretchItemSize: PROPERTY_TYPE;
        gap: PROPERTY_TYPE;
        defaultDirection: PROPERTY_TYPE;
        renderOnPropertyChange: PROPERTY_TYPE;
        preserveUIOnDestroy: PROPERTY_TYPE;
        useFit: PROPERTY_TYPE;
        outlineSize: PROPERTY_TYPE;
        outlineLength: PROPERTY_TYPE;
    };
    static defaultOptions: Required<MasonryGridOptions>;
    applyGrid(items: GridItem[], direction: "start" | "end", outline: number[]): GridOutlines;
    getComputedOutlineSize(items?: GridItem[]): number;
    getComputedOutlineLength(items?: GridItem[]): number;
    private _getAlignPoses;
}
export interface MasonryGrid extends Properties<typeof MasonryGrid> {
}
/**
 * Align of the position of the items. If you want to use `stretch`, be sure to set `column` or `columnSize` option. ("start", "center", "end", "justify", "stretch")
 * @ko 아이템들의 위치의 정렬. `stretch`를 사용하고 싶다면 `column` 또는 `columnSize` 옵션을 설정해라.  ("start", "center", "end", "justify", "stretch")
 * @name Grid.MasonryGrid#align
 * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["align"]}
 * @default "justify"
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   align: "start",
 * });
 *
 * grid.align = "justify";
 * ```
 */
/**
 * The number of columns. If the number of columns is 0, it is automatically calculated according to the size of the container.  Can be used instead of outlineLength.
 * @ko 열의 개수. 열의 개수가 0이라면, 컨테이너의 사이즈에 의해 계산이 된다. outlineLength 대신 사용할 수 있다.
 * @name Grid.MasonryGrid#column
 * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["column"]}
 * @default 0
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   column: 0,
 * });
 *
 * grid.column = 4;
 * ```
 */
/**
 * The size of the columns. If it is 0, it is calculated as the size of the first item in items. Can be used instead of outlineSize.
 * @ko 열의 사이즈. 만약 열의 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. outlineSize 대신 사용할 수 있다.
 * @name Grid.MasonryGrid#columnSize
 * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["columnSize"]}
 * @default 0
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   columnSize: 0,
 * });
 *
 * grid.columnSize = 200;
 * ```
 */
/**
 * The size ratio(inlineSize / contentSize) of the columns. 0 is not set.
 * @ko 열의 사이즈 비율(inlineSize / contentSize). 0은 미설정이다.
 * @name Grid.MasonryGrid#columnSizeRatio
 * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["columnSizeRatio"]}
 * @default 0
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   columnSizeRatio: 0,
 * });
 *
 * grid.columnSizeRatio = 0.5;
 * ```
 */
/**
 * If stretch is used, the column can be automatically calculated by setting the maximum size of the column that can be stretched.
 * @ko stretch를 사용한 경우 최대로 늘릴 수 있는 column의 사이즈를 설정하여 column을 자동 계산할 수 있다.
 * @name Grid.MasonryGrid#maxStretchColumnSize
 * @type {$ts:Grid.MasonryGrid.MasonryGridOptions["maxStretchColumnSize"]}
 * @default Infinity
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   align: "stretch",
 *   maxStretchColumnSize: 0,
 * });
 *
 * grid.maxStretchColumnSize = 400;
 * ```
 */