Grid
class Grid extends eg.Component
constructor
new Grid(containerElement, options)
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| containerElement | HTMLElement | string | A base element for a module | ||
| options | Partial<Options> | ✔️ | {} | The option object of the Grid module |
Properties
gap
Gap used to create space around items.
Type: $ts:Grid.GridOptions["gap"]
Default: 0
import { MasonryGrid } from "@egjs/grid";
const grid = new MasonryGrid(container, {
gap: 0,
});
grid.gap = 5;
defaultDirection
The default direction value when direction is not set in the render option.
Type: $ts:Grid.GridOptions["defaultDirection"]
Default: "end"
import { MasonryGrid } from "@egjs/grid";
const grid = new MasonryGrid(container, {
defaultDirection: "end",
});
grid.defaultDirection = "start";
useFit
Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0. (default: true)
Type: $ts:Grid.GridOptions["useFit"]
Default: true
import { MasonryGrid } from "@egjs/grid";
const grid = new MasonryGrid(container, {
useFit: true,
});
grid.useFit = false;
preserveUIOnDestroy
Whether to preserve the UI of the existing container or item when destroying.
Type: $ts:Grid.GridOptions["preserveUIOnDestroy"]
Default: false
import { MasonryGrid } from "@egjs/grid";
const grid = new MasonryGrid(container, {
preserveUIOnDestroy: false,
});
grid.preserveUIOnDestroy = true;
outlineLength
The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
Type: $ts:Grid.GridOptions["outlineLength"]
Default: 0
import { MasonryGrid } from "@egjs/grid";
const grid = new MasonryGrid(container, {
outlineLength: 0,
outlineSize: 0,
});
grid.outlineLength = 3;
outlineSize
The size of the outline. If the outline size is 0, it is calculated according to the grid type.
Type: $ts:Grid.GridOptions["outlineSize"]
Default: 0
import { MasonryGrid } from "@egjs/grid";
const grid = new MasonryGrid(container, {
outlineLength: 0,
outlineSize: 0,
});
grid.outlineSize = 300;
Methods
applyGrid
Apply the CSS rect of items to fit the Grid and calculate the outline.
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| direcion | "start" | "end" | The direction to apply the Grid. ("end": start to end, "start": end to start) | ||
| outline | Array<number> | The start outline to apply the Grid. |
getContainerElement
Return Container Element.
Returns: HTMLElement
getItems
Return items.
Returns: GridItem[]
getChildren
Returns the children of the container element.
Returns: HTMLElement[]
setItems
Set items.
Returns: this
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| items | GridItem[] | The items to set. |
getContainerInlineSize
Gets the container's inline size. ("width" if horizontal is false, otherwise "height")
Returns: number
getOutlines
Returns the outlines of the start and end of the Grid.
Returns: GridOutlines
setOutlines
Set outlines.
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| outlines | GridOutlines | The outlines to set. |
syncElements
When elements change, it synchronizes and renders items.
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| options | RenderOptions | ✔️ | {} | Options for rendering. |
updateItems
Update the size of the items and render them.
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| items | GridItem[] | ✔️ | this.items | Items to be updated. |
| options | RenderOptions | ✔️ | {} | Options for rendering. |
renderItems
Rearrange items to fit the grid and render them. When rearrange is complete, the renderComplete event is fired.
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| options | RenderOptions | ✔️ | {} | Options for rendering. |
import { MasonryGrid } from "@egjs/grid";
const grid = new MasonryGrid();
grid.on("renderComplete", e => {
console.log(e);
});
grid.renderItems();
getStatus
Returns current status such as item's position, size. The returned status can be restored with the setStatus() method.
Returns: GridStatus
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| minimize | boolean | ✔️ | Whether to minimize the status of the item. (default: false) |
setStatus
Set status of the Grid module with the status returned through a call to the getStatus() method.
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| status | GridStatus |
getComputedOutlineSize
Get the inline size corresponding to outline.
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| items | GridItem[] | ✔️ | this.items | Items to get outline size. |
getComputedOutlineLength
Get the length corresponding to outline.
Returns: number
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| items | GridItem[] | ✔️ | this.items | Items to get outline length. |
destroy
Releases the instnace and events and returns the CSS of the container and elements.
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| Options | DestroyOptions | ✔️ | {} | for destroy. |
Events
contentError
This event is fired when an error occurs in the content.
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| e | Grid.OnContentError | The object of data to be sent to an event |
grid.on("contentError", e => {
e.update();
});
renderComplete
This event is fired when the Grid has completed rendering.
| PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
|---|---|---|---|---|
| e | Grid.OnRenderComplete | The object of data to be sent to an event |
grid.on("renderComplete", e => {
console.log(e.mounted, e.updated, e.useResize);
});