Result

Affichez des pages de résultat pour les états de succès, d’erreur ou informationnels.

Import

import { Result } from 'asterui'

Exemples

Résultat de succès

Afficher l'état de succès avec des boutons d'action.

Payment Successful

Your order has been confirmed and will be shipped within 2 business days.

import { Result, Button, Space } from 'asterui'

function App() {
  return (
      <Result
        status="success"
        title="Payment Successful"
        subTitle="Your order has been confirmed and will be shipped within 2 business days."
        extra={
          <Space>
            <Button color="primary">View Order</Button>
            <Button>Continue Shopping</Button>
          </Space>
        }
      />
    )
}

export default App

Résultat d'erreur

Afficher l'état d'erreur avec action de réessai.

Submission Failed

Please check your information and try again.

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="error"
        title="Submission Failed"
        subTitle="Please check your information and try again."
        extra={<Button color="error">Try Again</Button>}
      />
    )
}

export default App

Résultat informatif

Afficher un message informatif.

Verification Required

Please check your email to verify your account.

import { Result } from 'asterui'

function App() {
  return (
      <Result
        status="info"
        title="Verification Required"
        subTitle="Please check your email to verify your account."
      />
    )
}

export default App

Résultat d'avertissement

Afficher l'état d'avertissement.

Account Suspended

Your account has been suspended due to unusual activity.

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="warning"
        title="Account Suspended"
        subTitle="Your account has been suspended due to unusual activity."
        extra={<Button color="warning">Contact Support</Button>}
      />
    )
}

export default App

404 Page non trouvée

Afficher la page d'erreur 404.

404

Page Not Found

The page you are looking for does not exist.

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="404"
        title="Page Not Found"
        subTitle="The page you are looking for does not exist."
        extra={<Button color="primary">Back Home</Button>}
      />
    )
}

export default App

403 Interdit

Afficher la page d'accès refusé.

403

Access Denied

You don't have permission to access this resource.

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="403"
        title="Access Denied"
        subTitle="You don't have permission to access this resource."
        extra={<Button>Request Access</Button>}
      />
    )
}

export default App

500 Erreur serveur

Afficher la page d'erreur serveur.

500

Server Error

Something went wrong on our end. Please try again later.

import { Result, Button } from 'asterui'

function App() {
  return (
      <Result
        status="500"
        title="Server Error"
        subTitle="Something went wrong on our end. Please try again later."
        extra={<Button color="primary">Refresh Page</Button>}
      />
    )
}

export default App

API

`Result`

Propriété	Description	Type	Défaut
`status`	Type de statut du résultat	`'success' \| 'error' \| 'info' \| 'warning' \| '404' \| '403' \| '500'`	`'info'`
`title`	Titre du résultat	`React.ReactNode`	-
`subTitle`	Sous-titre du résultat	`React.ReactNode`	-
`icon`	Icône personnalisée (remplace l’icône de statut par défaut)	`React.ReactNode`	-
`extra`	Éléments d’action supplémentaires (généralement des boutons)	`React.ReactNode`	-
`children`	Contenu supplémentaire entre le sous-titre et les actions	`React.ReactNode`	-
`className`	Classes CSS supplémentaires	`string`	-
`style`	Styles en ligne	`React.CSSProperties`	-
`data-testid`	ID de test pour les tests	`string`	-

Accessibilité

Les icônes de statut ont des étiquettes ARIA appropriées
Structure de titres sémantique pour le titre et le sous-titre
Les boutons d’action sont accessibles au clavier
La couleur n’est pas le seul indicateur de statut