mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
fix(spinner): render properly and return mode defaults
closes ionic-team/stencil#90
This commit is contained in:
Brandy Carney
@ -4,6 +4,99 @@ import { Config } from '../../index';
|
||||
import { SPINNERS, SpinnerConfig } from './spinner-configs';
|
||||
|
||||
|
||||
/**
|
||||
* @name Spinner
|
||||
* @description
|
||||
* The `ion-spinner` component provides a variety of animated SVG spinners.
|
||||
* Spinners enables you to give users feedback that the app is actively
|
||||
* processing/thinking/waiting/chillin’ out, or whatever you’d like it to indicate.
|
||||
* By default, the `ion-refresher` feature uses this spinner component while it's
|
||||
* the refresher is in the `refreshing` state.
|
||||
*
|
||||
* Ionic offers a handful of spinners out of the box, and by default, it will use
|
||||
* the appropriate spinner for the platform on which it’s running.
|
||||
*
|
||||
* <table class="table spinner-table">
|
||||
* <tr>
|
||||
* <th>
|
||||
* <code>lines</code>
|
||||
* </th>
|
||||
* <td>
|
||||
* <ion-spinner name="lines"></ion-spinner>
|
||||
* </td>
|
||||
* </tr>
|
||||
* <tr>
|
||||
* <th>
|
||||
* <code>lines-small</code>
|
||||
* </th>
|
||||
* <td>
|
||||
* <ion-spinner name="lines-small"></ion-spinner>
|
||||
* </td>
|
||||
* </tr>
|
||||
* <tr>
|
||||
* <th>
|
||||
* <code>bubbles</code>
|
||||
* </th>
|
||||
* <td>
|
||||
* <ion-spinner name="bubbles"></ion-spinner>
|
||||
* </td>
|
||||
* </tr>
|
||||
* <tr>
|
||||
* <th>
|
||||
* <code>circles</code>
|
||||
* </th>
|
||||
* <td>
|
||||
* <ion-spinner name="circles"></ion-spinner>
|
||||
* </td>
|
||||
* </tr>
|
||||
* <tr>
|
||||
* <th>
|
||||
* <code>crescent</code>
|
||||
* </th>
|
||||
* <td>
|
||||
* <ion-spinner name="crescent"></ion-spinner>
|
||||
* </td>
|
||||
* </tr>
|
||||
* <tr>
|
||||
* <th>
|
||||
* <code>dots</code>
|
||||
* </th>
|
||||
* <td>
|
||||
* <ion-spinner name="dots"></ion-spinner>
|
||||
* </td>
|
||||
* </tr>
|
||||
* </table>
|
||||
*
|
||||
* @usage
|
||||
* The following code would use the default spinner for the platform it's
|
||||
* running from. If it's neither iOS or Android, it'll default to use `ios`.
|
||||
*
|
||||
* ```html
|
||||
* <ion-spinner></ion-spinner>
|
||||
* ```
|
||||
*
|
||||
* By setting the `name` property, you can specify which predefined spinner to
|
||||
* use, no matter what the platform is.
|
||||
*
|
||||
* ```html
|
||||
* <ion-spinner name="bubbles"></ion-spinner>
|
||||
* ```
|
||||
*
|
||||
* ## Styling SVG with CSS
|
||||
* One cool thing about SVG is its ability to be styled with CSS! One thing to note
|
||||
* is that some of the CSS properties on an SVG element have different names. For
|
||||
* example, SVG uses the term `stroke` instead of `border`, and `fill` instead
|
||||
* of `background-color`.
|
||||
*
|
||||
* ```css
|
||||
* ion-spinner * {
|
||||
* width: 28px;
|
||||
* height: 28px;
|
||||
* stroke: #444;
|
||||
* fill: #222;
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
@Component({
|
||||
tag: 'ion-spinner',
|
||||
styleUrls: {
|
||||
@ -20,39 +113,62 @@ export class Spinner {
|
||||
color: string;
|
||||
|
||||
@Prop({ context: 'config' }) config: Config;
|
||||
@Prop() duration: number = null;
|
||||
|
||||
/**
|
||||
* @input {string} How long it takes it to do one loop.
|
||||
*/
|
||||
@Prop() duration: number;
|
||||
|
||||
/**
|
||||
* @input {string} SVG spinner name.
|
||||
*/
|
||||
@Prop() name: string;
|
||||
|
||||
/**
|
||||
* @input {boolean} If true, pause the animation.
|
||||
*/
|
||||
@Prop() paused: boolean = false;
|
||||
|
||||
|
||||
ionViewDidLoad() {
|
||||
if (this.name === 'ios') {
|
||||
private getName(): string {
|
||||
let name = this.name || this.config.get('spinner');
|
||||
if (!name) {
|
||||
// fallback
|
||||
if (this.mode === 'md') {
|
||||
return 'crescent';
|
||||
} else if (this.mode === 'wp') {
|
||||
return 'circles';
|
||||
} else {
|
||||
return 'lines';
|
||||
}
|
||||
}
|
||||
if (name === 'ios') {
|
||||
// deprecation warning, renamed in v4
|
||||
console.warn(`spinner "ios" has been renamed to "lines"`);
|
||||
|
||||
} else if (this.name === 'ios-small') {
|
||||
name = 'lines';
|
||||
} else if (name === 'ios-small') {
|
||||
// deprecation warning, renamed in v4
|
||||
console.warn(`spinner "ios-small" has been renamed to "lines-sm"`);
|
||||
name = 'lines-sm';
|
||||
}
|
||||
return name;
|
||||
}
|
||||
|
||||
hostData() {
|
||||
const themedClasses = createThemedClasses(this.mode, this.color, `spinner spinner-${this.name}`);
|
||||
themedClasses['spinner-paused'] = true;
|
||||
const themedClasses = createThemedClasses(this.mode, this.color, `spinner spinner-${this.getName()}`);
|
||||
|
||||
const spinnerClasses = {
|
||||
...themedClasses,
|
||||
'spinner-paused': this.paused
|
||||
}
|
||||
|
||||
return {
|
||||
class: themedClasses
|
||||
class: spinnerClasses
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
let name = this.name || this.config.get('spinner', 'lines');
|
||||
if (name === 'ios') {
|
||||
name = this.name = 'lines';
|
||||
|
||||
} else if (this.name === 'ios-small') {
|
||||
name = this.name = 'lines-sm';
|
||||
}
|
||||
const name = this.getName();
|
||||
|
||||
const spinner = SPINNERS[name] || SPINNERS['lines'];
|
||||
|
||||
@ -83,19 +199,11 @@ function buildCircle(spinner: SpinnerConfig, duration: number, index: number, to
|
||||
const data = spinner.fn(duration, index, total);
|
||||
data.style.animationDuration = duration + 'ms';
|
||||
|
||||
return h('svg', {
|
||||
attrs: {
|
||||
'viewBox': '0 0 64 64'
|
||||
},
|
||||
style: data.style
|
||||
},
|
||||
h('circle', {
|
||||
attrs: {
|
||||
'r': data.r,
|
||||
'transform': 'translate(32,32)'
|
||||
}
|
||||
})
|
||||
);
|
||||
return (
|
||||
<svg viewBox='0 0 64 64' style={data.style}>
|
||||
<circle transform="translate(32,32)" r={data.r}></circle>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -103,18 +211,9 @@ function buildLine(spinner: SpinnerConfig, duration: number, index: number, tota
|
||||
const data = spinner.fn(duration, index, total);
|
||||
data.style.animationDuration = duration + 'ms';
|
||||
|
||||
return h('svg', {
|
||||
attrs: {
|
||||
'viewBox': '0 0 64 64'
|
||||
},
|
||||
style: data.style
|
||||
},
|
||||
h('line', {
|
||||
attrs: {
|
||||
'y1': data.y1,
|
||||
'y2': data.y2,
|
||||
'transform': 'translate(32,32)'
|
||||
}
|
||||
})
|
||||
);
|
||||
return (
|
||||
<svg viewBox='0 0 64 64' style={data.style}>
|
||||
<line transform="translate(32,32)" y1={data.y1} y2={data.y2}></line>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,11 +2,51 @@
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ionic Buttons</title>
|
||||
<title>Ionic Spinners</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 name="bubbles"></ion-spinner>
|
||||
<ion-app>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
Spinner Loading Indicators
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start"></ion-spinner>
|
||||
Show Default Spinner
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" name="lines"></ion-spinner>
|
||||
Show Lines
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" name="ios-small"></ion-spinner>
|
||||
Show Lines Small
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" name="dots"></ion-spinner>
|
||||
Show Dots
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" name="bubbles"></ion-spinner>
|
||||
Show Bubbles
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" name="circles"></ion-spinner>
|
||||
Show Circles
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" name="crescent"></ion-spinner>
|
||||
Show Crescent
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-spinner slot="start" paused></ion-spinner>
|
||||
Show Paused Default Spinner
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user