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(loading): allow html content (#18242)

Browse Source 
fixes #18135
This commit is contained in:
Liam DeBeasi
2019-05-09 16:03:38 -04:00
committed by GitHub
parent 7bb6a8e8b1
commit a6cb5f218e
3 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/loading/loading.tsx
View File

@ -2,6 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Me
import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
import { sanitizeDOMString } from '../../utils/sanitization';
import { getClassMap } from '../../utils/theme';
import { iosEnterAnimation } from './animations/ios.enter';
@ -196,7 +197,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
</div>
)}
{this.message && <div class="loading-content">{this.message}</div>}
{this.message && <div class="loading-content" innerHTML={sanitizeDOMString(this.message)}></div>}
</div>
];
}

8
core/src/components/loading/test/basic/e2e.ts
View File

@ -26,6 +26,10 @@ test('loading: backdrop standalone', async () => {
await testLoading(DIRECTORY, '#backdrop-loading');
});
test('loading: html content basic', async () => {
await testLoading(DIRECTORY, '#html-content-loading');
});
/**
* RTL Tests
*/
@ -53,3 +57,7 @@ test('loading:rtl: custom class basic', async () => {
test('loading:rtl: backdrop standalone', async () => {
await testLoading(DIRECTORY, '#backdrop-loading', true);
});
test('loading:rtl: html content basic', async () => {
await testLoading(DIRECTORY, '#html-content-loading', true);
});

5
core/src/components/loading/test/basic/index.html
View File

@ -28,6 +28,7 @@
<ion-button id="translucent-loading" expand="block" onclick="presentLoadingWithOptions({duration: 5000, message: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
<ion-button id="custom-class-loading" expand="block" onclick="presentLoadingWithOptions({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
<ion-button id="backdrop-loading" expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
<ion-button id="html-content-loading" expand="block" onclick="presentLoadingWithOptions({cssClass: 'html-loading', duration: 5000, message: '<ion-button>Click impatiently to load faster</ion-button>'})">Show Loading with HTML content</ion-button>
<ion-loading-controller></ion-loading-controller>
@ -82,6 +83,10 @@
</script>
<style>
.html-loading {
--max-width: auto;
}
.custom-loading {
--background: rgba(37, 210, 223, 0.8);
--spinner-color: white;