From 6f6cc5b5c174f3e8b97dc38e50ce2bb460c64754 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Tue, 15 Mar 2022 11:35:11 -0400 Subject: [PATCH 1/6] feat(virtual-scroll): usage with custom scroll target --- docs/angular/virtual-scroll.md | 14 +++++++++++--- docs/react/virtual-scroll.md | 14 ++++++++++++++ docs/vue/virtual-scroll.md | 14 +++++++++++--- 3 files changed, 36 insertions(+), 6 deletions(-) diff --git a/docs/angular/virtual-scroll.md b/docs/angular/virtual-scroll.md index 81389f5a4f5..4c39670fc05 100644 --- a/docs/angular/virtual-scroll.md +++ b/docs/angular/virtual-scroll.md @@ -110,11 +110,19 @@ cdk-virtual-scroll-viewport { Since the viewport is built to fit various use cases, the default sizing is not set and is up to developers to set. -## A Note on Ionic Components +## Usage with Ionic Components -Certain Ionic Framework functionality is currently not compatible with virtual scrolling. Features such as collapsible large titles, `ion-infinite-scroll`, and `ion-refresher` rely on being able to scroll on `ion-content` itself, and as a result will not work when using virtual scrolling. +Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll, `ion-refresher`and`ion-reorder-group`be used within an`ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. -We are working to improve compatibility between these components and virtual scrolling solutions. You can follow progress and give feedback here: https://github.com/ionic-team/ionic-framework/issues/23437. +For example: + +```html + + + + + +``` ## Further Reading diff --git a/docs/react/virtual-scroll.md b/docs/react/virtual-scroll.md index a895ebf7a09..338e8f55a0a 100644 --- a/docs/react/virtual-scroll.md +++ b/docs/react/virtual-scroll.md @@ -57,6 +57,20 @@ Certain Ionic Framework functionality is currently not compatible with virtual s We are working to improve compatibility between these components and virtual scrolling solutions. You can follow progress and give feedback here: https://github.com/ionic-team/ionic-framework/issues/23437. +## Usage with Ionic Components + +Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll, `ion-refresher`and`ion-reorder-group`be used within an`ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. + +For example: + +```tsx + + + // Your existing content and configurations + + +``` + ## Further Reading This guide only covers a small portion of what `Virtuoso` is capable of. For more details, please see the [Virtuoso documentation](https://virtuoso.dev/). diff --git a/docs/vue/virtual-scroll.md b/docs/vue/virtual-scroll.md index 2ae8ca78bc1..42223c54e3c 100644 --- a/docs/vue/virtual-scroll.md +++ b/docs/vue/virtual-scroll.md @@ -116,11 +116,19 @@ Now that our template is setup, we need to add some CSS to size the virtual scro } ``` -## A Note on Ionic Components +## Usage with Ionic Components -Certain Ionic Framework functionality is currently not compatible with virtual scrolling. Features such as collapsible large titles, `ion-infinite-scroll`, and `ion-refresher` rely on being able to scroll on `ion-content` itself, and as a result will not work when using virtual scrolling. +Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll, `ion-refresher`and`ion-reorder-group`be used within an`ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. -We are working to improve compatibility between these components and virtual scrolling solutions. You can follow progress and give feedback here: https://github.com/ionic-team/ionic-framework/issues/23437. +For example: + +```html + + + + + +``` ## Further Reading From 1a1c92dbee4200070643dcae93d10fbbc69aa6a3 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Wed, 16 Mar 2022 16:18:10 -0400 Subject: [PATCH 2/6] fix(): angular virtual scroll formatting Co-authored-by: Amanda Smith <90629384+amandaesmith3@users.noreply.github.com> --- docs/angular/virtual-scroll.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/angular/virtual-scroll.md b/docs/angular/virtual-scroll.md index 4c39670fc05..e104a846ab9 100644 --- a/docs/angular/virtual-scroll.md +++ b/docs/angular/virtual-scroll.md @@ -112,7 +112,7 @@ Since the viewport is built to fit various use cases, the default sizing is not ## Usage with Ionic Components -Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll, `ion-refresher`and`ion-reorder-group`be used within an`ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. +Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. For example: From 5a050c6699610ff384adc13cb23ab5f82ef9755d Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Wed, 16 Mar 2022 16:19:23 -0400 Subject: [PATCH 3/6] fix(): formatting --- docs/react/virtual-scroll.md | 2 +- docs/vue/virtual-scroll.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/virtual-scroll.md b/docs/react/virtual-scroll.md index 338e8f55a0a..da1a9114cba 100644 --- a/docs/react/virtual-scroll.md +++ b/docs/react/virtual-scroll.md @@ -59,7 +59,7 @@ We are working to improve compatibility between these components and virtual scr ## Usage with Ionic Components -Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll, `ion-refresher`and`ion-reorder-group`be used within an`ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. +Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. For example: diff --git a/docs/vue/virtual-scroll.md b/docs/vue/virtual-scroll.md index 42223c54e3c..bca211a6a90 100644 --- a/docs/vue/virtual-scroll.md +++ b/docs/vue/virtual-scroll.md @@ -118,7 +118,7 @@ Now that our template is setup, we need to add some CSS to size the virtual scro ## Usage with Ionic Components -Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll, `ion-refresher`and`ion-reorder-group`be used within an`ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. +Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. For example: From 5ca2841c708dd8a879f7d6cba008d04b9b7e65c8 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Wed, 16 Mar 2022 16:19:48 -0400 Subject: [PATCH 4/6] fix(): angular prop binding syntax --- docs/angular/virtual-scroll.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/angular/virtual-scroll.md b/docs/angular/virtual-scroll.md index e104a846ab9..0150d810162 100644 --- a/docs/angular/virtual-scroll.md +++ b/docs/angular/virtual-scroll.md @@ -117,7 +117,7 @@ Ionic Framework requires that features such as collapsible large titles, `ion-in For example: ```html - + From e2f3914fd91ec2c7ce65cd8fb06b150f7d05e973 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Wed, 16 Mar 2022 16:20:16 -0400 Subject: [PATCH 5/6] fix(): comment style Co-authored-by: Amanda Smith <90629384+amandaesmith3@users.noreply.github.com> --- docs/react/virtual-scroll.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/react/virtual-scroll.md b/docs/react/virtual-scroll.md index da1a9114cba..de6aa30a9d1 100644 --- a/docs/react/virtual-scroll.md +++ b/docs/react/virtual-scroll.md @@ -66,7 +66,9 @@ For example: ```tsx - // Your existing content and configurations + + {/* Your existing content and configurations */} + ``` From d8f9739ebe4a44e00437d5609041ab84bfa4fb02 Mon Sep 17 00:00:00 2001 From: Sean Perkins Date: Fri, 8 Apr 2022 11:42:26 -0400 Subject: [PATCH 6/6] docs(): update vue virtual scroll example --- docs/vue/virtual-scroll.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/vue/virtual-scroll.md b/docs/vue/virtual-scroll.md index bca211a6a90..47c3ebcf204 100644 --- a/docs/vue/virtual-scroll.md +++ b/docs/vue/virtual-scroll.md @@ -123,11 +123,15 @@ Ionic Framework requires that features such as collapsible large titles, `ion-in For example: ```html - - - - - + ``` ## Further Reading