Skip to content

Commit

Permalink
add stretch option (#572)
Browse files Browse the repository at this point in the history 
* fix: fix loading & infoBy consts

* fix: fix useRoundedSize

* demo: add `stretch` demo

* fix: fix vue3 package dependencies

* fix: fix rendererd visible items for no useRecycle

* feat: add part scroll

* fix: fix grid version

* test: fix type

* fix: fix types
  • Loading branch information
@daybrush
daybrush authored Jul 2, 2024
1 parent add5361 commit a5d5773
Show file tree
Hide file tree
Showing 82 changed files with 1,298 additions and 72 deletions.
4 changes: 4 additions & 0 deletions packages/docs/docs/api/FrameInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);

<p>When the data request is complete, it is set to ready state.</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||<p></p>|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/docs/api/InfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -505,6 +505,10 @@ ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);

<p>When the data request is complete, it is set to ready state.</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||<p></p>|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/docs/api/JustifiedInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);

<p>When the data request is complete, it is set to ready state.</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||<p></p>|

### isWait {#isWait}

<div>
Expand Down
6 changes: 6 additions & 0 deletions packages/docs/docs/api/JustifiedInfiniteGridOptions.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,14 @@ custom_edit_url: null
|columnRange|number \| number[]|[1, 8]|<p>The minimum and maximum number of items per line.<br /></p>|
|rowRange|number \| number[]|0|<p>The minimum and maximum number of rows in a group, 0 is not set.<br /></p>|
|sizeRange|number \| number[]|[0, Infinity]|<p>The minimum and maximum size by which the item is adjusted. If it is not calculated, it may deviate from the minimum and maximum sizes.<br /></p>|
|stretch|boolean|false|<p>아이템의 inlineSize를 stretch 할지 여부</p>|
|stretchRange|Array&lt;string \| number&gt;|["-10%", "+10%"]|<p>string 값으로 <code>-</code>, <code>+</code>, <code>%</code>이 붙으면 원본 크기에 대한 상대값이며 number 값으로 들어오면 절대 값으로 stretch 범위를 설정할 수 있습니다.<br />낱개로 설정하고 싶다면 각 Element 또는 JSX로 data-grid-min-stretch=&quot;-10%&quot;, data-grid-max-stretch=&quot;+10%&quot;로 설정할 수 있다.</p>|
|passUnstretchRow|boolean||<p>마지막 열에 stretch 범위에 벗어난 경우 다음 InfiniteGrid</p>|
|displayedRow|number|-1|<p>Maximum number of rows to be counted for container size. You can hide it on the screen by setting overflow: hidden. -1 is not set.<br /></p>|
|isCroppedSize|boolean|false|<p>Whether to crop when the row size is out of sizeRange. If set to true, this ratio can be broken.<br /></p>|
|contentMargin|number||<p>test contentMargin</p>|
|inlineOffset|number||<p>test inlineOffset</p>|
|contentOffset|number||<p>test contentOffset</p>|
|horizontal|boolean|false|<p>Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, <code>inlinePos</code> is left, <code>inlineSize</code> is width, <code>contentPos</code> is top, and <code>contentSize</code> is height. If horizontal is true, <code>inlinePos</code> is top, <code>inlineSize</code> is height, <code>contentPos</code> is left, and <code>contentSize</code> is width.<br /></p>|
|percentage|Array&lt;"position" \| "size"&gt; \| boolean|false|<p>Whether to set the css size and position of the item to %.<br /></p>|
|isEqualSize|boolean|false|<p>Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to &quot;true&quot;, the performance of layout arrangement can be improved.<br /></p>|
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/docs/api/MasonryInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);

<p>When the data request is complete, it is set to ready state.</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||<p></p>|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/docs/api/PackingInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);

<p>When the data request is complete, it is set to ready state.</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||<p></p>|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions ...s/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/FrameInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ InfiniteGrid의 보이는 그룹들을 반환한다.

데이터 요청이 끝났다면 준비 상태로 설정한다.

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||데이터가 존재하지 않으면 loading bar를 즉시 제거 한다.|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/InfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -505,6 +505,10 @@ InfiniteGrid의 보이는 그룹들을 반환한다.

데이터 요청이 끝났다면 준비 상태로 설정한다.

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||데이터가 존재하지 않으면 loading bar를 즉시 제거 한다.|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions ...cs/i18n/ko/docusaurus-plugin-content-docs/current/api/JustifiedInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ InfiniteGrid의 보이는 그룹들을 반환한다.

데이터 요청이 끝났다면 준비 상태로 설정한다.

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||데이터가 존재하지 않으면 loading bar를 즉시 제거 한다.|

### isWait {#isWait}

