Migration Guide from v3 to v4
Changed Usage
Double options are combined into one option.
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Svelte
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
const ig = new MasonryInfiniteGrid(".container", {
attributePrefix: "data-grid-",
column: 5,
});
ig.renderItems();
import { MasonryInfiniteGrid } from "@egjs/react-infinitegrid";
<MasonryInfiniteGrid
attributePrefix={"data-grid-"}
column={5}
>
...
</MasonryInfiniteGrid>
<template>
<MasonryInfiniteGrid
attributePrefix="data-grid-"
v-bind:column="5">
...
</MasonryInfiniteGrid>
</template>
<script>
import { MasonryInfiniteGrid } from "@egjs/vue-infinitegrid";
export default {
components: {
MasonryInfiniteGrid,
},
};
</script>
<template>
<MasonryInfiniteGrid
attributePrefix="data-grid-"
v-bind:column="5">
...
</MasonryInfiniteGrid>
</template>
<script>
import { MasonryInfiniteGrid } from "@egjs/vue3-infinitegrid";
export default {
components: {
MasonryInfiniteGrid,
},
};
</script>
<div NgxMasonryInfiniteGrid
[gap]="5"
attributePrefix="data-grid-"
>
...
</div>
<script>
import { MasonryInfiniteGrid } from "@egjs/svelte-infinitegrid";
</script>
<MasonryInfiniteGrid
gap={5}
attributePrefix={"data-grid-"}
>
...
</MasonryInfiniteGrid>
HTML structure
- The option called
isOverflowScrollis renamedcontainer. - If you set the
containeroption to true, a container is created inside the wrapper.- The class name of container has been changed from
_eg-infinitegrid-container_toinfinitegrid-container
- The class name of container has been changed from
<body>
<div class="wrapper">
<div class="infinitegrid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</div>
</body>
const ig = new InfiniteGrid(".container", {
container: true,
});
Changes when using umd modules
- We've removed
egnamespace on umd modules.eg.InfiniteGridis now justInfiniteGrid
Changed module names
| From | To |
|---|---|
| GridLayout | MasonryInfiniteGrid |
| JustifiedLayout | JustifiedInfiniteGrid |
| FrameLayout | FrameInfiniteGrid |
| SquareLayout | Integration into MasonryInfiniteGrid |
| PackingLayout | PackingInfiniteGrid |
Changed Options
- Default value of attributePrefix is now
data-grid-(wasdata-) - The option called
marginis renamedgap. - The option called
isOverflowScrollis renamedcontainer.
Changed Events
- The event called
appendis renamedrequestAppend. - The event called
prependis renamedrequestPrepend. - The event called
layoutCompleteis renamedrenderComplete. - The event called
changeis renamedchangeScroll. - The event called
imageErroris renamedcontentError.
Changed Methods
- The method called
layoutis renamedrenderItems. - The method
getItems(true)can be used asgetItems(). - The method
getItems(false)can be used asgetVisibleItems(). - The usage of the
getStatusmethod has changed.getStatus(STATUS_TYPE.NOT_REMOVE)(default) gets all infosgetStatus(STATUS_TYPE.REMOVE_INVISIBLE_GROUPS)gets visible infosgetStatus(STATUS.MINIMIZE_INVISIBLE_ITEMS)gets visible infos. However, the information is simplified for invisible items.getStatus(STATUS.MINIMIZE_INVISIBLE_GROUPS)gets visible infos. However, invisible items are removed and only the outline remains.
Removed Options
- The option called
transitionDurationis removed.- Use CSS. See Guides
Removed Methods
- The method called
startLoadingis removed.- Use a method called
waitinstead.
- Use a method called
- The method called
endLoadingis removed.- Automatically check whether loading is ended.
- The method called
isLoadingis removed.- Use a method called
isWaitinstead.
- Use a method called
- The method called
isProcessingis removed.