Skip to content

docs(virtual-scroll): remove virtual scroll component #2507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 24, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions docs/angular/virtual-scroll.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
# Virtual Scroll

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.
:::caution Looking for `ion-virtual-scroll`?

## Setup
`ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below.

:::

## Installation

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

Expand Down
303 changes: 0 additions & 303 deletions docs/api/virtual-scroll.md

This file was deleted.

16 changes: 7 additions & 9 deletions docs/react/virtual-scroll.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# Virtual Scroll

:::caution Looking for `ion-virtual-scroll`?

`ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Virtuoso package detailed below.

:::

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.

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

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`.

## A Note on 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.

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.
Expand All @@ -66,9 +66,7 @@ For example:
```tsx
<IonPage>
<IonContent scrollY={false}>
<Virtuoso className="ion-content-scroll-host">
{/* Your existing content and configurations */}
</Virtuoso>
<Virtuoso className="ion-content-scroll-host">{/* Your existing content and configurations */}</Virtuoso>
</IonContent>
</IonPage>
```
Expand Down
6 changes: 5 additions & 1 deletion docs/vue/virtual-scroll.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
# Virtual Scroll

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.
:::caution Looking for `ion-virtual-scroll`?

`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.

:::

## Installation

Expand Down
2 changes: 1 addition & 1 deletion sidebars.js
Original file line number Diff line number Diff line change
Expand Up @@ -344,7 +344,7 @@ module.exports = {
type: 'category',
label: 'List',
collapsed: false,
items: ['api/list', 'api/list-header', 'api/virtual-scroll'],
items: ['api/list', 'api/list-header'],
},
{
type: 'category',
Expand Down