Result 结果

用于反馈一系列操作任务的处理结果。

何时使用

当有重要操作需告知用户处理结果,且反馈内容较为复杂时使用。

代码演示

Success

成功的结果。

Result结果 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Result, Button } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Result
  6. status="success"
  7. title="Successfully Purchased Cloud Server ECS!"
  8. subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
  9. extra={[
  10. <Button funcType="raised" type="primary" key="console">
  11. Go Console
  12. </Button>,
  13. <Button funcType="raised" key="buy">
  14. Buy Again
  15. </Button>,
  16. ]}
  17. />,
  18. document.getElementById('container'),
  19. );

Info

展示处理结果。

Result结果 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Result, Button } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Result
  6. title="Your operation has been executed"
  7. extra={
  8. <Button funcType="raised" type="primary" key="console">
  9. Go Console
  10. </Button>
  11. }
  12. />,
  13. document.getElementById('container'),
  14. );

Warning

警告类型的结果。

Result结果 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Result, Button } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Result
  6. status="warning"
  7. title="There are some problems with your operation."
  8. extra={
  9. <Button funcType="raised" type="primary" key="console">
  10. Go Console
  11. </Button>
  12. }
  13. />,
  14. document.getElementById('container'),
  15. );

403

你没有此页面的访问权限。

Result结果 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Result, Button } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Result
  6. status="403"
  7. title="403"
  8. subTitle="Sorry, you are not authorized to access this page."
  9. extra={
  10. <Button funcType="raised" type="primary">
  11. Back Home
  12. </Button>
  13. }
  14. />,
  15. document.getElementById('container'),
  16. );

404

此页面未找到。

Result结果 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Result, Button } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Result
  6. status="404"
  7. title="404"
  8. subTitle="Sorry, the page you visited does not exist."
  9. extra={
  10. <Button funcType="raised" type="primary">
  11. Back Home
  12. </Button>
  13. }
  14. />,
  15. document.getElementById('container'),
  16. );

500

服务器发生了错误。

Result结果 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Result, Button } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Result
  6. status="500"
  7. title="500"
  8. subTitle="Sorry, something went wrong."
  9. extra={
  10. <Button funcType="raised" type="primary">
  11. Back Home
  12. </Button>
  13. }
  14. />,
  15. document.getElementById('container'),
  16. );

自定义 icon

自定义 icon。

Result结果 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Result, Button, Icon } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Result
  6. icon={<Icon type="wb_incandescent-o" />}
  7. title="Great, we have done all the operations!"
  8. extra={
  9. <Button funcType="raised" type="primary">
  10. Next
  11. </Button>
  12. }
  13. />,
  14. document.getElementById('container'),
  15. );

自定义状态渲染

自定义状态渲染内容。

Result结果 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Result, Button } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <Result
  6. statusRenderer={{
  7. '204': (
  8. <img
  9. style={{ width: '200px' }}
  10. alt="example"
  11. src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
  12. />
  13. ),
  14. }}
  15. status={204}
  16. title="204"
  17. subTitle="客户端发送给客户端的请求得到了成功处理,但在返回的响应报文中不含实体的主体部分"
  18. extra={
  19. <Button funcType="raised" type="primary">
  20. No Content, Go Home Page
  21. </Button>
  22. }
  23. />,
  24. document.getElementById('container'),
  25. );

API

参数说明类型默认值
titletitle 文字ReactNode-
subTitlesubTitle 文字ReactNode-
status结果的状态,决定图标和颜色success | error | info | warning | 404 | 403 | 500info
icon自定义 iconReactNode-
extra操作区ReactNode-
statusRenderer自定义状态展示,可以覆盖现有状态展示,也可以增加状态展示,支持全局配置object-