feat(componentTest): 添加组件测试页面基础结构(样式未开发)
parent
5b2f1020d2
commit
c375745670
@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
import styles from './style/index.module.less';
|
||||
import { Button, Input, Radio, Space, Tag, Divider } from '@arco-design/web-react';
|
||||
import { IconSearch } from '@arco-design/web-react/icon';
|
||||
import SideBar from '@/pages/componentDevelopment/componentTest/sideBar';
|
||||
import InstanceList from '@/pages/componentDevelopment/componentTest/instanceList';
|
||||
|
||||
const Group = Radio.Group;
|
||||
|
||||
const ComponentTest = () => {
|
||||
return (
|
||||
<div className={styles['component-test']}>
|
||||
<div className={styles['header']}>
|
||||
<Group defaultValue={'Beijing'} name="button-radio-group">
|
||||
{['总数126', '已测试45', '未测试81'].map((item, index) => {
|
||||
return (
|
||||
<Radio key={item} value={item}>
|
||||
{({ checked }) => {
|
||||
return (
|
||||
<Tag size="large" tabIndex={-1} key={item} color={['purple', 'arcoblue', 'orangered'][index]}>
|
||||
{item}
|
||||
</Tag>
|
||||
);
|
||||
}}
|
||||
</Radio>
|
||||
);
|
||||
})}
|
||||
</Group>
|
||||
|
||||
<Space split={<Divider type="vertical" />}>
|
||||
<Input
|
||||
prefix={<IconSearch />}
|
||||
placeholder={'搜索'}
|
||||
style={{ width: 236 }}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: 5, borderRadius: 4 }}
|
||||
>
|
||||
实例指引
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
<div className={styles['content']}>
|
||||
<div className={styles['left']}>
|
||||
<SideBar />
|
||||
</div>
|
||||
<div className={styles['right']}>
|
||||
<InstanceList />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ComponentTest;
|
||||
@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
const InstanceList = () => {
|
||||
return (
|
||||
<div>
|
||||
实例列表
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InstanceList;
|
||||
@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
const SideBar = () => {
|
||||
return (
|
||||
<div>
|
||||
侧边栏
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideBar;
|
||||
@ -0,0 +1,25 @@
|
||||
.component-test {
|
||||
height: 98%;
|
||||
background-color: #ffffff;
|
||||
padding: 17px 19px 0 24px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
|
||||
.left {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue