diff --git a/packages/core/src/components/refresher-content/readme.md b/packages/core/src/components/refresher-content/readme.md index 1260de5d04..4b86bedf85 100644 --- a/packages/core/src/components/refresher-content/readme.md +++ b/packages/core/src/components/refresher-content/readme.md @@ -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 - - + + pulling-icon="arrow-dropdown" + pulling-text="Pull to refresh" + refreshing-spinner="circles" + refreshing-text="Refreshing..."> ``` -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. diff --git a/packages/core/src/components/refresher/readme.md b/packages/core/src/components/refresher/readme.md index ed6fa40074..f9d351b00e 100644 --- a/packages/core/src/components/refresher/readme.md +++ b/packages/core/src/components/refresher/readme.md @@ -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 + + + + + + +``` @@ -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 diff --git a/packages/core/src/components/refresher/test/basic/e2e.js b/packages/core/src/components/refresher/test/basic/e2e.js new file mode 100644 index 0000000000..e2d9c0bd1a --- /dev/null +++ b/packages/core/src/components/refresher/test/basic/e2e.js @@ -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(); + }); + }); +}); diff --git a/packages/core/src/components/refresher/test/basic.html b/packages/core/src/components/refresher/test/basic/index.html similarity index 81% rename from packages/core/src/components/refresher/test/basic.html rename to packages/core/src/components/refresher/test/basic/index.html index 0d5dd678d6..4ef095bdd4 100644 --- a/packages/core/src/components/refresher/test/basic.html +++ b/packages/core/src/components/refresher/test/basic/index.html @@ -3,7 +3,7 @@ - Ionic Item Sliding + Refresher - Basic @@ -14,13 +14,17 @@ - Ionic CDN demo + Pull To Refresh - - + + +