Error message panel - Panneau de message d'erreur

Le panneau de message d'erreur peut être utilisé pour afficher un message d'erreur lorsqu'un problème s'est produit sur le site.

 

Component checklist

Statut

Fonctionnel

Code source

Storybook

Dernière version de modification

2.21.0

Disponible depuis la version

1.6.0

Usage


                                                        
                                                        
                                                            <dsa-error-message-panel error-code="404">
                                                          <h3>Page non trouvée</h3>
                                                          <p slot="description">
                                                            La page que vous cherchez est introuvable. Excusez-nous pour la gêne
                                                            occasionnée. Pour continuer votre visite vous pouvez consulter notre
                                                            page d’accueil, ou effectuer une recherche avec notre moteur de
                                                            recherche en haut de page.
                                                          </p>
                                                          <dsa-button slot="action">Page d’accueil</dsa-button>  
                                                        </dsa-error-message-panel>
                                                        
                                                        <script type="text/typescript">
                                                          import '@ds-autonomie/web-components/dist/components/error-message-panel/error-message-panel.js';
                                                          import type { DSAErrorMessagePanel } from '@ds-autonomie/web-components/';
                                                        </script>
                                                        
                                                            

Exemple d'intégration du pied de page sur différents framework:

  • app.component.html

                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-error-message-panel error-code="404">
                                                                                                                                                          <h3>Page non trouvée</h3>
                                                                                                                                                          <p slot="description">
                                                                                                                                                            La page que vous cherchez est introuvable. Excusez-nous pour la gêne
                                                                                                                                                            occasionnée. Pour continuer votre visite vous pouvez consulter notre
                                                                                                                                                            page d’accueil, ou effectuer une recherche avec notre moteur de
                                                                                                                                                            recherche en haut de page.
                                                                                                                                                          </p>
                                                                                                                                                          <dsa-button slot="action">Page d’accueil</dsa-button>
                                                                                                                                                        </dsa-error-message-panel>
                                                                                                                                                        
                                                                                                                                                            
  • app.component.ts

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

API

Attributs et propriétés

Propriété

attribut

Description

Type

Valeur par défaut

errorCode

error-code

 

Le code de l'erreur à afficher

string

''

Méthodes

Slots

Nom

Description

(défaut)

Le titre principal du message d’erreur

description

Le slot de la description plus détaillée de l’erreur

action

Le slot contenant une action à déclencher. Par exemple un bouton de redirection

Événements