javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +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

52
core/src/components/refresher/readme.md
View File

@ -163,6 +163,58 @@ export const RefresherExample: React.FC = () => (
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'refresher-example',
styleUrl: 'refresher-example.css'
})
export class RefresherExample {
doRefresh(ev: any) {
console.log('Begin async operation');
setTimeout(() => {
console.log('Async operation has ended');
ev.target.complete();
}, 2000);
}
render() {
return [
// Default Refresher
<ion-content>
<ion-refresher slot="fixed" onIonRefresh={(ev) => this.doRefresh(ev)}>
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>,
// Custom Refresher Properties
<ion-content>
<ion-refresher slot="fixed" pullFactor={0.5} pullMin={100} pullMax={200}>
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>,
// Custom Refresher Content
<ion-content>
<ion-refresher slot="fixed" onIonRefresh={(ev) => this.doRefresh(ev)}>
<ion-refresher-content
pullingIcon="chevron-down-circle-outline"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
</ion-content>
];
}
}
```
### Vue
```html

48
core/src/components/refresher/usage/stencil.md Normal file
View File

@ -0,0 +1,48 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'refresher-example',
styleUrl: 'refresher-example.css'
})
export class RefresherExample {
doRefresh(ev: any) {
console.log('Begin async operation');
setTimeout(() => {
console.log('Async operation has ended');
ev.target.complete();
}, 2000);
}
render() {
return [
// Default Refresher
<ion-content>
<ion-refresher slot="fixed" onIonRefresh={(ev) => this.doRefresh(ev)}>
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>,
// Custom Refresher Properties
<ion-content>
<ion-refresher slot="fixed" pullFactor={0.5} pullMin={100} pullMax={200}>
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>,
// Custom Refresher Content
<ion-content>
<ion-refresher slot="fixed" onIonRefresh={(ev) => this.doRefresh(ev)}>
<ion-refresher-content
pullingIcon="chevron-down-circle-outline"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
</ion-content>
];
}
}
```