mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
docs(refresher): update refresher and refresher-content docs
also moves the basic test to the correct directory
This commit is contained in:
Brandy Carney
@@ -1,30 +1,20 @@
|
||||
# ion-refresher-content
|
||||
|
||||
By default, Ionic provides the pulling icon and refreshing spinner that looks
|
||||
best for the platform the user is on. However, you can change the default icon
|
||||
and spinner, along with adding text for each state by adding properties to the
|
||||
child `ion-refresher-content` component.
|
||||
The refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic provides the pulling icon and refreshing spinner based on the platform. However, the default icon, spinner, and text can be customized based on the state of the refresher.
|
||||
|
||||
```html
|
||||
<ion-content>
|
||||
|
||||
<ion-refresher>
|
||||
<ion-refresher slot="fixed">
|
||||
<ion-refresher-content
|
||||
pullingIcon="arrow-dropdown"
|
||||
pullingText="Pull to refresh"
|
||||
refreshingSpinner="circles"
|
||||
refreshingText="Refreshing...">
|
||||
pulling-icon="arrow-dropdown"
|
||||
pulling-text="Pull to refresh"
|
||||
refreshing-spinner="circles"
|
||||
refreshing-text="Refreshing...">
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
</ion-content>
|
||||
```
|
||||
|
||||
The `ion-refresher` component holds the refresh logic. It requires a child
|
||||
component in order to display the content. Ionic uses `ion-refresher-content` by
|
||||
default. This component displays the refresher and changes the look depending on
|
||||
the refresher's state. Separating these components allows developers to create
|
||||
their own refresher content components. You could replace our default content
|
||||
with custom SVG or CSS animations.
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
@@ -1,13 +1,22 @@
|
||||
# ion-refresher-content
|
||||
The Refresher provides pull-to-refresh functionality on a content component.
|
||||
Place the `ion-refresher` as the first child of your `ion-content` element.
|
||||
# ion-refresher
|
||||
|
||||
Pages can then listen to the refresher's various output events. The `refresh`
|
||||
output event is fired when the user has pulled down far enough to kick off the
|
||||
refreshing process. Once the async operation has completed and the refreshing
|
||||
should end, call `complete()`.
|
||||
The refresher provides pull-to-refresh functionality on a content component.
|
||||
The pull-to-refresh pattern lets a user pull down on a list of data using touch
|
||||
in order to retrieve more data.
|
||||
|
||||
Data should be modified during the refresher's output events. Once the async
|
||||
operation has completed and the refreshing should end, call `complete()` on the
|
||||
refresher.
|
||||
|
||||
|
||||
```html
|
||||
<ion-content>
|
||||
<ion-refresher slot="fixed">
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
</ion-content>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@@ -19,38 +28,38 @@ should end, call `complete()`.
|
||||
|
||||
string
|
||||
|
||||
Time it takes to close the refresher. Default is `280ms`.
|
||||
Time it takes to close the refresher. Defaults to `280ms`.
|
||||
|
||||
|
||||
#### enabled
|
||||
#### disabled
|
||||
|
||||
boolean
|
||||
|
||||
If the refresher is enabled or not. This should be used in place of an `ngIf`. Default is `true`.
|
||||
If the refresher is disabled or not. Defaults to `true`.
|
||||
|
||||
|
||||
#### pullDelta
|
||||
#### pullMax
|
||||
|
||||
number
|
||||
any
|
||||
|
||||
The maximum distance of the pull until the refresher
|
||||
will automatically go into the `refreshing` state. By default, the pull
|
||||
maximum will be the result of `pullMin + 60`.
|
||||
will automatically go into the `refreshing` state.
|
||||
Defaults to the result of `pullMin + 60`.
|
||||
|
||||
|
||||
#### pullMin
|
||||
|
||||
number
|
||||
|
||||
The min distance the user must pull down until the
|
||||
refresher can go into the `refreshing` state. Default is `60`.
|
||||
The minimum distance the user must pull down until the
|
||||
refresher will go into the `refreshing` state. Defaults to `60`.
|
||||
|
||||
|
||||
#### snapbackDuration
|
||||
|
||||
string
|
||||
|
||||
Time it takes the refresher to to snap back to the `refreshing` state. Default is `280ms`.
|
||||
Time it takes the refresher to to snap back to the `refreshing` state. Defaults to `280ms`.
|
||||
|
||||
|
||||
## Attributes
|
||||
@@ -59,38 +68,38 @@ Time it takes the refresher to to snap back to the `refreshing` state. Default i
|
||||
|
||||
string
|
||||
|
||||
Time it takes to close the refresher. Default is `280ms`.
|
||||
Time it takes to close the refresher. Defaults to `280ms`.
|
||||
|
||||
|
||||
#### enabled
|
||||
#### disabled
|
||||
|
||||
boolean
|
||||
|
||||
If the refresher is enabled or not. This should be used in place of an `ngIf`. Default is `true`.
|
||||
If the refresher is disabled or not. Defaults to `true`.
|
||||
|
||||
|
||||
#### pullDelta
|
||||
#### pullMax
|
||||
|
||||
number
|
||||
any
|
||||
|
||||
The maximum distance of the pull until the refresher
|
||||
will automatically go into the `refreshing` state. By default, the pull
|
||||
maximum will be the result of `pullMin + 60`.
|
||||
will automatically go into the `refreshing` state.
|
||||
Defaults to the result of `pullMin + 60`.
|
||||
|
||||
|
||||
#### pullMin
|
||||
|
||||
number
|
||||
|
||||
The min distance the user must pull down until the
|
||||
refresher can go into the `refreshing` state. Default is `60`.
|
||||
The minimum distance the user must pull down until the
|
||||
refresher will go into the `refreshing` state. Defaults to `60`.
|
||||
|
||||
|
||||
#### snapbackDuration
|
||||
|
||||
string
|
||||
|
||||
Time it takes the refresher to to snap back to the `refreshing` state. Default is `280ms`.
|
||||
Time it takes the refresher to to snap back to the `refreshing` state. Defaults to `280ms`.
|
||||
|
||||
|
||||
## Events
|
||||
@@ -102,10 +111,10 @@ Emitted while the user is pulling down the content and exposing the refresher.
|
||||
|
||||
#### ionRefresh
|
||||
|
||||
Emitted when the user lets go and has pulled down
|
||||
far enough, which would be farther than the `pullMin`, then your refresh hander if
|
||||
fired and the state is updated to `refreshing`. From within your refresh handler,
|
||||
you must call the `complete()` method when your async operation has completed.
|
||||
Emitted when the user lets go of the content and has pulled down
|
||||
further than the `pullMin` or pulls the content down and exceeds the pullMax.
|
||||
Updates the refresher state to `refreshing`. The `complete()` method should be
|
||||
called when the async operation has completed.
|
||||
|
||||
|
||||
#### ionStart
|
||||
|
||||
19
packages/core/src/components/refresher/test/basic/e2e.js
Normal file
19
packages/core/src/components/refresher/test/basic/e2e.js
Normal file
@@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/refresher/test/basic?ionicplatform=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('refresher/basic', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ionic Item Sliding</title>
|
||||
<title>Refresher - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
@@ -14,13 +14,17 @@
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Ionic CDN demo</ion-title>
|
||||
<ion-title>Pull To Refresh</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher id="refresher" enabled="true" slot="fixed">
|
||||
<ion-refresher-content></ion-refresher-content>
|
||||
<ion-refresher id="refresher" disabled="false" slot="fixed">
|
||||
<ion-refresher-content
|
||||
pulling-text="Pull to refresh..."
|
||||
refreshing-spinner="bubbles"
|
||||
refreshing-text="Refreshing...">
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
|
||||
<ion-list id="list"></ion-list>
|
||||
Reference in New Issue
Block a user