Skeleton loader - Squelette de chargement

Le squelette de chargement permet d'afficher une représentation schématique du contenu avant son chargement.

Component checklist

Code source

Lien vers le repository (nous demander les droits)

Storybook

Dernière version publiée

Dernière version de modification

Package @ds-autonomie/web-components

1.0.0

Disponible depuis la version

Package @ds-autonomie/web-components

1.0.0

Usage


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-skeleton> </dsa-skeleton>
                                                                                                                                                        
                                                                                                                                                        <script type="text/typescript">
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/skeleton/skeleton.js';
                                                                                                                                                          import type { DSASkeleton } from '@ds-autonomie/web-components'
                                                                                                                                                        </script>
                                                                                                                                                        
                                                                                                                                                            

Code HTML à implémenter pour utiliser le composant squelette de chargement


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            import { Component } from '@angular/core';
                                                                                                                                                        import type { DSASkeleton } from '@ds-autonomie/web-components'
                                                                                                                                                        import '@ds-autonomie/web-components/dist/components/skeleton/skeleton.js';
                                                                                                                                                        
                                                                                                                                                        @Component({
                                                                                                                                                          selector: 'app-root',
                                                                                                                                                          templateUrl: './app.component.html',
                                                                                                                                                          styleUrls: ['./app.component.css']
                                                                                                                                                        })
                                                                                                                                                        export class AppComponent {}
                                                                                                                                                        
                                                                                                                                                            

app.component.ts


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-skeleton> </dsa-skeleton>
                                                                                                                                                        
                                                                                                                                                            

app.component.html


API

Attributs et propriétés

Propriété

attribut

Description

Type

Valeur par défaut

effect

Désigne quel effet le squelette utilisera

pulse sheen none

none

Méthodes

Slots

Événements