Skip to content

Commit 98aef26

Browse files
authored
docs(virtual-scroll): remove virtual scroll component (#2507)
1 parent 5e39452 commit 98aef26

File tree

5 files changed

+19
-316
lines changed

5 files changed

+19
-316
lines changed

docs/angular/virtual-scroll.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
# Virtual Scroll
22

3-
In the past, we have provided an `ion-virtual-scroll` component in Ionic Framework to help with list virtualization. At the time this was not available in Angular, but recently Angular has provided its own solution via the `@angular/cdk` package.
3+
:::caution Looking for `ion-virtual-scroll`?
44

5-
## Setup
5+
`ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below.
6+
7+
:::
8+
9+
## Installation
610

711
To setup the CDK Scroller, first install `@angular/cdk`:
812

docs/api/virtual-scroll.md

Lines changed: 0 additions & 303 deletions
This file was deleted.

docs/react/virtual-scroll.md

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Virtual Scroll
22

3+
:::caution Looking for `ion-virtual-scroll`?
4+
5+
`ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Virtuoso package detailed below.
6+
7+
:::
8+
39
One virtual scrolling solution to consider for your Ionic React app is [Virtuoso](https://virtuoso.dev/). This guide will go over how to install `Virtuoso` into your Ionic React application and use it with other Ionic components.
410

511
## Installation
@@ -51,12 +57,6 @@ From there, we can use the `itemContent` property to pass a function that will b
5157

5258
An important thing to note here is the `div` that wraps our `IonItem` component. When lazy loading Ionic components, there may be a few frames where the component is loaded but the styles have not loaded in. When this happens, the component's dimension will be `0`, and Virtuoso may throw an error. This is because Virtuoso needs distinct positions for each item it renders, and it cannot determine that when a component's dimension is `0`.
5359

54-
## A Note on Ionic Components
55-
56-
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.
57-
58-
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.
59-
6060
## Usage with Ionic Components
6161

6262
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.
@@ -66,9 +66,7 @@ For example:
6666
```tsx
6767
<IonPage>
6868
<IonContent scrollY={false}>
69-
<Virtuoso className="ion-content-scroll-host">
70-
{/* Your existing content and configurations */}
71-
</Virtuoso>
69+
<Virtuoso className="ion-content-scroll-host">{/* Your existing content and configurations */}</Virtuoso>
7270
</IonContent>
7371
</IonPage>
7472
```

docs/vue/virtual-scroll.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
# Virtual Scroll
22

3-
One virtual scrolling solution to consider for your Ionic Vue app is [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller/blob/next/packages/vue-virtual-scroller/README.md). This guide will go over how to install `vue-virtual-scroller` into your Ionic Vue application and use it with other Ionic components.
3+
:::caution Looking for `ion-virtual-scroll`?
4+
5+
`ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using a Vue library to accomplish this. We outline one approach using `vue-virtual-scroller` below.
6+
7+
:::
48

59
## Installation
610

sidebars.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -344,7 +344,7 @@ module.exports = {
344344
type: 'category',
345345
label: 'List',
346346
collapsed: false,
347-
items: ['api/list', 'api/list-header', 'api/virtual-scroll'],
347+
items: ['api/list', 'api/list-header'],
348348
},
349349
{
350350
type: 'category',

0 commit comments

Comments
 (0)