javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-24 06:22:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(loading): animate by default

Browse Source
This commit is contained in:
mhartington
2017-12-04 13:56:48 -05:00
parent 4ec864ea86
commit 75424ba809
4 changed files with 407 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1008
packages/core/src/components.d.ts vendored
View File

File diff suppressed because it is too large Load Diff

25
packages/core/src/components/loading/loading.tsx
View File

@ -67,8 +67,7 @@ export class Loading {
*/
@Event() ionLoadingDidUnload: EventEmitter<LoadingEventDetail>;
@State() private showSpinner: boolean = null;
@State() private spinner: string;
@Prop() spinner: string;
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
@Prop({ context: 'config' }) config: Config;
@ -116,7 +115,7 @@ export class Loading {
/**
* Toggles whether animation should occur or not
*/
@Prop() animate: boolean;
@Prop() animate: boolean = true;
/**
* Present a loading overlay after it has been created
@ -185,17 +184,7 @@ export class Loading {
componentDidLoad() {
if (!this.spinner) {
let defaultSpinner = 'lines';
if (this.mode === 'md') {
defaultSpinner = 'crescent';
}
this.spinner = this.config.get('loadingSpinner') || defaultSpinner;
}
if (this.showSpinner === null || this.showSpinner === undefined) {
this.showSpinner = !!(this.spinner && this.spinner !== 'hide');
this.spinner = this.config.get('loadingSPinner', this.mode === 'ios' ? 'lines' : 'crescent');
}
this.ionLoadingDidLoad.emit();
}
@ -238,11 +227,15 @@ export class Loading {
}
render() {
// TODO: cssClass
if (this.cssClass) {
this.cssClass.split(' ').forEach(cssClass => {
if (cssClass.trim() !== '') this.el.classList.add(cssClass);
});
}
const loadingInner: any[] = [];
if (this.showSpinner) {
if (this.spinner !== 'hide') {
loadingInner.push(
<div class='loading-spinner'>
<ion-spinner name={this.spinner}></ion-spinner>

10
packages/core/src/components/loading/readme.md
View File

@ -47,6 +47,11 @@ any
boolean
#### spinner
string
#### translucent
boolean
@ -94,6 +99,11 @@ any
boolean
#### spinner
string
#### translucent
boolean

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

@ -20,8 +20,9 @@
<ion-content padding>
<ion-button expand="block" onclick="presentLoading()" class="e2eShowLoading">Show Loading</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Loading Please Wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, message: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</ion-button>
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
<ion-loading-controller></ion-loading-controller>
<ion-grid>
@ -75,6 +76,9 @@
</script>
<style>
.custom-loading .loading-wrapper{
background: green;
}
f {
display: block;
background: blue;