javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 01:52:19 +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);
}
:host(.spinner-paused) svg {
animation-play-state: paused;
}
// Spinner: lines / lines-small
// --------------------------------------------------
@ -96,6 +92,14 @@ svg {
}
// Spinner: paused
// --------------------------------------------------
:host(.spinner-paused) svg {
animation-play-state: paused;
}
// Animation Keyframes
// --------------------------------------------------

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

@ -73,7 +73,7 @@ export class Spinner {
...createColorClasses(this.color),
[`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-item>
<ion-spinner slot="start"></ion-spinner>
Show Default Spinner
Default Spinner
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines"></ion-spinner>
Show Lines
Lines
</ion-item>
<ion-item>
<ion-spinner slot="start" name="lines-small"></ion-spinner>
Show Lines Small
Lines Small
</ion-item>
<ion-item>
<ion-spinner slot="start" name="dots"></ion-spinner>
Show Dots
Dots
</ion-item>
<ion-item>
<ion-spinner slot="start" name="bubbles"></ion-spinner>
Show Bubbles
Bubbles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="circles"></ion-spinner>
Show Circles
Circles
</ion-item>
<ion-item>
<ion-spinner slot="start" name="crescent"></ion-spinner>
Show Crescent
Crescent
</ion-item>
</ion-list>
<ion-list>
<ion-item>
<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-list>
</ion-content>