0.0.9 • Published 4 years ago
asap-skeleton v0.0.9
ASAP SKELETON LOADING
Componente para montar Skeletons de pre-loading
ASAP GROUP
Como utilizar?
Declare a importação do módulo no app.module.ts
import { AsapSkeletonModule } from 'asap-skeleton';
@NgModule({
imports: [
AsapSkeletonModule
]
})
export class AppModule {}
Inicialize uma váriavel de loading para que você possa passar o estado atual da sua requisição no caso de um request
import { Component, OnInit } from '@angular/core';
declare const $: any;
@Component({
})
export class AppComponent implements OnInit {
public trails;
public loading = true;
constructor(
public trailService: TrailService
) {
}
ngOnInit() {
this.trailService.trails().subscribe((response:any) => {
this.trails = response;
this.loading = false;
});
}
}
Agora organize as sessões do skeleton como desejar
<asap-skeleton type="box" [lines]="7" boxHeigth="130px" boxWidth="130px"></asap-skeleton>
Parametros aceitos
Parametro | Aeito | Acao |
---|---|---|
type | box ou line | Cria sessões em linhas ou caixas |
lines | numero | Quantidade de repetições |
boxHeigth | px ou % | Altura do Component |
boxWidth | px ou % | Largura do Component |