javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc(virtual-scroll): fix code examples from deprecated [virtualScroll] to [items] (#15130)

Browse Source
This commit is contained in:
Simon
2018-08-11 12:47:01 +02:00
committed by Manu MA
parent 575c5eb292
commit 35837c3fd8
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
core/src/components/virtual-scroll/readme.md
View File

@ -9,17 +9,17 @@ instead a small subset of records (enough to fill the viewport) are rendered
and reused as the user scrolls. and reused as the user scrolls.
### The Basics ### The Basics
The array of records should be passed to the `virtualScroll` property. The array of records should be passed to the `item` property on the `ion-virtual-scroll` element.
The data given to the `virtualScroll` property must be an array. An item The data given to the `item` property must be an array. An item
template with the `*virtualItem` property is required in the `virtualScroll`. template with the `*virtualItem` property is required in the `ion-virtual-scroll`.
The `virtualScroll` and `*virtualItem` properties can be added to any element. The `*virtualItem` property can be added to any element.
```html ```html
<ion-list [virtualScroll]="items"> <ion-virtual-scroll [items]="items">
<ion-item *virtualItem="let item"> <ion-item *virtualItem="let item">
{{ item }} {{ item }}
</ion-item> </ion-item>
</ion-list> </ion-virtual-scroll>
``` ```
### Section Headers and Footers ### Section Headers and Footers
@ -33,14 +33,14 @@ and what data to provide to the template. The custom function should
return `null` if a template shouldn't be created. return `null` if a template shouldn't be created.
```html ```html
<ion-list [virtualScroll]="items" [headerFn]="myHeaderFn"> <ion-virtual-scroll [items]="items" [headerFn]="myHeaderFn">
<ion-item-divider *virtualHeader="let header"> <ion-item-divider *virtualHeader="let header">
Header: {% raw %}{{ header }}{% endraw %} {{ header }}
</ion-item-divider> </ion-item-divider>
<ion-item *virtualItem="let item"> <ion-item *virtualItem="let item">
Item: {% raw %}{{ item }}{% endraw %} Item: {{ item }}
</ion-item> </ion-item>
</ion-list> </ion-virtual-scroll>
``` ```
Below is an example of a custom function called on every record. It Below is an example of a custom function called on every record. It
@ -99,12 +99,12 @@ renders whenever it wants which could be while the user is scrolling. However,
images while scrolling quickly. images while scrolling quickly.
```html ```html
<ion-list [virtualScroll]="items"> <ion-virtual-scroll [items]="items">
<ion-item *virtualItem="let item"> <ion-item *virtualItem="let item">
<ion-avatar item-start> <ion-avatar item-start>
<ion-img [src]="item.avatarUrl"></ion-img> <ion-img [src]="item.avatarUrl"></ion-img>
</ion-avatar> </ion-avatar>
{% raw %} {{ item.firstName }} {{ item.lastName }}{% endraw %} {{ item.firstName }} {{ item.lastName }}
</ion-item> </ion-item>
</ion-list> </ion-list>
``` ```
@ -118,10 +118,10 @@ quite different, wrapping within a `<div>` is a safe way to make sure
dimensions are measured correctly. dimensions are measured correctly.
```html ```html
<ion-list [virtualScroll]="items"> <ion-virtual-scroll [items]="items">
<div *virtualItem="let item"> <div *virtualItem="let item">
<my-custom-item [item]="item"> <my-custom-item [item]="item">
{% raw %} {{ item }}{% endraw %} {{ item }}
</my-custom-item> </my-custom-item>
</div> </div>
</ion-list> </ion-list>