feat(skeleton-text): adds animated prop and support for CSS styling (#17612)

* moves most of the CSS to the host element so that it's easier to customize the skeleton text
* adds auto inherit for border-radius
* moves height to 100% so it will naturally fill an avatar and thumbnail
* adds animated property defaulted to `false`
* removes mode specific styles as they're the same
* changes background to an rgba making it easier to customize
* still works outside of a container element
* adds usage examples for javascript and angular
* moves the width to the parent element making it easier to style
* adds the ability to style the width using CSS
* uses the global theme text color as the background if a custom background is not supplied before defaulting

closes ionic-team/ionic-docs#407
This commit is contained in:
Brandy Carney
2019-02-27 17:27:34 -05:00
committed by GitHub
parent a99d17952b
commit d66b12b8d4
17 changed files with 1062 additions and 85 deletions

View File

@ -748,7 +748,7 @@ export class IonSelectOption {
proxyInputs(IonSelectOption, ['disabled', 'selected', 'value']);
export declare interface IonSkeletonText extends StencilComponents<'IonSkeletonText'> {}
@Component({ selector: 'ion-skeleton-text', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['width'] })
@Component({ selector: 'ion-skeleton-text', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['animated', 'width'] })
export class IonSkeletonText {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef) {
@ -756,7 +756,7 @@ export class IonSkeletonText {
this.el = r.nativeElement;
}
}
proxyInputs(IonSkeletonText, ['width']);
proxyInputs(IonSkeletonText, ['animated', 'width']);
export declare interface IonSlide extends StencilComponents<'IonSlide'> {}
@Component({ selector: 'ion-slide', changeDetection: 0, template: '<ng-content></ng-content>' })