examples.md•4.53 kB
## Result 组件示例
### Success
成功的结果。
```tsx
import React from 'react';
import { Button, Result } from 'antd';
const App: React.FC = () => (
<Result
status="success"
title="Successfully Purchased Cloud Server ECS!"
subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
extra={[
<Button type="primary" key="console">
Go Console
</Button>,
<Button key="buy">Buy Again</Button>,
]}
/>
);
export default App;
```
### Info
展示处理结果。
```tsx
import React from 'react';
import { Button, Result } from 'antd';
const App: React.FC = () => (
<Result
title="Your operation has been executed"
extra={
<Button type="primary" key="console">
Go Console
</Button>
}
/>
);
export default App;
```
### Warning
警告类型的结果。
```tsx
import React from 'react';
import { Button, Result } from 'antd';
const App: React.FC = () => (
<Result
status="warning"
title="There are some problems with your operation."
extra={
<Button type="primary" key="console">
Go Console
</Button>
}
/>
);
export default App;
```
### 403
你没有此页面的访问权限。
```tsx
import React from 'react';
import { Button, Result } from 'antd';
const App: React.FC = () => (
<Result
status="403"
title="403"
subTitle="Sorry, you are not authorized to access this page."
extra={<Button type="primary">Back Home</Button>}
/>
);
export default App;
```
### 404
此页面未找到。
```tsx
import React from 'react';
import { Button, Result } from 'antd';
const App: React.FC = () => (
<Result
status="404"
title="404"
subTitle="Sorry, the page you visited does not exist."
extra={<Button type="primary">Back Home</Button>}
/>
);
export default App;
```
### 500
服务器发生了错误。
```tsx
import React from 'react';
import { Button, Result } from 'antd';
const App: React.FC = () => (
<Result
status="500"
title="500"
subTitle="Sorry, something went wrong."
extra={<Button type="primary">Back Home</Button>}
/>
);
export default App;
```
### Error
复杂的错误反馈。
```tsx
import React from 'react';
import { CloseCircleOutlined } from '@ant-design/icons';
import { Button, Result, Typography } from 'antd';
const { Paragraph, Text } = Typography;
const App: React.FC = () => (
<Result
status="error"
title="Submission Failed"
subTitle="Please check and modify the following information before resubmitting."
extra={[
<Button type="primary" key="console">
Go Console
</Button>,
<Button key="buy">Buy Again</Button>,
]}
>
<div className="desc">
<Paragraph>
<Text
strong
style={{
fontSize: 16,
}}
>
The content you submitted has the following error:
</Text>
</Paragraph>
<Paragraph>
<CloseCircleOutlined className="site-result-demo-error-icon" /> Your account has been
frozen. <a>Thaw immediately ></a>
</Paragraph>
<Paragraph>
<CloseCircleOutlined className="site-result-demo-error-icon" /> Your account is not yet
eligible to apply. <a>Apply Unlock ></a>
</Paragraph>
</div>
</Result>
);
export default App;
```
### 自定义 icon
自定义 icon。
```tsx
import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { Button, Result } from 'antd';
const App: React.FC = () => (
<Result
icon={<SmileOutlined />}
title="Great, we have done all the operations!"
extra={<Button type="primary">Next</Button>}
/>
);
export default App;
```
### 组件 Token
Component Token Debug.
```tsx
import React from 'react';
import { Button, ConfigProvider, Result } from 'antd';
const App: React.FC = () => (
<ConfigProvider
theme={{
components: {
Result: {
titleFontSize: 18,
subtitleFontSize: 14,
iconFontSize: 48,
extraMargin: `12px 0 0 0`,
},
},
}}
>
<Result
status="success"
title="Successfully Purchased Cloud Server ECS!"
subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
extra={[
<Button type="primary" key="console">
Go Console
</Button>,
<Button key="buy">Buy Again</Button>,
]}
/>
</ConfigProvider>
);
export default App;
```