Result 结果

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

何时使用

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

代码演示

Success

成功的结果。

import React from 'react';
import ReactDOM from 'react-dom';
import { Result, Button } from 'choerodon-ui';
​
ReactDOM.render(
  <Result
    status="success"
    title="Successfully Purchased Cloud Server ECS!"
    subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
    extra={[
      <Button funcType="raised" type="primary" key="console">
        Go Console
      </Button>,
      <Button funcType="raised" key="buy">
        Buy Again
      </Button>,
    ]}
  />,
  document.getElementById('container'),
);
​

Info

展示处理结果。

import React from 'react';
import ReactDOM from 'react-dom';
import { Result, Button } from 'choerodon-ui';
​
ReactDOM.render(
  <Result
    title="Your operation has been executed"
    extra={
      <Button funcType="raised" type="primary" key="console">
        Go Console
      </Button>
    }
  />,
  document.getElementById('container'),
);
​

Warning

警告类型的结果。

import React from 'react';
import ReactDOM from 'react-dom';
import { Result, Button } from 'choerodon-ui';
​
ReactDOM.render(
  <Result
    status="warning"
    title="There are some problems with your operation."
    extra={
      <Button funcType="raised" type="primary" key="console">
        Go Console
      </Button>
    }
  />,
  document.getElementById('container'),
);
​

403

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Result, Button } from 'choerodon-ui';
​
ReactDOM.render(
  <Result
    status="403"
    title="403"
    subTitle="Sorry, you are not authorized to access this page."
    extra={
      <Button funcType="raised" type="primary">
        Back Home
      </Button>
    }
  />,
  document.getElementById('container'),
);
​

404

此页面未找到。

import React from 'react';
import ReactDOM from 'react-dom';
import { Result, Button } from 'choerodon-ui';
​
ReactDOM.render(
  <Result
    status="404"
    title="404"
    subTitle="Sorry, the page you visited does not exist."
    extra={
      <Button funcType="raised" type="primary">
        Back Home
      </Button>
    }
  />,
  document.getElementById('container'),
);
​

500

服务器发生了错误。

import React from 'react';
import ReactDOM from 'react-dom';
import { Result, Button } from 'choerodon-ui';
​
ReactDOM.render(
  <Result
    status="500"
    title="500"
    subTitle="Sorry, something went wrong."
    extra={
      <Button funcType="raised" type="primary">
        Back Home
      </Button>
    }
  />,
  document.getElementById('container'),
);
​

自定义 icon

自定义 icon。

import React from 'react';
import ReactDOM from 'react-dom';
import { Result, Button, Icon } from 'choerodon-ui';
​
ReactDOM.render(
  <Result
    icon={<Icon type="wb_incandescent-o" />}
    title="Great, we have done all the operations!"
    extra={
      <Button funcType="raised" type="primary">
        Next
      </Button>
    }
  />,
  document.getElementById('container'),
);
​

自定义状态渲染

自定义状态渲染内容。

import React from 'react';
import ReactDOM from 'react-dom';
import { Result, Button } from 'choerodon-ui';
​
ReactDOM.render(
  <Result
    statusRenderer={{
      '204': (
        <img
          style={{ width: '200px' }}
          alt="example"
          src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
        />
      ),
    }}
    status={204}
    title="204"
    subTitle="客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分"
    extra={
      <Button funcType="raised" type="primary">
        No Content, Go Home Page
      </Button>
    }
  />,
  document.getElementById('container'),
);
​

API