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
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | title 文字 | ReactNode | - |
subTitle | subTitle 文字 | ReactNode | - |
status | 结果的状态,决定图标和颜色 | success | error | info | warning | 404 | 403 | 500 | info |
icon | 自定义 icon | ReactNode | - |
extra | 操作区 | ReactNode | - |
statusRenderer | 自定义状态展示,可以覆盖现有状态展示,也可以增加状态展示,支持全局配置 | object | - |
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .