Skeleton loader - Squelette de chargement

Représentation visuelle de l'emplacement où le contenu sera finalement affiché une fois le chargement effectué.

Component checklist

Code source

Storybook

Dernière version de modification

1.0.0

Disponible depuis la version

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