<div>
Expand Down
6 changes: 6 additions & 0 deletions .../ko/docusaurus-plugin-content-docs/current/api/JustifiedInfiniteGridOptions.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,14 @@ custom_edit_url: null
|columnRange|number \| number[]|[1, 8]| 한 줄에 들어가는 아이템의 최소, 최대 개수.|
|rowRange|number \| number[]|0| 한 그룹에 들어가는 행의 최소, 최대 개수, 0은 미설정이다.|
|sizeRange|number \| number[]|[0, Infinity]|아이템이 조정되는 최소, 최대 사이즈. 계산이 되지 않는 경우 최소, 최대 사이즈를 벗어날 수 있다.|
|stretch|boolean|false|<p>아이템의 inlineSize를 stretch 할지 여부</p>|
|stretchRange|Array&lt;string \| number&gt;|["-10%", "+10%"]|<p>string 값으로 <code>-</code>, <code>+</code>, <code>%</code>이 붙으면 원본 크기에 대한 상대값이며 number 값으로 들어오면 절대 값으로 stretch 범위를 설정할 수 있습니다.<br />낱개로 설정하고 싶다면 각 Element 또는 JSX로 data-grid-min-stretch=&quot;-10%&quot;, data-grid-max-stretch=&quot;+10%&quot;로 설정할 수 있다.</p>|
|passUnstretchRow|boolean||<p>마지막 열에 stretch 범위에 벗어난 경우 다음 InfiniteGrid</p>|
|displayedRow|number|-1|컨테이너 크기에 계산될 최대 row 개수. overflow: hidden을 설정하면 화면에 가릴 수 있다. -1은 미설정이다.|
|isCroppedSize|boolean|false|row사이즈가 sizeRange에 벗어나면 크롭할지 여부. true로 설정하면 비율이 깨질 수 있다.|
|contentMargin|number||<p>test contentMargin</p>|
|inlineOffset|number||<p>test inlineOffset</p>|
|contentOffset|number||<p>test contentOffset</p>|
|horizontal|boolean|false|스크롤 이동 방향. (true: 가로방향, false: 세로방향) horizontal이 false 면 <code>inlinePos</code>는 left, <code>inlineSize</code>는 width, <code>contentPos</code>는 top, <code>contentSize</code>는 height다. horizontal이 true면 <code>inlinePos</code>는 top, <code>inlineSize</code>는 height, <code>contentPos</code>는 left, <code>contentSize</code>는 width이다.|
|percentage|Array&lt;"position" \| "size"&gt; \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
|isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
Expand Down
4 changes: 4 additions & 0 deletions ...docs/i18n/ko/docusaurus-plugin-content-docs/current/api/MasonryInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ InfiniteGrid의 보이는 그룹들을 반환한다.

데이터 요청이 끝났다면 준비 상태로 설정한다.

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||데이터가 존재하지 않으면 loading bar를 즉시 제거 한다.|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions ...docs/i18n/ko/docusaurus-plugin-content-docs/current/api/PackingInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ InfiniteGrid의 보이는 그룹들을 반환한다.

데이터 요청이 끝났다면 준비 상태로 설정한다.

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||데이터가 존재하지 않으면 loading bar를 즉시 제거 한다.|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions ...i18n/ko/docusaurus-plugin-content-docs/version-4.11.1/api/FrameInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ InfiniteGrid의 보이는 그룹들을 반환한다.

데이터 요청이 끝났다면 준비 상태로 설정한다.

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||데이터가 존재하지 않으면 loading bar를 즉시 제거 한다.|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions ...docs/i18n/ko/docusaurus-plugin-content-docs/version-4.11.1/api/InfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -505,6 +505,10 @@ InfiniteGrid의 보이는 그룹들을 반환한다.

데이터 요청이 끝났다면 준비 상태로 설정한다.

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||데이터가 존재하지 않으면 loading bar를 즉시 제거 한다.|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions .../ko/docusaurus-plugin-content-docs/version-4.11.1/api/JustifiedInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ InfiniteGrid의 보이는 그룹들을 반환한다.

데이터 요청이 끝났다면 준비 상태로 설정한다.

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||데이터가 존재하지 않으면 loading bar를 즉시 제거 한다.|

### isWait {#isWait}

