Result 结果

显示成功、错误或信息状态的结果页面。

导入

import { Result } from 'asterui'

示例

成功结果

显示带有操作按钮的成功状态。

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

错误结果

显示带有重试操作的错误状态。

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

信息结果

显示信息性消息。

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

警告结果

显示警告状态。

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 页面未找到

显示 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 禁止访问

显示访问被拒绝页面。

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 服务器错误

显示服务器错误页面。

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`

属性	描述	类型	默认值
`status`	结果的状态类型	`'success' \| 'error' \| 'info' \| 'warning' \| '404' \| '403' \| '500'`	`'info'`
`title`	结果的标题	`React.ReactNode`	-
`subTitle`	结果的副标题	`React.ReactNode`	-
`icon`	自定义图标(覆盖默认状态图标)	`React.ReactNode`	-
`extra`	额外的操作元素(通常是按钮)	`React.ReactNode`	-
`children`	副标题和操作之间的额外内容	`React.ReactNode`	-
`className`	额外的 CSS 类	`string`	-
`style`	内联样式	`React.CSSProperties`	-
`data-testid`	用于测试的测试 ID	`string`	-

可访问性

状态图标具有适当的 ARIA 标签
标题和副标题的语义标题结构
操作按钮可通过键盘访问
颜色不是状态的唯一指示器