mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
doc: split demos (#17415)
* split demos close #17396 * snapshot updated * split all demo * fix lint error * better code style * change complex to error * sort demos
This commit is contained in:
陈帅
GitHub
parent
b1e63be9e3
commit
1fc1710582
File diff suppressed because it is too large
Load Diff
28
components/result/demo/403.md
Normal file
28
components/result/demo/403.md
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 403
|
||||
en-US: 403
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
你没有此页面的访问权限。
|
||||
|
||||
## en-US
|
||||
|
||||
you are not authorized to access this page.
|
||||
|
||||
```jsx
|
||||
import { Result, Button } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Result
|
||||
status="403"
|
||||
title="403"
|
||||
subTitle="Sorry, you are not authorized to access this page."
|
||||
extra={<Button type="primary">Back Home</Button>}
|
||||
/>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
28
components/result/demo/404.md
Normal file
28
components/result/demo/404.md
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 404
|
||||
en-US: 404
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
此页面未找到。
|
||||
|
||||
## en-US
|
||||
|
||||
The page you visited does not exist.
|
||||
|
||||
```jsx
|
||||
import { Result, Button } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Result
|
||||
status="404"
|
||||
title="404"
|
||||
subTitle="'Sorry, the page you visited does not exist."
|
||||
extra={<Button type="primary">Back Home</Button>}
|
||||
/>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
28
components/result/demo/500.md
Normal file
28
components/result/demo/500.md
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 500
|
||||
en-US: 500
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
服务器发生了错误。
|
||||
|
||||
## en-US
|
||||
|
||||
The server is wrong.
|
||||
|
||||
```jsx
|
||||
import { Result, Button } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Result
|
||||
status="500"
|
||||
title="500"
|
||||
subTitle="Sorry, the server is wrong."
|
||||
extra={<Button type="primary">Back Home</Button>}
|
||||
/>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -1,106 +0,0 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
默认支持的各种状态的展示。
|
||||
|
||||
## en-US
|
||||
|
||||
The display of the default status.
|
||||
|
||||
```jsx
|
||||
import { Result, Radio, Button } from 'antd';
|
||||
|
||||
const StatusMap = {
|
||||
'403': {
|
||||
title: '403',
|
||||
subTitle: 'Sorry, you are not authorized to access this page.',
|
||||
extra: <Button type="primary">Back Home</Button>,
|
||||
},
|
||||
'404': {
|
||||
title: '404',
|
||||
subTitle: 'Sorry, the page you visited does not exist.',
|
||||
extra: <Button type="primary">Back Home</Button>,
|
||||
},
|
||||
'500': {
|
||||
title: '500',
|
||||
subTitle: 'Sorry, the server is wrong.',
|
||||
extra: <Button type="primary">Back Home</Button>,
|
||||
},
|
||||
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>,
|
||||
],
|
||||
},
|
||||
info: {
|
||||
title: 'Your operation has been executed',
|
||||
extra: (
|
||||
<Button type="primary" key="console">
|
||||
Go Console
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
error: {
|
||||
title: 'Submission Failed',
|
||||
subTitle: 'Please check and modify the following information before resubmitting.',
|
||||
extra: [
|
||||
<Button type="primary" key="console">
|
||||
Go Console
|
||||
</Button>,
|
||||
],
|
||||
},
|
||||
warning: {
|
||||
title: 'There are some problems with your operation.',
|
||||
extra: (
|
||||
<Button type="primary" key="console">
|
||||
Go Console
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
const StatusArray = Object.keys(StatusMap);
|
||||
|
||||
class ResultDemo extends React.Component {
|
||||
state = {
|
||||
status: '403',
|
||||
};
|
||||
|
||||
onChange = e => {
|
||||
console.log('status checked', e.target.value);
|
||||
this.setState({
|
||||
status: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { status } = this.state;
|
||||
const resultProps = StatusMap[status];
|
||||
return (
|
||||
<div>
|
||||
<p>
|
||||
<Radio.Group onChange={this.onChange} value={status}>
|
||||
{StatusArray.map(statusItem => (
|
||||
<Radio value={statusItem}>{statusItem}</Radio>
|
||||
))}
|
||||
</Radio.Group>
|
||||
</p>
|
||||
<Result status={status} {...resultProps} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<ResultDemo />, mountNode);
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 2
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 自定义 icon
|
||||
en-US: Custom icon
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
---
|
||||
order: 1
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 复杂的例子
|
||||
en-US: Complex example
|
||||
zh-CN: Error
|
||||
en-US: Error
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
提供更加复杂的反馈。
|
||||
复杂的错误反馈。
|
||||
|
||||
## en-US
|
||||
|
||||
Provide more complex feedback.
|
||||
Complex error feedback.
|
||||
|
||||
```jsx
|
||||
import { Result, Button, Icon, Typography } from 'antd';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
const { Paragraph, Text } = Typography;
|
||||
|
||||
ReactDOM.render(
|
||||
<Result
|
||||
@ -31,14 +31,23 @@ ReactDOM.render(
|
||||
]}
|
||||
>
|
||||
<div className="desc">
|
||||
<Title level={4}>The content you submitted has the following error:</Title>
|
||||
<Paragraph>
|
||||
<Text
|
||||
strong
|
||||
style={{
|
||||
fontSize: 16,
|
||||
}}
|
||||
>
|
||||
The content you submitted has the following error:
|
||||
</Text>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Icon style={{ color: 'red' }} type="close-circle" /> Your account has been frozen{' '}
|
||||
<a>Thaw immediately ></a>
|
||||
</Paragraph>
|
||||
<Paragraph>
|
||||
<Icon type="close-circle" /> Your account is not yet eligible to apply{' '}
|
||||
<a>Apply immediately ></a>
|
||||
<Icon style={{ color: 'red' }} type="close-circle" /> Your account is not yet eligible to
|
||||
apply <a>Apply Unlock ></a>
|
||||
</Paragraph>
|
||||
</div>
|
||||
</Result>,
|
||||
30
components/result/demo/info.md
Normal file
30
components/result/demo/info.md
Normal file
@ -0,0 +1,30 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: Info
|
||||
en-US: Info
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
展示处理结果。
|
||||
|
||||
## en-US
|
||||
|
||||
Show processing results.
|
||||
|
||||
```jsx
|
||||
import { Result, Button } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Result
|
||||
title="Your operation has been executed"
|
||||
extra={
|
||||
<Button type="primary" key="console">
|
||||
Go Console
|
||||
</Button>
|
||||
}
|
||||
/>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
33
components/result/demo/success.md
Normal file
33
components/result/demo/success.md
Normal file
@ -0,0 +1,33 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: Success
|
||||
en-US: Success
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
成功的结果。
|
||||
|
||||
## en-US
|
||||
|
||||
Show successful results.
|
||||
|
||||
```jsx
|
||||
import { Result, Button } from 'antd';
|
||||
|
||||
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 type="primary" key="console">
|
||||
Go Console
|
||||
</Button>,
|
||||
<Button key="buy">Buy Again</Button>,
|
||||
]}
|
||||
/>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
31
components/result/demo/warning.md
Normal file
31
components/result/demo/warning.md
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: Warning
|
||||
en-US: Warning
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
警告类型的结果。
|
||||
|
||||
## en-US
|
||||
|
||||
The result of the warning.
|
||||
|
||||
```jsx
|
||||
import { Result, Button } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<Result
|
||||
status="warning"
|
||||
title="There are some problems with your operation."
|
||||
extra={
|
||||
<Button type="primary" key="console">
|
||||
Go Console
|
||||
</Button>
|
||||
}
|
||||
/>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user