<div>
Expand Down
6 changes: 6 additions & 0 deletions ...usaurus-plugin-content-docs/version-4.11.1/api/JustifiedInfiniteGridOptions.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,14 @@ custom_edit_url: null
|columnRange|number \| number[]|[1, 8]| 한 줄에 들어가는 아이템의 최소, 최대 개수.|
|rowRange|number \| number[]|0| 한 그룹에 들어가는 행의 최소, 최대 개수, 0은 미설정이다.|
|sizeRange|number \| number[]|[0, Infinity]|아이템이 조정되는 최소, 최대 사이즈. 계산이 되지 않는 경우 최소, 최대 사이즈를 벗어날 수 있다.|
|stretch|boolean|false|<p>아이템의 inlineSize를 stretch 할지 여부</p>|
|stretchRange|Array&lt;string \| number&gt;|["-10%", "+10%"]|<p>string 값으로 <code>-</code>, <code>+</code>, <code>%</code>이 붙으면 원본 크기에 대한 상대값이며 number 값으로 들어오면 절대 값으로 stretch 범위를 설정할 수 있습니다.<br />낱개로 설정하고 싶다면 각 Element 또는 JSX로 data-grid-min-stretch=&quot;-10%&quot;, data-grid-max-stretch=&quot;+10%&quot;로 설정할 수 있다.</p>|
|passUnstretchRow|boolean||<p>마지막 열에 stretch 범위에 벗어난 경우 다음 InfiniteGrid</p>|
|displayedRow|number|-1|컨테이너 크기에 계산될 최대 row 개수. overflow: hidden을 설정하면 화면에 가릴 수 있다. -1은 미설정이다.|
|isCroppedSize|boolean|false|row사이즈가 sizeRange에 벗어나면 크롭할지 여부. true로 설정하면 비율이 깨질 수 있다.|
|contentMargin|number||<p>test contentMargin</p>|
|inlineOffset|number||<p>test inlineOffset</p>|
|contentOffset|number||<p>test contentOffset</p>|
|horizontal|boolean|false|스크롤 이동 방향. (true: 가로방향, false: 세로방향) horizontal이 false 면 <code>inlinePos</code>는 left, <code>inlineSize</code>는 width, <code>contentPos</code>는 top, <code>contentSize</code>는 height다. horizontal이 true면 <code>inlinePos</code>는 top, <code>inlineSize</code>는 height, <code>contentPos</code>는 left, <code>contentSize</code>는 width이다.|
|percentage|Array&lt;"position" \| "size"&gt; \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
|isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
Expand Down
4 changes: 4 additions & 0 deletions ...8n/ko/docusaurus-plugin-content-docs/version-4.11.1/api/MasonryInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ InfiniteGrid의 보이는 그룹들을 반환한다.

데이터 요청이 끝났다면 준비 상태로 설정한다.

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||데이터가 존재하지 않으면 loading bar를 즉시 제거 한다.|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions ...8n/ko/docusaurus-plugin-content-docs/version-4.11.1/api/PackingInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ InfiniteGrid의 보이는 그룹들을 반환한다.

데이터 요청이 끝났다면 준비 상태로 설정한다.

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||데이터가 존재하지 않으면 loading bar를 즉시 제거 한다.|

### isWait {#isWait}

