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
isOverflowScroll
is renamedcontainer
. - If you set the
container
option 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
eg
namespace on umd modules.eg.InfiniteGrid
is 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
margin
is renamedgap
. - The option called
isOverflowScroll
is renamedcontainer
.
Changed Events
- The event called
append
is renamedrequestAppend
. - The event called
prepend
is renamedrequestPrepend
. - The event called
layoutComplete
is renamedrenderComplete
. - The event called
change
is renamedchangeScroll
. - The event called
imageError
is renamedcontentError
.
Changed Methods
- The method called
layout
is renamedrenderItems
. - The method
getItems(true)
can be used asgetItems()
. - The method
getItems(false)
can be used asgetVisibleItems()
. - The usage of the
getStatus
method 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
transitionDuration
is removed.- Use CSS. See Guides
Removed Methods
- The method called
startLoading
is removed.- Use a method called
wait
instead.
- Use a method called
- The method called
endLoading
is removed.- Automatically check whether loading is ended.
- The method called
isLoading
is removed.- Use a method called
isWait
instead.
- Use a method called
- The method called
isProcessing
is removed.