javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +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>; @Event() ionLoadingDidUnload: EventEmitter<LoadingEventDetail>;
@State() private showSpinner: boolean = null; @Prop() spinner: string;
@State() private spinner: string;
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController; @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
@Prop({ context: 'config' }) config: Config; @Prop({ context: 'config' }) config: Config;
@ -116,7 +115,7 @@ export class Loading {
/** /**
* Toggles whether animation should occur or not * Toggles whether animation should occur or not
*/ */
@Prop() animate: boolean; @Prop() animate: boolean = true;
/** /**
* Present a loading overlay after it has been created * Present a loading overlay after it has been created
@ -185,17 +184,7 @@ export class Loading {
componentDidLoad() { componentDidLoad() {
if (!this.spinner) { if (!this.spinner) {
let defaultSpinner = 'lines'; this.spinner = this.config.get('loadingSPinner', this.mode === 'ios' ? 'lines' : 'crescent');
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.ionLoadingDidLoad.emit(); this.ionLoadingDidLoad.emit();
} }
@ -238,11 +227,15 @@ export class Loading {
} }
render() { render() {
// TODO: cssClass if (this.cssClass) {
this.cssClass.split(' ').forEach(cssClass => {
if (cssClass.trim() !== '') this.el.classList.add(cssClass);
});
}
const loadingInner: any[] = []; const loadingInner: any[] = [];
if (this.showSpinner) { if (this.spinner !== 'hide') {
loadingInner.push( loadingInner.push(
<div class='loading-spinner'> <div class='loading-spinner'>
<ion-spinner name={this.spinner}></ion-spinner> <ion-spinner name={this.spinner}></ion-spinner>

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

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

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

@ -20,8 +20,9 @@
<ion-content padding> <ion-content padding>
<ion-button expand="block" onclick="presentLoading()" class="e2eShowLoading">Show Loading</ion-button> <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, 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: 2000, content: '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: 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-loading-controller></ion-loading-controller>
<ion-grid> <ion-grid>
@ -75,6 +76,9 @@
</script> </script>
<style> <style>
.custom-loading .loading-wrapper{
background: green;
}
f { f {
display: block; display: block;
background: blue; background: blue;