<div>
Expand Down
10 changes: 9 additions & 1 deletion packages/docs/src/component/grids/JustifiedInfiniteGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,24 @@ const Item = ({ num }: any) => <div className="item" style={{
<div className="info">{`egjs ${num}`}</div>
</div>;

export default function App() {
export default function App(props: Record<string, any>) {
const [items, setItems] = React.useState(() => getItems(0, 10));

const extraProps = props.stretch ? {
stretch: true,
passUnstretchRow: true,
sizeRange: [228, 228],
stretchRange: [144, 320],
} : {};

return <JustifiedInfiniteGrid
className="container"
style={{
height: "500px",
}}
container={true}
gap={5}
{...extraProps}
onRequestAppend={(e) => {
const nextGroupKey = (+e.groupKey! || 0) + 1;

Expand Down
15 changes: 15 additions & 0 deletions packages/docs/src/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,10 +88,25 @@ html[data-theme='dark'] .main-icon {
}


.item .info {
display: flex;
align-items: center;
font-weight: bold;
color: #777;
height: 30px;
}
.item .thumbnail {
overflow: hidden;
border-radius: 8px;
font-size: 0;
height: calc(100% - 30px);
}
.item .thumbnail img {
width: 100%;
height: 100%;
border-radius: 8px;
background: #eee;
object-fit: contain;
}

.placeholder {
Expand Down
21 changes: 21 additions & 0 deletions packages/docs/src/pages/Guides.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,27 @@ MasonryInfiniteGrid is a grid that stacks items with the same width as a stack o
hasMaintained={true}
/>


### JustifiedInfiniteGrid (Stretch)
`stretch` is possible to basically break the proportion of the item and stretch the inline size to fill the container. If you set the `sizeRange` range narrowly, you can stretch well.

* `stretchRange`: If `-`, `+`, or `%` are added as a string value, it is a relative value to the original size. If it is a number value, the stretch range can be set as an absolute value. If `data-grid-min-stretch` and `data-grid-max-stretch` are set in the Element or JSX of each item, they will be applied first.
* `passUnstretchRow`: Items placed in the last row are not stretched and are drawn maintaining their proportions. When using InfiniteGrid, it is calculated and re-rendered as follows:


<JustifiedInfiniteGrid stretch={true} />

<InfiniteGridDefaultCode
className="JustifiedInfiniteGrid"
options={{
gap: 5,
stretch: true,
passUnstretchRow: true,
sizeRange: [228, 228],
stretchRange: [144, 320],
}}
/>

### FrameInfiniteGrid
'Frame' is a printing term with the meaning that 'it fits in one row wide'. FrameGrid is a grid that the item is filled up on the basis of a line given a size.

Expand Down
4 changes: 4 additions & 0 deletions packages/docs/versioned_docs/version-4.11.1/api/FrameInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);

<p>When the data request is complete, it is set to ready state.</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||<p></p>|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/versioned_docs/version-4.11.1/api/InfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -505,6 +505,10 @@ ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);

<p>When the data request is complete, it is set to ready state.</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||<p></p>|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/versioned_docs/version-4.11.1/api/JustifiedInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);

<p>When the data request is complete, it is set to ready state.</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||<p></p>|

### isWait {#isWait}

<div>
Expand Down
6 changes: 6 additions & 0 deletions packages/docs/versioned_docs/version-4.11.1/api/JustifiedInfiniteGridOptions.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,14 @@ custom_edit_url: null
|columnRange|number \| number[]|[1, 8]|<p>The minimum and maximum number of items per line.<br /></p>|
|rowRange|number \| number[]|0|<p>The minimum and maximum number of rows in a group, 0 is not set.<br /></p>|
|sizeRange|number \| number[]|[0, Infinity]|<p>The minimum and maximum size by which the item is adjusted. If it is not calculated, it may deviate from the minimum and maximum sizes.<br /></p>|
|stretch|boolean|false|<p>아이템의 inlineSize를 stretch 할지 여부</p>|
|stretchRange|Array&lt;string \| number&gt;|["-10%", "+10%"]|<p>string 값으로 <code>-</code>, <code>+</code>, <code>%</code>이 붙으면 원본 크기에 대한 상대값이며 number 값으로 들어오면 절대 값으로 stretch 범위를 설정할 수 있습니다.<br />낱개로 설정하고 싶다면 각 Element 또는 JSX로 data-grid-min-stretch=&quot;-10%&quot;, data-grid-max-stretch=&quot;+10%&quot;로 설정할 수 있다.</p>|
|passUnstretchRow|boolean||<p>마지막 열에 stretch 범위에 벗어난 경우 다음 InfiniteGrid</p>|
|displayedRow|number|-1|<p>Maximum number of rows to be counted for container size. You can hide it on the screen by setting overflow: hidden. -1 is not set.<br /></p>|
|isCroppedSize|boolean|false|<p>Whether to crop when the row size is out of sizeRange. If set to true, this ratio can be broken.<br /></p>|
|contentMargin|number||<p>test contentMargin</p>|
|inlineOffset|number||<p>test inlineOffset</p>|
|contentOffset|number||<p>test contentOffset</p>|
|horizontal|boolean|false|<p>Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, <code>inlinePos</code> is left, <code>inlineSize</code> is width, <code>contentPos</code> is top, and <code>contentSize</code> is height. If horizontal is true, <code>inlinePos</code> is top, <code>inlineSize</code> is height, <code>contentPos</code> is left, and <code>contentSize</code> is width.<br /></p>|
|percentage|Array&lt;"position" \| "size"&gt; \| boolean|false|<p>Whether to set the css size and position of the item to %.<br /></p>|
|isEqualSize|boolean|false|<p>Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to &quot;true&quot;, the performance of layout arrangement can be improved.<br /></p>|
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/versioned_docs/version-4.11.1/api/MasonryInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);

<p>When the data request is complete, it is set to ready state.</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||<p></p>|

### isWait {#isWait}

<div>
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/versioned_docs/version-4.11.1/api/PackingInfiniteGrid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,10 @@ ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);

<p>When the data request is complete, it is set to ready state.</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|hasNoData|boolean|✔️||<p></p>|

### isWait {#isWait}

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/infinitegrid/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@
"@cfcs/core": "^0.0.5",
"@egjs/children-differ": "^1.0.1",
"@egjs/component": "^3.0.0",
"@egjs/grid": "^1.15.0",
"@egjs/grid": "~1.16.0",
"@egjs/list-differ": "^1.0.0"
}
}
Loading

0 comments on commit a5d5773

Please sign in to comment.