Skip to content

Commit c6f0735

Browse files
brandyscarneybrandyscarney
committed
docs(refresher): add new section for pull start and end events
1 parent 094d08f commit c6f0735

8 files changed

Lines changed: 469 additions & 2 deletions

File tree

‎docs/api/refresher.md‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,10 @@ Developers should apply the following CSS to the scrollable container. This CSS
7373
.ion-content-scroll-host::before,
7474
.ion-content-scroll-host::after {
7575
position: absolute;
76-
76+
7777
width: 1px;
7878
height: 1px;
79-
79+
8080
content: "";
8181
}
8282

@@ -102,6 +102,17 @@ import Advanced from '@site/static/usage/v8/refresher/advanced/index.md';
102102

103103
<Advanced />
104104

105+
## Event Handling
106+
107+
### Using `ionPullStart` and `ionPullEnd`
108+
109+
The `ionPullStart` event is emitted when the user begins a pull gesture. This event fires when the user starts to pull the refresher down.
110+
111+
The `ionPullEnd` event is emitted when the refresher returns to an inactive state, with a reason property of `'complete'` or `'cancel'` indicating whether the refresh operation completed successfully or was canceled.
112+
113+
import PullStartEndEvents from '@site/static/usage/v8/refresher/pull-start-end-events/index.md';
114+
115+
<PullStartEndEvents />
105116

106117
## Interfaces
107118

‎static/usage/v8/refresher/pull-start-end-events/angular/example_component_html.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
```html
2+
<ion-header>
3+
<ion-toolbar>
4+
<ion-title>Pull to Refresh</ion-title>
5+
</ion-toolbar>
6+
</ion-header>
7+
8+
<ion-content class="ion-padding">
9+
<ion-refresher
10+
id="refresher"
11+
slot="fixed"
12+
(ionPullStart)="handlePullStart()"
13+
(ionPullEnd)="handlePullEnd($event)"
14+
(ionRefresh)="handleRefresh($event)"
15+
>
16+
<ion-refresher-content></ion-refresher-content>
17+
</ion-refresher>
18+
19+
<p>Pull this content down to trigger the refresh.</p>
20+
21+
<ion-list lines="full">
22+
@for (item of items; track item; let i = $index) {
23+
<ion-item>
24+
<ion-checkbox slot="start" [checked]="item.checked" [disabled]="item.disabled"></ion-checkbox>
25+
<ion-label>{{ item.label }}</ion-label>
26+
</ion-item>
27+
}
28+
</ion-list>
29+
</ion-content>
30+
```

