add step example

This commit is contained in:
silenceqi 2020-03-12 19:57:19 +08:00
parent e37be7167c
commit 0e8f1b6082
3 changed files with 28 additions and 13 deletions

1
.gitignore vendored
View File

@ -4,6 +4,7 @@
.vscode
.DS_Store
.umi
*.swp
dist
run

View File

@ -28,7 +28,7 @@ export default [
{
path: '/dashboard/analysis',
name: 'collect',
// component: './Dashboard/Analysis',
component: './helloworld',
},
{
path: '/dashboard/monitor',

View File

@ -1,20 +1,34 @@
import {Component} from 'react';
import {Card} from 'antd';
import { Steps } from 'antd';
import {LoadingOutlined} from '@ant-design/icons';
const { Step } = Steps;
class Helloworld extends Component {
render() {
return (
<Card>
<Card.Meta
avatar={<img
alt=""
style={{ width: '64px', height: '64px', borderRadius: '32px' }}
src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"
/>}
title="Alipay"
description="在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,这些类似的组件会被抽离成一套标准规范。"
/>
</Card>
return (
<div>
<Card>
<Card.Meta
avatar={<img
alt=""
style={{ width: '64px', height: '64px', borderRadius: '32px' }}
src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"
/>}
title="Alipay"
description="在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,这些类似的组件会被抽离成一套标准规范。"
/>
</Card>
<Steps style={{margin:'50px auto', backgroundColor:'#fff', padding:'50px 0'}} direction="horizontal" labelPlacement="vertical" size="small" current={1}>
<Step title="校验参数" description="This is a description." />
<Step title="安装或更新" icon={<LoadingOutlined />} description="This is a description." />
<Step title="初始化项目" description="This is a description." />
<Step title="安装依赖" description="This is a description." />
<Step title="项目创建成功" description="This is a description." />
</Steps>
</div>
);
}
}