mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +08:00
chore(packages): move the packages to root
This commit is contained in:
Brandy Carney
27
core/src/components/loading/animations/ios.enter.ts
Normal file
27
core/src/components/loading/animations/ios.enter.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { Animation } from '../../../index';
|
||||
|
||||
|
||||
/**
|
||||
* iOS Loading Enter Animation
|
||||
*/
|
||||
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
|
||||
const baseAnimation = new Animation();
|
||||
|
||||
const backdropAnimation = new Animation();
|
||||
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
|
||||
|
||||
const wrapperAnimation = new Animation();
|
||||
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
|
||||
|
||||
backdropAnimation.fromTo('opacity', 0.01, 0.3);
|
||||
|
||||
wrapperAnimation.fromTo('opacity', 0.01, 1)
|
||||
.fromTo('scale', 1.1, 1);
|
||||
|
||||
return Promise.resolve(baseAnimation
|
||||
.addElement(baseEl)
|
||||
.easing('ease-in-out')
|
||||
.duration(200)
|
||||
.add(backdropAnimation)
|
||||
.add(wrapperAnimation));
|
||||
}
|
||||
28
core/src/components/loading/animations/ios.leave.ts
Normal file
28
core/src/components/loading/animations/ios.leave.ts
Normal file
@ -0,0 +1,28 @@
|
||||
import { Animation } from '../../../index';
|
||||
|
||||
|
||||
/**
|
||||
* iOS Loading Leave Animation
|
||||
*/
|
||||
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
|
||||
const baseAnimation = new Animation();
|
||||
|
||||
const backdropAnimation = new Animation();
|
||||
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
|
||||
|
||||
const wrapperAnimation = new Animation();
|
||||
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
|
||||
|
||||
backdropAnimation.fromTo('opacity', 0.3, 0);
|
||||
|
||||
wrapperAnimation.fromTo('opacity', 0.99, 0)
|
||||
.fromTo('scale', 1, 0.9);
|
||||
|
||||
|
||||
return Promise.resolve(baseAnimation
|
||||
.addElement(baseEl)
|
||||
.easing('ease-in-out')
|
||||
.duration(200)
|
||||
.add(backdropAnimation)
|
||||
.add(wrapperAnimation));
|
||||
}
|
||||
25
core/src/components/loading/animations/md.enter.ts
Normal file
25
core/src/components/loading/animations/md.enter.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { Animation } from '../../../index';
|
||||
|
||||
/**
|
||||
* Md Loading Enter Animation
|
||||
*/
|
||||
export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
|
||||
const baseAnimation = new Animation();
|
||||
|
||||
const backdropAnimation = new Animation();
|
||||
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
|
||||
|
||||
const wrapperAnimation = new Animation();
|
||||
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
|
||||
|
||||
backdropAnimation.fromTo('opacity', 0.01, 0.5);
|
||||
|
||||
wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
|
||||
|
||||
return Promise.resolve(baseAnimation
|
||||
.addElement(baseEl)
|
||||
.easing('ease-in-out')
|
||||
.duration(200)
|
||||
.add(backdropAnimation)
|
||||
.add(wrapperAnimation));
|
||||
}
|
||||
25
core/src/components/loading/animations/md.leave.ts
Normal file
25
core/src/components/loading/animations/md.leave.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { Animation } from '../../../index';
|
||||
|
||||
/**
|
||||
* Md Loading Leave Animation
|
||||
*/
|
||||
export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
|
||||
const baseAnimation = new Animation();
|
||||
|
||||
const backdropAnimation = new Animation();
|
||||
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
|
||||
|
||||
const wrapperAnimation = new Animation();
|
||||
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
|
||||
|
||||
backdropAnimation.fromTo('opacity', 0.5, 0);
|
||||
|
||||
wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
|
||||
|
||||
return Promise.resolve(baseAnimation
|
||||
.addElement(baseEl)
|
||||
.easing('ease-in-out')
|
||||
.duration(200)
|
||||
.add(backdropAnimation)
|
||||
.add(wrapperAnimation));
|
||||
}
|
||||
70
core/src/components/loading/loading.ios.scss
Normal file
70
core/src/components/loading/loading.ios.scss
Normal file
@ -0,0 +1,70 @@
|
||||
@import "./loading";
|
||||
@import "./loading.ios.vars";
|
||||
|
||||
// iOS Loading Indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
.loading-ios {
|
||||
font-family: $loading-ios-font-family;
|
||||
font-size: $loading-ios-font-size;
|
||||
}
|
||||
|
||||
.loading-ios .loading-wrapper {
|
||||
@include border-radius($loading-ios-border-radius);
|
||||
|
||||
@include padding($loading-ios-padding-top, $loading-ios-padding-end, $loading-ios-padding-bottom, $loading-ios-padding-start);
|
||||
|
||||
max-width: $loading-ios-max-width;
|
||||
max-height: $loading-ios-max-height;
|
||||
|
||||
color: $loading-ios-text-color;
|
||||
background-color: $loading-ios-background-color;
|
||||
}
|
||||
|
||||
|
||||
// iOS Translucent Loading
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-translucent-ios .loading-wrapper {
|
||||
background-color: $loading-ios-translucent-background-color;
|
||||
|
||||
backdrop-filter: $loading-ios-translucent-filter;
|
||||
-webkit-backdrop-filter: $loading-ios-translucent-filter;
|
||||
}
|
||||
|
||||
|
||||
// iOS Loading Content
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-ios .loading-content {
|
||||
font-weight: $loading-ios-content-font-weight;
|
||||
}
|
||||
|
||||
.loading-ios .loading-spinner + .loading-content {
|
||||
@include margin-horizontal(16px, null);
|
||||
}
|
||||
|
||||
|
||||
// iOS Loading Spinner fill colors
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-ios .spinner-ios line,
|
||||
.loading-ios .spinner-ios-small line {
|
||||
stroke: $loading-ios-spinner-ios-color;
|
||||
}
|
||||
|
||||
.loading-ios .spinner-bubbles circle {
|
||||
fill: $loading-ios-spinner-bubbles-color;
|
||||
}
|
||||
|
||||
.loading-ios .spinner-circles circle {
|
||||
fill: $loading-ios-spinner-circles-color;
|
||||
}
|
||||
|
||||
.loading-ios .spinner-crescent circle {
|
||||
stroke: $loading-ios-spinner-crescent-color;
|
||||
}
|
||||
|
||||
.loading-ios .spinner-dots circle {
|
||||
fill: $loading-ios-spinner-dots-color;
|
||||
}
|
||||
64
core/src/components/loading/loading.ios.vars.scss
Normal file
64
core/src/components/loading/loading.ios.vars.scss
Normal file
@ -0,0 +1,64 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Loading Indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font family of the loading wrapper
|
||||
$loading-ios-font-family: $font-family-ios-base !default;
|
||||
|
||||
/// @prop - Font size of the loading wrapper
|
||||
$loading-ios-font-size: $font-size-ios-base !default;
|
||||
|
||||
/// @prop - Padding top of the loading wrapper
|
||||
$loading-ios-padding-top: 24px !default;
|
||||
|
||||
/// @prop - Padding end of the loading wrapper
|
||||
$loading-ios-padding-end: 34px !default;
|
||||
|
||||
/// @prop - Padding bottom of the loading wrapper
|
||||
$loading-ios-padding-bottom: $loading-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the loading wrapper
|
||||
$loading-ios-padding-start: $loading-ios-padding-end !default;
|
||||
|
||||
/// @prop - Max width of the loading wrapper
|
||||
$loading-ios-max-width: 270px !default;
|
||||
|
||||
/// @prop - Maximum height of the loading wrapper
|
||||
$loading-ios-max-height: 90% !default;
|
||||
|
||||
/// @prop - Border radius of the loading wrapper
|
||||
$loading-ios-border-radius: 8px !default;
|
||||
|
||||
/// @prop - Text color of the loading wrapper
|
||||
$loading-ios-text-color: $text-ios-color !default;
|
||||
|
||||
/// @prop - Background of the loading wrapper
|
||||
$loading-ios-background-color: $background-ios-color-step-50 !default;
|
||||
|
||||
/// @prop - Background of the loading wrapper
|
||||
$loading-ios-translucent-background-color: ion-color-alpha($background-ios-color-value, background-ios-color, $alpha-ios-high) !default;
|
||||
|
||||
/// @prop - Font weight of the loading content
|
||||
$loading-ios-content-font-weight: bold !default;
|
||||
|
||||
/// @prop - Color of the loading spinner
|
||||
$loading-ios-spinner-color: $text-ios-color-step-400 !default;
|
||||
|
||||
/// @prop - Color of the ios loading spinner
|
||||
$loading-ios-spinner-ios-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the bubbles loading spinner
|
||||
$loading-ios-spinner-bubbles-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the circles loading spinner
|
||||
$loading-ios-spinner-circles-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the crescent loading spinner
|
||||
$loading-ios-spinner-crescent-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the dots loading spinner
|
||||
$loading-ios-spinner-dots-color: $loading-ios-spinner-color !default;
|
||||
|
||||
/// @prop - Filter of the translucent loading
|
||||
$loading-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
57
core/src/components/loading/loading.md.scss
Normal file
57
core/src/components/loading/loading.md.scss
Normal file
@ -0,0 +1,57 @@
|
||||
@import "./loading";
|
||||
@import "./loading.md.vars";
|
||||
|
||||
// Material Design Loading Indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
.loading-md {
|
||||
font-family: $loading-md-font-family;
|
||||
font-size: $loading-md-font-size;
|
||||
}
|
||||
|
||||
.loading-md .loading-wrapper {
|
||||
@include border-radius($loading-md-border-radius);
|
||||
|
||||
@include padding($loading-md-padding-top, $loading-md-padding-end, $loading-md-padding-bottom, $loading-md-padding-start);
|
||||
|
||||
max-width: $loading-md-max-width;
|
||||
max-height: $loading-md-max-height;
|
||||
|
||||
color: $loading-md-text-color;
|
||||
background: $loading-md-background;
|
||||
|
||||
box-shadow: $loading-md-box-shadow;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Loading Content
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-md .loading-spinner + .loading-content {
|
||||
@include margin-horizontal(16px, null);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Loading Spinner fill colors
|
||||
// -----------------------------------------
|
||||
|
||||
.loading-md .spinner-ios line,
|
||||
.loading-md .spinner-ios-small line {
|
||||
stroke: $loading-md-spinner-ios-color;
|
||||
}
|
||||
|
||||
.loading-md .spinner-bubbles circle {
|
||||
fill: $loading-md-spinner-bubbles-color;
|
||||
}
|
||||
|
||||
.loading-md .spinner-circles circle {
|
||||
fill: $loading-md-spinner-circles-color;
|
||||
}
|
||||
|
||||
.loading-md .spinner-crescent circle {
|
||||
stroke: $loading-md-spinner-crescent-color;
|
||||
}
|
||||
|
||||
.loading-md .spinner-dots circle {
|
||||
fill: $loading-md-spinner-dots-color;
|
||||
}
|
||||
61
core/src/components/loading/loading.md.vars.scss
Normal file
61
core/src/components/loading/loading.md.vars.scss
Normal file
@ -0,0 +1,61 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Loading Indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font family of the loading wrapper
|
||||
$loading-md-font-family: $font-family-md-base !default;
|
||||
|
||||
/// @prop - Font size of the loading wrapper
|
||||
$loading-md-font-size: $font-size-md-base !default;
|
||||
|
||||
/// @prop - Padding top of the loading wrapper
|
||||
$loading-md-padding-top: 24px !default;
|
||||
|
||||
/// @prop - Padding end of the loading wrapper
|
||||
$loading-md-padding-end: $loading-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the loading wrapper
|
||||
$loading-md-padding-bottom: $loading-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the loading wrapper
|
||||
$loading-md-padding-start: $loading-md-padding-end !default;
|
||||
|
||||
/// @prop - Max width of the loading wrapper
|
||||
$loading-md-max-width: 280px !default;
|
||||
|
||||
/// @prop - Maximum height of the loading wrapper
|
||||
$loading-md-max-height: 90% !default;
|
||||
|
||||
/// @prop - Border radius of the loading wrapper
|
||||
$loading-md-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Text color of the loading wrapper
|
||||
$loading-md-text-color: $text-md-color-step-150 !default;
|
||||
|
||||
/// @prop - Background of the loading wrapper
|
||||
$loading-md-background: $background-md-color-step-50 !default;
|
||||
|
||||
/// @prop - Box shadow color of the loading wrapper
|
||||
$loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default;
|
||||
|
||||
/// @prop - Box shadow of the loading wrapper
|
||||
$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default;
|
||||
|
||||
/// @prop - Color of the loading spinner
|
||||
$loading-md-spinner-color: ion-color($colors-md, primary, base, md) !default;
|
||||
|
||||
/// @prop - Color of the ios loading spinner
|
||||
$loading-md-spinner-ios-color: $loading-md-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the bubbles loading spinner
|
||||
$loading-md-spinner-bubbles-color: $loading-md-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the circles loading spinner
|
||||
$loading-md-spinner-circles-color: $loading-md-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the crescent loading spinner
|
||||
$loading-md-spinner-crescent-color: $loading-md-spinner-color !default;
|
||||
|
||||
/// @prop - Color of the dots loading spinner
|
||||
$loading-md-spinner-dots-color: $loading-md-spinner-color !default;
|
||||
33
core/src/components/loading/loading.scss
Normal file
33
core/src/components/loading/loading.scss
Normal file
@ -0,0 +1,33 @@
|
||||
@import "./loading.vars";
|
||||
|
||||
// Loading
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-loading {
|
||||
@include position(0, 0, 0, 0);
|
||||
|
||||
position: fixed;
|
||||
z-index: $z-index-overlay;
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
touch-action: none;
|
||||
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
ion-loading-controller {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-wrapper {
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
204
core/src/components/loading/loading.tsx
Normal file
204
core/src/components/loading/loading.tsx
Normal file
@ -0,0 +1,204 @@
|
||||
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
|
||||
import { Animation, AnimationBuilder, Config, OverlayDismissEventDetail } from '../../index';
|
||||
import { createThemedClasses, getClassMap } from '../../utils/theme';
|
||||
import { BACKDROP, OverlayInterface, dismiss, present } from '../../utils/overlays';
|
||||
|
||||
import iosEnterAnimation from './animations/ios.enter';
|
||||
import iosLeaveAnimation from './animations/ios.leave';
|
||||
|
||||
import mdEnterAnimation from './animations/md.enter';
|
||||
import mdLeaveAnimation from './animations/md.leave';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-loading',
|
||||
styleUrls: {
|
||||
ios: 'loading.ios.scss',
|
||||
md: 'loading.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'loading'
|
||||
}
|
||||
})
|
||||
|
||||
export class Loading implements OverlayInterface {
|
||||
|
||||
private durationTimeout: any;
|
||||
|
||||
presented = false;
|
||||
animation: Animation;
|
||||
color: string;
|
||||
mode: string;
|
||||
|
||||
@Element() el: HTMLElement;
|
||||
|
||||
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: HTMLIonAnimationControllerElement;
|
||||
@Prop({ context: 'config' }) config: Config;
|
||||
@Prop() overlayId: number;
|
||||
|
||||
/**
|
||||
* Animation to use when the loading indicator is presented.
|
||||
*/
|
||||
@Prop() enterAnimation: AnimationBuilder;
|
||||
|
||||
/**
|
||||
* Animation to use when the loading indicator is dismissed.
|
||||
*/
|
||||
@Prop() leaveAnimation: AnimationBuilder;
|
||||
|
||||
/**
|
||||
* Optional text content to display in the loading indicator.
|
||||
*/
|
||||
@Prop() content: string;
|
||||
|
||||
/**
|
||||
* Additional classes to apply for custom CSS. If multiple classes are
|
||||
* provided they should be separated by spaces.
|
||||
*/
|
||||
@Prop() cssClass: string;
|
||||
|
||||
/**
|
||||
* If true, the loading indicator will dismiss when the page changes. Defaults to `false`.
|
||||
*/
|
||||
@Prop() dismissOnPageChange = false;
|
||||
|
||||
/**
|
||||
* Number of milliseconds to wait before dismissing the loading indicator.
|
||||
*/
|
||||
@Prop() duration: number;
|
||||
|
||||
/**
|
||||
* If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.
|
||||
*/
|
||||
@Prop() enableBackdropDismiss = false;
|
||||
|
||||
/**
|
||||
* If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`.
|
||||
*/
|
||||
@Prop() showBackdrop = true;
|
||||
|
||||
/**
|
||||
* The name of the spinner to display. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`,
|
||||
* `"bubbles"`, `"circles"`, `"crescent"`.
|
||||
*/
|
||||
@Prop() spinner: string;
|
||||
|
||||
/**
|
||||
* If true, the loading indicator will be translucent. Defaults to `false`.
|
||||
*/
|
||||
@Prop() translucent = false;
|
||||
|
||||
/**
|
||||
* If true, the loading indicator will animate. Defaults to `true`.
|
||||
*/
|
||||
@Prop() willAnimate = true;
|
||||
|
||||
/**
|
||||
* Emitted after the loading has unloaded.
|
||||
*/
|
||||
@Event() ionLoadingDidUnload: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted after the loading has loaded.
|
||||
*/
|
||||
@Event() ionLoadingDidLoad: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted after the loading has presented.
|
||||
*/
|
||||
@Event({eventName: 'ionLoadingDidPresent'}) didPresent: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted before the loading has presented.
|
||||
*/
|
||||
@Event({eventName: 'ionLoadingWillPresent'}) willPresent: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted before the loading has dismissed.
|
||||
*/
|
||||
@Event({eventName: 'ionLoadingWillDismiss'}) willDismiss: EventEmitter<OverlayDismissEventDetail>;
|
||||
|
||||
/**
|
||||
* Emitted after the loading has dismissed.
|
||||
*/
|
||||
@Event({eventName: 'ionLoadingDidDismiss'}) didDismiss: EventEmitter<OverlayDismissEventDetail>;
|
||||
|
||||
componentWillLoad() {
|
||||
if (!this.spinner) {
|
||||
this.spinner = this.config.get('loadingSpinner', this.mode === 'ios' ? 'lines' : 'crescent');
|
||||
}
|
||||
}
|
||||
componentDidLoad() {
|
||||
this.ionLoadingDidLoad.emit();
|
||||
}
|
||||
|
||||
componentDidUnload() {
|
||||
this.ionLoadingDidUnload.emit();
|
||||
}
|
||||
|
||||
@Listen('ionBackdropTap')
|
||||
protected onBackdropTap() {
|
||||
this.dismiss(null, BACKDROP);
|
||||
}
|
||||
|
||||
/**
|
||||
* Present the loading overlay after it has been created.
|
||||
*/
|
||||
@Method()
|
||||
present(): Promise<void> {
|
||||
return present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation, undefined).then(() => {
|
||||
if (this.duration > 0) {
|
||||
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Dismiss the loading overlay after it has been presented.
|
||||
*/
|
||||
@Method()
|
||||
dismiss(data?: any, role?: string): Promise<void> {
|
||||
if (this.durationTimeout) {
|
||||
clearTimeout(this.durationTimeout);
|
||||
}
|
||||
return dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation, undefined);
|
||||
}
|
||||
|
||||
hostData() {
|
||||
const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'loading-translucent') : {};
|
||||
|
||||
return {
|
||||
style: {
|
||||
zIndex: 20000 + this.overlayId,
|
||||
},
|
||||
class: {
|
||||
...themedClasses,
|
||||
...getClassMap(this.cssClass)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return [
|
||||
<ion-backdrop visible={this.showBackdrop} tappable={false} />,
|
||||
<div class='loading-wrapper' role='dialog'>
|
||||
|
||||
{ this.spinner !== 'hide' &&
|
||||
<div class='loading-spinner'>
|
||||
<ion-spinner name={this.spinner}></ion-spinner>
|
||||
</div>}
|
||||
|
||||
{ this.content && <div class='loading-content'>{this.content}</div>}
|
||||
</div>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
export interface LoadingOptions {
|
||||
spinner?: string;
|
||||
content?: string;
|
||||
cssClass?: string;
|
||||
showBackdrop?: boolean;
|
||||
dismissOnPageChange?: boolean;
|
||||
duration?: number;
|
||||
translucent?: boolean;
|
||||
}
|
||||
1
core/src/components/loading/loading.vars.scss
Normal file
1
core/src/components/loading/loading.vars.scss
Normal file
@ -0,0 +1 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
253
core/src/components/loading/readme.md
Normal file
253
core/src/components/loading/readme.md
Normal file
@ -0,0 +1,253 @@
|
||||
# ion-loading
|
||||
|
||||
An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting `showBackdrop: false` upon creation.
|
||||
|
||||
|
||||
### Creating
|
||||
|
||||
Loading indicators can be created using a [Loading Controller](../../loading-controller/LoadingController). They can be customized by passing loading options in the loading controller's create method. The spinner name should be passed in the `spinner` property, and any optional HTML can be passed in the `content` property. If a value is not passed to `spinner` the loading indicator will use the spinner specified by the platform.
|
||||
|
||||
|
||||
### Dismissing
|
||||
|
||||
The loading indicator can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the loading options. By default the loading indicator will show even during page changes, but this can be disabled by setting `dismissOnPageChange` to `true`. To dismiss the loading indicator after creation, call the `dismiss()` method on the loading instance. The `onDidDismiss` function can be called to perform an action after the loading indicator is dismissed.
|
||||
|
||||
|
||||
```javascript
|
||||
async function presentLoading() {
|
||||
const loadingController = document.querySelector('ion-loading-controller');
|
||||
await loadingController.componentOnReady();
|
||||
|
||||
const loadingElement = await loadingController.create({
|
||||
content: 'Please wait...',
|
||||
spinner: 'crescent',
|
||||
duration: 2000
|
||||
});
|
||||
return await loadingElement.present();
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### content
|
||||
|
||||
string
|
||||
|
||||
Optional text content to display in the loading indicator.
|
||||
|
||||
|
||||
#### cssClass
|
||||
|
||||
string
|
||||
|
||||
Additional classes to apply for custom CSS. If multiple classes are
|
||||
provided they should be separated by spaces.
|
||||
|
||||
|
||||
#### dismissOnPageChange
|
||||
|
||||
boolean
|
||||
|
||||
If true, the loading indicator will dismiss when the page changes. Defaults to `false`.
|
||||
|
||||
|
||||
#### duration
|
||||
|
||||
number
|
||||
|
||||
Number of milliseconds to wait before dismissing the loading indicator.
|
||||
|
||||
|
||||
#### enableBackdropDismiss
|
||||
|
||||
boolean
|
||||
|
||||
If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.
|
||||
|
||||
|
||||
#### enterAnimation
|
||||
|
||||
|
||||
|
||||
Animation to use when the loading indicator is presented.
|
||||
|
||||
|
||||
#### leaveAnimation
|
||||
|
||||
|
||||
|
||||
Animation to use when the loading indicator is dismissed.
|
||||
|
||||
|
||||
#### overlayId
|
||||
|
||||
number
|
||||
|
||||
|
||||
#### showBackdrop
|
||||
|
||||
boolean
|
||||
|
||||
If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`.
|
||||
|
||||
|
||||
#### spinner
|
||||
|
||||
string
|
||||
|
||||
The name of the spinner to display. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`,
|
||||
`"bubbles"`, `"circles"`, `"crescent"`.
|
||||
|
||||
|
||||
#### translucent
|
||||
|
||||
boolean
|
||||
|
||||
If true, the loading indicator will be translucent. Defaults to `false`.
|
||||
|
||||
|
||||
#### willAnimate
|
||||
|
||||
boolean
|
||||
|
||||
If true, the loading indicator will animate. Defaults to `true`.
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### content
|
||||
|
||||
string
|
||||
|
||||
Optional text content to display in the loading indicator.
|
||||
|
||||
|
||||
#### css-class
|
||||
|
||||
string
|
||||
|
||||
Additional classes to apply for custom CSS. If multiple classes are
|
||||
provided they should be separated by spaces.
|
||||
|
||||
|
||||
#### dismiss-on-page-change
|
||||
|
||||
boolean
|
||||
|
||||
If true, the loading indicator will dismiss when the page changes. Defaults to `false`.
|
||||
|
||||
|
||||
#### duration
|
||||
|
||||
number
|
||||
|
||||
Number of milliseconds to wait before dismissing the loading indicator.
|
||||
|
||||
|
||||
#### enable-backdrop-dismiss
|
||||
|
||||
boolean
|
||||
|
||||
If true, the loading indicator will be dismissed when the backdrop is clicked. Defaults to `false`.
|
||||
|
||||
|
||||
#### enter-animation
|
||||
|
||||
|
||||
|
||||
Animation to use when the loading indicator is presented.
|
||||
|
||||
|
||||
#### leave-animation
|
||||
|
||||
|
||||
|
||||
Animation to use when the loading indicator is dismissed.
|
||||
|
||||
|
||||
#### overlay-id
|
||||
|
||||
number
|
||||
|
||||
|
||||
#### show-backdrop
|
||||
|
||||
boolean
|
||||
|
||||
If true, a backdrop will be displayed behind the loading indicator. Defaults to `true`.
|
||||
|
||||
|
||||
#### spinner
|
||||
|
||||
string
|
||||
|
||||
The name of the spinner to display. Possible values are: `"lines"`, `"lines-sm"`, `"dots"`,
|
||||
`"bubbles"`, `"circles"`, `"crescent"`.
|
||||
|
||||
|
||||
#### translucent
|
||||
|
||||
boolean
|
||||
|
||||
If true, the loading indicator will be translucent. Defaults to `false`.
|
||||
|
||||
|
||||
#### will-animate
|
||||
|
||||
boolean
|
||||
|
||||
If true, the loading indicator will animate. Defaults to `true`.
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
#### ionLoadingDidDismiss
|
||||
|
||||
Emitted after the loading has dismissed.
|
||||
|
||||
|
||||
#### ionLoadingDidLoad
|
||||
|
||||
Emitted after the loading has loaded.
|
||||
|
||||
|
||||
#### ionLoadingDidPresent
|
||||
|
||||
Emitted after the loading has presented.
|
||||
|
||||
|
||||
#### ionLoadingDidUnload
|
||||
|
||||
Emitted after the loading has unloaded.
|
||||
|
||||
|
||||
#### ionLoadingWillDismiss
|
||||
|
||||
Emitted before the loading has dismissed.
|
||||
|
||||
|
||||
#### ionLoadingWillPresent
|
||||
|
||||
Emitted before the loading has presented.
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
#### dismiss()
|
||||
|
||||
Dismiss the loading overlay after it has been presented.
|
||||
|
||||
|
||||
#### present()
|
||||
|
||||
Present the loading overlay after it has been created.
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
36
core/src/components/loading/test/basic/e2e.js
Normal file
36
core/src/components/loading/test/basic/e2e.js
Normal file
@ -0,0 +1,36 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/loading/test/basic?ionicplatform=${platform}`);
|
||||
}
|
||||
|
||||
async present(buttonId) {
|
||||
await this.navigate('#basic');
|
||||
this.driver.findElement(By.id(buttonId)).click();
|
||||
await this.driver.wait(until.elementLocated(By.css('.loading-wrapper')));
|
||||
return await this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.loading-wrapper'))));
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('loading/basic', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('#basic');
|
||||
});
|
||||
|
||||
register('should open loading', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.present('basic');
|
||||
});
|
||||
|
||||
register('should open default spinner', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.present('default');
|
||||
});
|
||||
});
|
||||
});
|
||||
130
core/src/components/loading/test/basic/index.html
Normal file
130
core/src/components/loading/test/basic/index.html
Normal file
@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Loading - Basic</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-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Loading - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
|
||||
<ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default 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: 'Please wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
|
||||
<ion-button expand="block" onclick="presentLoadingWithOptions({enableBackdropDismiss: true})">Show Backdrop Click Loading</ion-button>
|
||||
|
||||
<ion-loading-controller></ion-loading-controller>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col col-6>
|
||||
<f class="red"></f>
|
||||
</ion-col>
|
||||
<ion-col col-6>
|
||||
<f class="green"></f>
|
||||
</ion-col>
|
||||
<ion-col col-6>
|
||||
<f class="blue"></f>
|
||||
</ion-col>
|
||||
<ion-col col-6>
|
||||
<f class="yellow"></f>
|
||||
</ion-col>
|
||||
<ion-col col-6>
|
||||
<f class="pink"></f>
|
||||
</ion-col>
|
||||
<ion-col col-6>
|
||||
<f class="purple"></f>
|
||||
</ion-col>
|
||||
<ion-col col-6>
|
||||
<f class="black"></f>
|
||||
</ion-col>
|
||||
<ion-col col-6>
|
||||
<f class="orange"></f>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
<script>
|
||||
async function presentLoading() {
|
||||
const loadingController = document.querySelector('ion-loading-controller');
|
||||
await loadingController.componentOnReady();
|
||||
const loadingElement = await loadingController.create({
|
||||
message: 'Hellooo',
|
||||
duration: 2000
|
||||
});
|
||||
return await loadingElement.present();
|
||||
}
|
||||
|
||||
async function presentLoadingWithOptions(opts) {
|
||||
const loadingController = document.querySelector('ion-loading-controller');
|
||||
await loadingController.componentOnReady();
|
||||
const loadingElement = await loadingController.create(opts);
|
||||
return await loadingElement.present();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-loading .loading-wrapper {
|
||||
background: rgb(155, 221, 226);
|
||||
}
|
||||
|
||||
f {
|
||||
display: block;
|
||||
background: blue;
|
||||
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #ea445a;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #76d672;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #3478f6;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
background-color: #ffff80;
|
||||
}
|
||||
|
||||
.pink {
|
||||
background-color: #ff6b86;
|
||||
}
|
||||
|
||||
.purple {
|
||||
background-color: #7e34f6;
|
||||
}
|
||||
|
||||
.black {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #f69234;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
31
core/src/components/loading/test/standalone/e2e.js
Normal file
31
core/src/components/loading/test/standalone/e2e.js
Normal file
@ -0,0 +1,31 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/loading/test/standalone?ionicplatform=${platform}`);
|
||||
}
|
||||
|
||||
async present(buttonId) {
|
||||
await this.navigate('#basic');
|
||||
this.driver.findElement(By.id(buttonId)).click();
|
||||
await this.driver.wait(until.elementLocated(By.css('.loading-wrapper')));
|
||||
return await this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.loading-wrapper'))));
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('loading/standalone', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('#basic');
|
||||
});
|
||||
|
||||
register('should open loading', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.present('basic');
|
||||
});
|
||||
});
|
||||
});
|
||||
53
core/src/components/loading/test/standalone/index.html
Normal file
53
core/src/components/loading/test/standalone/index.html
Normal file
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Loading - Standalone</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>
|
||||
<button id="basic" onclick="presentLoading()">Show Loading</button>
|
||||
<button 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</button>
|
||||
<button onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: 'hide'})">Show Loading with no spinner</button>
|
||||
<button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
|
||||
<button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>
|
||||
|
||||
<ion-loading-controller></ion-loading-controller>
|
||||
|
||||
<style>
|
||||
body > button {
|
||||
display: block;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
padding: 12px 8px;
|
||||
font-size: 1em;
|
||||
background: #f8f8f8;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
async function presentLoading() {
|
||||
const loadingController = document.querySelector('ion-loading-controller');
|
||||
await loadingController.componentOnReady();
|
||||
const loadingElement = await loadingController.create({
|
||||
message: 'Hellooo',
|
||||
duration: 2000
|
||||
});
|
||||
return await loadingElement.present();
|
||||
}
|
||||
|
||||
async function presentLoadingWithOptions(opts) {
|
||||
const loadingController = document.querySelector('ion-loading-controller');
|
||||
await loadingController.componentOnReady();
|
||||
const loadingElement = await loadingController.create(opts);
|
||||
return await loadingElement.present();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user