‎static/usage/v8/refresher/pull-start-end-events/angular/example_component_ts.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import {
4+
IonCheckbox,
5+
IonContent,
6+
IonHeader,
7+
IonItem,
8+
IonLabel,
9+
IonList,
10+
IonRefresher,
11+
IonRefresherContent,
12+
IonTitle,
13+
IonToolbar,
14+
RefresherCustomEvent,
15+
} from '@ionic/angular/standalone';
16+
// TODO: this needs to be exported by angular
17+
import { RefresherPullEndCustomEvent } from '@ionic/core';
18+
19+
@Component({
20+
selector: 'app-example',
21+
templateUrl: 'example.component.html',
22+
styleUrls: ['example.component.css'],
23+
imports: [
24+
IonCheckbox,
25+
IonContent,
26+
IonHeader,
27+
IonItem,
28+
IonLabel,
29+
IonList,
30+
IonRefresher,
31+
IonRefresherContent,
32+
IonTitle,
33+
IonToolbar,
34+
],
35+
})
36+
export class ExampleComponent {
37+
items = [
38+
{ label: 'Finalize Q1 budget proposal', checked: false, disabled: false },
39+
{ label: 'Review design mockups', checked: true, disabled: false },
40+
{ label: 'Sync with engineering on API docs', checked: true, disabled: false },
41+
{ label: 'Approve PTO requests for March', checked: false, disabled: false },
42+
{ label: 'Draft monthly newsletter', checked: false, disabled: false },
43+
];
44+
45+
constructor() {}
46+
47+
handlePullStart() {
48+
console.log('Pull started');
49+
50+
// Disable the checkboxes when the pull starts
51+
this.items.forEach((item) => {
52+
item.disabled = true;
53+
});
54+
}
55+
56+
handlePullEnd(event: RefresherPullEndCustomEvent) {
57+
console.log('Pull ended with reason: "' + event.detail.reason + '"');
58+
59+
// Enable the checkboxes when the pull starts
60+
this.items.forEach((item) => {
61+
item.disabled = false;
62+
});
63+
}
64+
65+
handleRefresh(event: RefresherCustomEvent) {
66+
setTimeout(() => {
67+
// Any calls to load data go here
68+
event.target.complete();
69+
console.log('Refresh completed');
70+
}, 2000);
71+
}
72+
}
73+
```

‎static/usage/v8/refresher/pull-start-end-events/demo.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Refresher</title>
7+
<link rel="stylesheet" href="../../common.css" />
8+
<script src="../../common.js"></script>
9+
<script
10+
type="module"
11+
src="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.19-dev.11772655618.1af0949f/dist/ionic/ionic.esm.js"
12+
></script>
13+
<link
14+
rel="stylesheet"
15+
href="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.19-dev.11772655618.1af0949f/css/ionic.bundle.css"
16+
/>
17+
</head>
18+
19+
<body>
20+
<ion-app>
21+
<ion-header>
22+
<ion-toolbar>
23+
<ion-title>Pull to Refresh</ion-title>
24+
</ion-toolbar>
25+
</ion-header>
26+
27+
<ion-content class="ion-padding">
28+
<ion-refresher id="refresher" slot="fixed">
29+
<ion-refresher-content></ion-refresher-content>
30+
</ion-refresher>
31+
32+
<p>Pull this content down to trigger the refresh.</p>
33+
34+
<ion-list lines="full">
35+
<ion-item>
36+
<ion-checkbox slot="start"></ion-checkbox>
37+
<ion-label>Finalize Q1 budget proposal</ion-label>
38+
</ion-item>
39+
<ion-item>
40+
<ion-checkbox slot="start" checked></ion-checkbox>
41+
<ion-label>Review design mockups</ion-label>
42+
</ion-item>
43+
<ion-item>
44+
<ion-checkbox slot="start" checked></ion-checkbox>
45+
<ion-label>Sync with engineering on API docs</ion-label>
46+
</ion-item>
47+
<ion-item>
48+
<ion-checkbox slot="start"></ion-checkbox>
49+
<ion-label>Approve PTO requests for March</ion-label>
50+
</ion-item>
51+
<ion-item>
52+
<ion-checkbox slot="start"></ion-checkbox>
53+
<ion-label>Draft monthly newsletter</ion-label>
54+
</ion-item>
55+
</ion-list>
56+
</ion-content>
57+
58+
<script>
59+
const refresher = document.getElementById('refresher');
60+
const checkboxes = document.querySelectorAll('ion-checkbox');
61+
62+
refresher.addEventListener('ionPullStart', () => {
63+
console.log('Pull started');
64+
// Disable the checkboxes when the pull starts
65+
checkboxes.forEach((checkbox) => {
66+
checkbox.disabled = true;
67+
});
68+
});
69+
70+
refresher.addEventListener('ionRefresh', () => {
71+
setTimeout(() => {
72+
// Any calls to load data go here
73+
refresher.complete();
74+
console.log('Refresh completed');
75+
}, 2000);
76+
});
77+
78+
refresher.addEventListener('ionPullEnd', (event) => {
79+
console.log('Pull ended with reason: "' + event.detail.reason + '"');
80+
// Enable the checkboxes when the pull ends
81+
checkboxes.forEach((checkbox) => {
82+
checkbox.disabled = false;
83+
});
84+
});
85+
</script>
86+
</ion-app>
87+
</body>
88+
</html>

‎static/usage/v8/refresher/pull-start-end-events/index.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
9+
10+
<Playground
11+
version="8"
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
23+
src="usage/v8/refresher/pull-start-end-events/demo.html"
24+
devicePreview={true}
25+
showConsole={true}
26+
includeIonContent={false}
27+
/>

‎static/usage/v8/refresher/pull-start-end-events/javascript.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
```html
2+
<ion-header>
3+
<ion-toolbar>
4+
<ion-title>Pull to Refresh</ion-title>
5+
</ion-toolbar>
6+
</ion-header>
7+
8+
<ion-content class="ion-padding">
9+
<ion-refresher id="refresher" slot="fixed">
10+
<ion-refresher-content></ion-refresher-content>
11+
</ion-refresher>
12+
13+
<p>Pull this content down to trigger the refresh.</p>
14+
15+
<ion-list lines="full">
16+
<ion-item>
17+
<ion-checkbox slot="start"></ion-checkbox>
18+
<ion-label>Finalize Q1 budget proposal</ion-label>
19+
</ion-item>
20+
<ion-item>
21+
<ion-checkbox slot="start" checked></ion-checkbox>
22+
<ion-label>Review design mockups</ion-label>
23+
</ion-item>
24+
<ion-item>
25+
<ion-checkbox slot="start" checked></ion-checkbox>
26+
<ion-label>Sync with engineering on API docs</ion-label>
27+
</ion-item>
28+
<ion-item>
29+
<ion-checkbox slot="start"></ion-checkbox>
30+
<ion-label>Approve PTO requests for March</ion-label>
31+
</ion-item>
32+
<ion-item>
33+
<ion-checkbox slot="start"></ion-checkbox>
34+
<ion-label>Draft monthly newsletter</ion-label>
35+
</ion-item>
36+
</ion-list>
37+
</ion-content>
38+
39+
<script>
40+
const refresher = document.getElementById('refresher');
41+
const checkboxes = document.querySelectorAll('ion-checkbox');
42+
43+
refresher.addEventListener('ionPullStart', () => {
44+
console.log('Pull started');
45+
// Disable the checkboxes when the pull starts
46+
checkboxes.forEach((checkbox) => {
47+
checkbox.disabled = true;
48+
});
49+
});
50+
51+
refresher.addEventListener('ionRefresh', () => {
52+
setTimeout(() => {
53+
// Any calls to load data go here
54+
refresher.complete();
55+
console.log('Refresh completed');
56+
}, 2000);
57+
});
58+
59+
refresher.addEventListener('ionPullEnd', (event) => {
60+
console.log('Pull ended with reason: "' + event.detail.reason + '"');
61+
// Enable the checkboxes when the pull ends
62+
checkboxes.forEach((checkbox) => {
63+
checkbox.disabled = false;
64+
});
65+
});
66+
</script>
67+
```

0 commit comments

Comments
 (0)