UNPKG

@egjs/infinitegrid

Version:

A module used to arrange elements including content infinitely according to grid type. With this module, you can implement various grids composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the

45 lines (44 loc) 3 kB
import { JustifiedGridOptions } from "@egjs/grid"; import InfiniteGrid from "../InfiniteGrid"; import { InfiniteGridOptions } from "../types"; /** * @typedef * @extends InfiniteGridOptions * @extends Grid.JustifiedGrid.JustifiedGridOptions */ export interface JustifiedInfiniteGridOptions extends JustifiedGridOptions, InfiniteGridOptions { } /** * 'justified' is a printing term with the meaning that 'it fits in one row wide'. JustifiedInfiniteGrid is a grid that the item is filled up on the basis of a line given a size. * If 'data-grid-inline-offset' or 'data-grid-content-offset' are set for item element, the ratio is maintained except for the offset value. * If 'data-grid-maintained-target' is set for an element whose ratio is to be maintained, the item is rendered while maintaining the ratio of the element. * @ko 'justified'는 '1행의 너비에 맞게 꼭 들어찬'이라는 의미를 가진 인쇄 용어다. JustifiedInfiniteGrid는 용어의 의미대로 너비가 주어진 사이즈를 기준으로 아이템가 가득 차도록 배치하는 Grid다. * 아이템 엘리먼트에 'data-grid-inline-offset' 또는 'data-grid-content-offset'를 설정하면 offset 값을 제외하고 비율을 유지한다. * 비율을 유지하고 싶은 엘리먼트에 'data-grid-maintained-target'을 설정한다면 해당 엘리먼트의 비율을 유지하면서 아이템이 렌더링이 된다. * @param {HTMLElement | string} container - A base element for a module <ko>모듈을 적용할 기준 엘리먼트</ko> * @param {JustifiedInfiniteGridOptions} options - The option object of the JustifiedInfiniteGrid module <ko>JustifiedInfiniteGrid 모듈의 옵션 객체</ko> */ export declare class JustifiedInfiniteGrid extends InfiniteGrid<JustifiedInfiniteGridOptions> { static propertyTypes: { columnRange: import("@egjs/grid").PROPERTY_TYPE; rowRange: import("@egjs/grid").PROPERTY_TYPE; sizeRange: import("@egjs/grid").PROPERTY_TYPE; isCroppedSize: import("@egjs/grid").PROPERTY_TYPE; displayedRow: import("@egjs/grid").PROPERTY_TYPE; stretch: import("@egjs/grid").PROPERTY_TYPE; stretchRange: import("@egjs/grid").PROPERTY_TYPE; passUnstretchRow: import("@egjs/grid").PROPERTY_TYPE; inlineMargin: import("@egjs/grid").PROPERTY_TYPE; contentMargin: import("@egjs/grid").PROPERTY_TYPE; inlineOffset: import("@egjs/grid").PROPERTY_TYPE; contentOffset: import("@egjs/grid").PROPERTY_TYPE; gap: import("@egjs/grid").PROPERTY_TYPE; defaultDirection: import("@egjs/grid").PROPERTY_TYPE; renderOnPropertyChange: import("@egjs/grid").PROPERTY_TYPE; preserveUIOnDestroy: import("@egjs/grid").PROPERTY_TYPE; useFit: import("@egjs/grid").PROPERTY_TYPE; outlineSize: import("@egjs/grid").PROPERTY_TYPE; outlineLength: import("@egjs/grid").PROPERTY_TYPE; }; static defaultOptions: Required<JustifiedInfiniteGridOptions>; }