javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(spinner): get paused attribute working and update tests

Browse Source 
fixes #14811
This commit is contained in:
Brandy Carney
2018-07-20 16:11:20 -04:00
parent ba30671599
commit 3ab1e2dc46
3 changed files with 44 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/src/components/spinner/spinner.scss
View File

@ -26,10 +26,6 @@ svg {
transform: translateZ(0); transform: translateZ(0);
} }
:host(.spinner-paused) svg {
animation-play-state: paused;
}
// Spinner: lines / lines-small // Spinner: lines / lines-small
// -------------------------------------------------- // --------------------------------------------------
@ -96,6 +92,14 @@ svg {
} }
// Spinner: paused
// --------------------------------------------------
:host(.spinner-paused) svg {
animation-play-state: paused;
}
// Animation Keyframes // Animation Keyframes
// -------------------------------------------------- // --------------------------------------------------

2
core/src/components/spinner/spinner.tsx
View File

@ -73,7 +73,7 @@ export class Spinner {
...createColorClasses(this.color), ...createColorClasses(this.color),
[`spinner-${this.getName()}`]: true, [`spinner-${this.getName()}`]: true,
'spinner-paused': this.paused 'spinner-paused': !!this.paused
} }
}; };
} }

43
core/src/components/spinner/test/basic/index.html
View File

@ -25,35 +25,62 @@
</ion-list-header> </ion-list-header>
<ion-item> <ion-item>
<ion-spinner slot="start"></ion-spinner> <ion-spinner slot="start"></ion-spinner>
Show Default Spinner Default Spinner
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-spinner slot="start" name="lines"></ion-spinner> <ion-spinner slot="start" name="lines"></ion-spinner>
Show Lines Lines
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-spinner slot="start" name="lines-small"></ion-spinner> <ion-spinner slot="start" name="lines-small"></ion-spinner>
Show Lines Small Lines Small
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-spinner slot="start" name="dots"></ion-spinner> <ion-spinner slot="start" name="dots"></ion-spinner>
Show Dots Dots
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-spinner slot="start" name="bubbles"></ion-spinner> <ion-spinner slot="start" name="bubbles"></ion-spinner>
Show Bubbles Bubbles
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-spinner slot="start" name="circles"></ion-spinner> <ion-spinner slot="start" name="circles"></ion-spinner>
Show Circles Circles
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-spinner slot="start" name="crescent"></ion-spinner> <ion-spinner slot="start" name="crescent"></ion-spinner>
Show Crescent Crescent
</ion-item> </ion-item>
</ion-list>
<ion-list>
<ion-item> <ion-item>
<ion-spinner slot="start" paused></ion-spinner> <ion-spinner slot="start" paused></ion-spinner>
Show Paused Default Spinner Paused Default Spinner
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines" paused></ion-spinner>
Paused Lines
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines-small" paused></ion-spinner>
Paused Lines Small
</ion-item>
<ion-item>
<ion-spinner slot="start" name="dots" paused></ion-spinner>
Paused Dots
</ion-item>
<ion-item>
<ion-spinner slot="start" name="bubbles" paused></ion-spinner>
Paused Bubbles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="circles" paused></ion-spinner>
Paused Circles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="crescent" paused></ion-spinner>
Paused Crescent
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>