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

fix(spinner): init spinner styling

Browse Source
This commit is contained in:
Adam Bradley
2017-08-03 23:50:10 -05:00
parent 5bdc184695
commit c3c3cc811e
3 changed files with 76 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/core/src/components/spinner/spinner.tsx
View File

@ -10,12 +10,15 @@ import { SPINNERS, SpinnerConfig } from './spinner-configs';
ios: 'spinner.ios.scss',
md: 'spinner.md.scss',
wp: 'spinner.wp.scss'
},
host: {
theme: 'spinner'
}
})
export class Spinner {
mode: string;
color: string;
@Prop() mode: string;
@Prop() color: string;
@Prop() duration: number = null;
@Prop() name: string;
@Prop() paused: boolean = false;

12
packages/core/src/components/spinner/test/basic.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic Buttons</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-spinner></ion-spinner>
</body>
</html>

59
packages/core/src/components/spinner/test/color.html Normal file
View File

@ -0,0 +1,59 @@
<ion-header>
<ion-toolbar>
<ion-title>Spinners</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<table style="border-collapse:initial; border-spacing: 20px">
<tr>
<td>Platform Default</td>
<td>
<ion-spinner color="primary" [paused]="paused"></ion-spinner>
</td>
</tr>
<tr>
<td>ios</td>
<td>
<ion-spinner color="secondary" name="ios" duration="1000" [paused]="paused"></ion-spinner>
</td>
</tr>
<tr>
<td>ios-small</td>
<td>
<ion-spinner color="danger" name="ios-small" duration="1000" [paused]="paused"></ion-spinner>
</td>
</tr>
<tr>
<td>bubbles</td>
<td>
<ion-spinner color="light" name="bubbles" [paused]="paused"></ion-spinner>
</td>
</tr>
<tr>
<td>circles</td>
<td>
<ion-spinner color="secondary" name="circles" [paused]="paused"></ion-spinner>
</td>
</tr>
<tr>
<td>crescent</td>
<td>
<ion-spinner color="primary" name="crescent" [paused]="paused"></ion-spinner>
</td>
</tr>
<tr>
<td>dots</td>
<td>
<ion-spinner color="danger" name="dots" [paused]="paused"></ion-spinner>
</td>
</tr>
</table>
<ion-button (click)="toggleState()">Toggle Paused</ion-button>
</ion-content>