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

docs(stencil): add stencil usage to components (#21261)

Browse Source
This commit is contained in:
Brandy Carney
2020-05-12 20:35:48 -04:00
committed by GitHub
parent 703ef5c992
commit 687122127c
177 changed files with 11207 additions and 897 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
core/src/components/infinite-scroll/readme.md
View File

@ -115,6 +115,88 @@ function toggleInfiniteScroll() {
```
### Stencil
```tsx
import { Component, State, h } from '@stencil/core';
@Component({
tag: 'infinite-scroll-example',
styleUrl: 'infinite-scroll-example.css'
})
export class InfiniteScrollExample {
private infiniteScroll: HTMLIonInfiniteScrollElement;
@State() data = [];
componentWillLoad() {
this.pushData();
}
pushData() {
const max = this.data.length + 20;
const min = max - 20;
for (var i = min; i < max; i++) {
this.data.push('Item ' + i);
}
// Stencil does not re-render when pushing to an array
// so create a new copy of the array
// https://stenciljs.com/docs/reactive-data#handling-arrays-and-objects
this.data = [
...this.data
];
}
loadData(ev) {
setTimeout(() => {
this.pushData();
console.log('Loaded data');
ev.target.complete();
// App logic to determine if all data is loaded
// and disable the infinite scroll
if (this.data.length == 1000) {
ev.target.disabled = true;
}
}, 500);
}
toggleInfiniteScroll() {
this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
}
render() {
return [
<ion-content>
<ion-button onClick={() => this.toggleInfiniteScroll()} expand="block">
Toggle Infinite Scroll
</ion-button>
<ion-list>
{this.data.map(item =>
<ion-item>
<ion-label>{item}</ion-label>
</ion-item>
)}
</ion-list>
<ion-infinite-scroll
ref={el => this.infiniteScroll = el}
onIonInfinite={(ev) => this.loadData(ev)}>
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
];
}
}
```
## Properties

78
core/src/components/infinite-scroll/usage/stencil.md Normal file
View File

@ -0,0 +1,78 @@
```tsx
import { Component, State, h } from '@stencil/core';
@Component({
tag: 'infinite-scroll-example',
styleUrl: 'infinite-scroll-example.css'
})
export class InfiniteScrollExample {
private infiniteScroll: HTMLIonInfiniteScrollElement;
@State() data = [];
componentWillLoad() {
this.pushData();
}
pushData() {
const max = this.data.length + 20;
const min = max - 20;
for (var i = min; i < max; i++) {
this.data.push('Item ' + i);
}
// Stencil does not re-render when pushing to an array
// so create a new copy of the array
// https://stenciljs.com/docs/reactive-data#handling-arrays-and-objects
this.data = [
...this.data
];
}
loadData(ev) {
setTimeout(() => {
this.pushData();
console.log('Loaded data');
ev.target.complete();
// App logic to determine if all data is loaded
// and disable the infinite scroll
if (this.data.length == 1000) {
ev.target.disabled = true;
}
}, 500);
}
toggleInfiniteScroll() {
this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
}
render() {
return [
<ion-content>
<ion-button onClick={() => this.toggleInfiniteScroll()} expand="block">
Toggle Infinite Scroll
</ion-button>
<ion-list>
{this.data.map(item =>
<ion-item>
<ion-label>{item}</ion-label>
</ion-item>
)}
</ion-list>
<ion-infinite-scroll
ref={el => this.infiniteScroll = el}
onIonInfinite={(ev) => this.loadData(ev)}>
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
];
}
}
```