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

docs(react): update component usage docs (#17615)

Browse Source
This commit is contained in:
Josh Thomas
2019-02-26 08:54:01 -06:00
committed by GitHub
parent f44c17e03b
commit 22d1aeebaa
113 changed files with 7207 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -251,6 +251,76 @@ let rotateImg = 0;
```
### React
```tsx
import React from 'react';
import { IonContent, IonCard, IonCardHeader, IonCardTitle, IonVirtualScroll } from '@ionic/react';
let rotateImg = 0;
const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
const images = [
'bandit',
'batmobile',
'blues-brothers',
'bueller',
'delorean',
'eleanor',
'general-lee',
'ghostbusters',
'knight-rider',
'mirth-mobile'
];
function getImgSrc() {
const src = 'https://dummyimage.com/600x400/${Math.round( Math.random() * 99999)}/fff.png';
rotateImg++;
if (rotateImg === images.length) {
rotateImg = 0;
}
return src;
}
const items: any[] = [];
for (let i = 0; i < 1000; i++) {
items.push({
name: i + ' - ' + images[rotateImg],
imgSrc: getImgSrc(),
avatarSrc: getImgSrc(),
imgHeight: Math.floor(Math.random() * 50 + 150),
content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100)
});
rotateImg++;
if (rotateImg === images.length) {
rotateImg = 0;
}
}
const Example: React.SFC<{}> = () => (
<IonContent>
<IonVirtualScroll items="items" approxItemHeight="320px">
<IonCard virtualItem="let item; let itemBounds = bounds;">
<div>
<img src="item.imgSrc" height="item.imgHeight" alt="item.name" />
</div>
<IonCardHeader>
<IonCardTitle>{{ name }}</IonCardTitle>
</IonCardHeader>
<IonCardContent>{{ content }}</IonCardContent>
</IonCard>
</IonVirtualScroll>
</IonContent>
);
export default Example;
```
## Properties

66
core/src/components/virtual-scroll/usage/react.md Normal file
View File

@ -0,0 +1,66 @@
```tsx
import React from 'react';
import { IonContent, IonCard, IonCardHeader, IonCardTitle, IonVirtualScroll } from '@ionic/react';
let rotateImg = 0;
const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
const images = [
'bandit',
'batmobile',
'blues-brothers',
'bueller',
'delorean',
'eleanor',
'general-lee',
'ghostbusters',
'knight-rider',
'mirth-mobile'
];
function getImgSrc() {
const src = 'https://dummyimage.com/600x400/${Math.round( Math.random() * 99999)}/fff.png';
rotateImg++;
if (rotateImg === images.length) {
rotateImg = 0;
}
return src;
}
const items: any[] = [];
for (let i = 0; i < 1000; i++) {
items.push({
name: i + ' - ' + images[rotateImg],
imgSrc: getImgSrc(),
avatarSrc: getImgSrc(),
imgHeight: Math.floor(Math.random() * 50 + 150),
content: lorem.substring(0, Math.random() * (lorem.length - 100) + 100)
});
rotateImg++;
if (rotateImg === images.length) {
rotateImg = 0;
}
}
const Example: React.SFC<{}> = () => (
<IonContent>
<IonVirtualScroll items="items" approxItemHeight="320px">
<IonCard virtualItem="let item; let itemBounds = bounds;">
<div>
<img src="item.imgSrc" height="item.imgHeight" alt="item.name" />
</div>
<IonCardHeader>
<IonCardTitle>{{ name }}</IonCardTitle>
</IonCardHeader>
<IonCardContent>{{ content }}</IonCardContent>
</IonCard>
</IonVirtualScroll>
</IonContent>
);
export default Example;
```