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

fix(overlay): expose "animated" API

Browse Source 
fixes #14775
This commit is contained in:
Manu Mtz.-Almeida
2018-08-26 18:52:22 +02:00
parent 771857b1df
commit 8b768fb73d
34 changed files with 122 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/loading/loading-interface.ts
View File

@ -1,9 +1,11 @@
import { SpinnerTypes } from '../../interface';
export interface LoadingOptions {
spinner?: string;
content?: string;
spinner?: SpinnerTypes;
message?: string;
cssClass?: string | string[];
showBackdrop?: boolean;
duration?: number;
translucent?: boolean;
animated?: boolean;
}

6
core/src/components/loading/loading.tsx
View File

@ -46,7 +46,7 @@ export class Loading implements OverlayInterface {
/**
* Optional text content to display in the loading indicator.
*/
@Prop() content?: string;
@Prop() message?: string;
/**
* Additional classes to apply for custom CSS. If multiple classes are
@ -83,7 +83,7 @@ export class Loading implements OverlayInterface {
/**
* If true, the loading indicator will animate. Defaults to `true`.
*/
@Prop() willAnimate = true;
@Prop() animated = true;
/**
* Emitted after the loading has unloaded.
@ -205,7 +205,7 @@ export class Loading implements OverlayInterface {
</div>
)}
{this.content && <div class="loading-content">{this.content}</div>}
{this.message && <div class="loading-content">{this.message}</div>}
</div>
];
}

4
core/src/components/loading/readme.md
View File

@ -20,18 +20,18 @@ The loading indicator can be dismissed automatically after a specific amount of
| Property | Attribute | Description | Type |
| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| `animated` | `animated` | If true, the loading indicator will animate. Defaults to `true`. | `boolean` |
| `backdropDismiss` | `backdrop-dismiss` | If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`. | `boolean` |
| `content` | `content` | Optional text content to display in the loading indicator. | `string` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` |
| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` |
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `AnimationBuilder` |
| `keyboardClose` | `keyboard-close` | If true, the loading will blur any inputs and hide the keyboard | `boolean` |
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `AnimationBuilder` |
| `message` | `message` | Optional text content to display in the loading indicator. | `string` |
| `overlayId` | `overlay-id` | | `number` |
| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`. | `boolean` |
| `spinner` | `spinner` | The name of the spinner to display. Possible values are: `"lines"`, `"lines-small"`, `"dots"`, `"bubbles"`, `"circles"`, `"crescent"`. | `string` |
| `translucent` | `translucent` | If true, the loading indicator will be translucent. Defaults to `false`. | `boolean` |
| `willAnimate` | `will-animate` | If true, the loading indicator will animate. Defaults to `true`. | `boolean` |
## Events

2
core/src/components/loading/test/basic/index.html
View File

@ -65,7 +65,7 @@
const loadingController = document.querySelector('ion-loading-controller');
await loadingController.componentOnReady();
const loadingElement = await loadingController.create({
content: 'Hellooo',
message: 'Hellooo',
duration: 2000
});
return await loadingElement.present();

2
core/src/components/loading/test/preview/index.html
View File

@ -65,7 +65,7 @@
const loadingController = document.querySelector('ion-loading-controller');
await loadingController.componentOnReady();
const loadingElement = await loadingController.create({
content: 'Hellooo',
message: 'Hellooo',
duration: 2000
});
return await loadingElement.present();

2
core/src/components/loading/test/standalone/index.html
View File

@ -37,7 +37,7 @@
const loadingController = document.querySelector('ion-loading-controller');
await loadingController.componentOnReady();
const loadingElement = await loadingController.create({
content: 'Hellooo',
message: 'Hellooo',
duration: 2000
});
return await loadingElement.present();

4
core/src/components/loading/usage/angular.md
View File

@ -12,7 +12,7 @@ export class LoadingExample {
async presentLoading() {
const loading = await this.loadingController.create({
content: 'Hellooo',
message: 'Hellooo',
duration: 2000
});
return await loading.present();
@ -22,7 +22,7 @@ export class LoadingExample {
const loading = await this.loadingController.create({
spinner: 'hide',
duration: 5000,
content: 'Please wait...',
message: 'Please wait...',
translucent: true,
cssClass: 'custom-class custom-loading'
});

4
core/src/components/loading/usage/javascript.md
View File

@ -4,7 +4,7 @@ async function presentLoading() {
await loadingController.componentOnReady();
const loading = await loadingController.create({
content: 'Hellooo',
message: 'Hellooo',
duration: 2000
});
return await loading.present();
@ -17,7 +17,7 @@ async function presentLoadingWithOptions() {
const loading = await loadingController.create({
spinner: 'hide',
duration: 5000,
content: 'Please wait...',
message: 'Please wait...',
translucent: true,
cssClass: 'custom-class custom-loading'
});