Skip to content

Commit 6aafac2

Browse files
xudafengxudafeng
authored
feat: add my component (#44)
* feat: add components
1 parent ed57074 commit 6aafac2

5 files changed

Lines changed: 341 additions & 1 deletion

File tree

‎antd-sample/MyComponents1/index.jsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React from 'react';
2+
import {
3+
DeleteColumnOutlined,
4+
ForkOutlined,
5+
HolderOutlined,
6+
LaptopOutlined,
7+
StarOutlined,
8+
} from '@ant-design/icons';
9+
import { Button } from 'antd';
10+
import styles from './index.module.less';
11+
12+
export const MyComponent = () => {
13+
const spanText = 'Pinned';
14+
const aText = 'Customize pins';
15+
const spanText2 = 'ios-app-bootstrap';
16+
17+
// 按钮处理函数
18+
const onButtonClick = e => {};
19+
const spanText3 = 'A starting tutorial for iOS application with Swift.';
20+
const spanText4 = 'Swift';
21+
const spanText5 = '39';
22+
const spanText6 = '2o';
23+
const spanText7 = '17';
24+
const spanText8 = 'android-app-bootstrapPublic';
25+
const spanText9 = 'A starting tutorial for Android application.';
26+
const spanText10 = 'Java';
27+
const spanText11 = '27';
28+
const spanText12 = '9';
29+
30+
return (
31+
<div className={styles.wrapper}>
32+
<div className={styles.div}>
33+
<div className={styles.divDep4L1}>
34+
<span className={styles.span}>{spanText}</span>
35+
<a className={styles.a}>{aText}</a>
36+
</div>
37+
<div className={styles.divDep4L2}>
38+
<div className={styles.divDep5L1}>
39+
<div className={styles.divDep6L1}>
40+
<div className={styles.divDep7L1}>
41+
<div className={styles.divDep8L1}>
42+
<DeleteColumnOutlined className={styles.deleteColumnIcon} />
43+
<span className={styles.spanDep9L1}>{spanText2}</span>
44+
<Button
45+
size="small"
46+
onClick={onButtonClick}
47+
className={styles.button}
48+
>
49+
Public
50+
</Button>
51+
<HolderOutlined className={styles.holderIcon} />
52+
</div>
53+
<span className={styles.spanDep8L1}>{spanText3}</span>
54+
<div className={styles.divDep8L2}>
55+
<div className={styles.divDep9L1} />
56+
<span className={styles.spanDep9L2}>{spanText4}</span>
57+
<StarOutlined className={styles.starIcon} />
58+
<span className={styles.spanDep9L3}>{spanText5}</span>
59+
<span _fecodex_fontSize className={styles.spanDep9L4}>
60+
<ForkOutlined className={styles.forkIcon} />
61+
{spanText6}
62+
</span>
63+
<span className={styles.spanDep9L5}>{spanText7}</span>
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
<div className={styles.divDep5L2}>
69+
<div className={styles.divDep6L2}>
70+
<div className={styles.divDep7L2}>
71+
<div className={styles.divDep8L3}>
72+
<div className={styles.divDep9L2}>
73+
<LaptopOutlined className={styles.laptopIcon} />
74+
<span className={styles.spanDep10L1}>{spanText8}</span>
75+
</div>
76+
<span className={styles.spanDep9L6}>{spanText9}</span>
77+
<div className={styles.divDep9L3}>
78+
<div className={styles.divDep10L1} />
79+
<span className={styles.spanDep10L2}>{spanText10}</span>
80+
<StarOutlined className={styles.starIconDep10L1} />
81+
<span className={styles.spanDep10L3}>{spanText11}</span>
82+
<ForkOutlined className={styles.forkIconDep10L1} />
83+
<span className={styles.spanDep10L4}>{spanText12}</span>
84+
</div>
85+
</div>
86+
<HolderOutlined className={styles.holderIconDep8L1} />
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
);
94+
};

‎antd-sample/MyComponents1/index.module.less‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
.wrapper {
2+
background-color: rgb(255,255,255);
3+
padding: 6px 28px 6px 10px;
4+
5+
.div {
6+
display: flex;
7+
flex-direction: column;
8+
9+
.divDep4L1 {
10+
display: flex;
11+
flex-direction: row;
12+
align-items: center;
13+
14+
.span {
15+
color: #000000;
16+
font-size: 12px;
17+
}
18+
19+
.a {
20+
font-size: 12px;
21+
margin-left: 756px;
22+
}
23+
}
24+
25+
.divDep4L2 {
26+
display: flex;
27+
flex-direction: row;
28+
align-items: stretch;
29+
margin-right: 2px;
30+
margin-left: 2px;
31+
margin-top: 10px;
32+
33+
.divDep5L1 {
34+
flex: 1;
35+
36+
.divDep6L1 {
37+
border: solid 1px #D3D3D3;
38+
border-radius: 6px;
39+
border-style: solid;
40+
background-color: rgb(255,255,255);
41+
height: 100%;
42+
width: 100%;
43+
padding: 18px 16px 18px 16px;
44+
45+
.divDep7L1 {
46+
display: flex;
47+
flex-direction: column;
48+
49+
.divDep8L1 {
50+
display: flex;
51+
flex-direction: row;
52+
align-items: center;
53+
margin-left: 2px;
54+
55+
.deleteColumnIcon {
56+
font-size: 12px;
57+
margin-top: -2px;
58+
}
59+
60+
.spanDep9L1 {
61+
color: #483D8B;
62+
font-size: 12px;
63+
margin-top: 2px;
64+
margin-left: 2px;
65+
}
66+
67+
.button {
68+
margin-left: 2px;
69+
}
70+
71+
.holderIcon {
72+
margin-top: 2px;
73+
margin-left: 188px;
74+
}
75+
}
76+
77+
.spanDep8L1 {
78+
color: #696969;
79+
font-size: 12px;
80+
align-self: flex-start;
81+
margin-top: 14px;
82+
}
83+
84+
.divDep8L2 {
85+
display: flex;
86+
flex-direction: row;
87+
align-items: center;
88+
align-self: flex-start;
89+
margin-left: 2px;
90+
margin-top: 10px;
91+
92+
.divDep9L1 {
93+
background-color: rgb(254,255,255);
94+
}
95+
96+
.spanDep9L2 {
97+
color: #2B2B2B;
98+
font-size: 12px;
99+
margin-top: 2px;
100+
margin-left: 2px;
101+
}
102+
103+
.starIcon {
104+
margin-top: 2px;
105+
margin-left: 18px;
106+
}
107+
108+
.spanDep9L3 {
109+
color: #2B2B2B;
110+
font-size: 12px;
111+
margin-top: 2px;
112+
margin-left: 2px;
113+
}
114+
115+
.spanDep9L4 {
116+
font-size: 12px;
117+
margin-left: 15px;
118+
119+
.forkIcon {
120+
margin-right: 5px;
121+
}
122+
}
123+
124+
.spanDep9L5 {
125+
color: #2B2B2B;
126+
font-size: 12px;
127+
margin-top: 2px;
128+
}
129+
}
130+
}
131+
}
132+
}
133+
134+
.divDep5L2 {
135+
flex: 1;
136+
margin-left: 16px;
137+
138+
.divDep6L2 {
139+
border: solid 1px #D3D3D3;
140+
border-radius: 6px;
141+
border-style: solid;
142+
background-color: rgb(255,255,255);
143+
height: 100%;
144+
width: 100%;
145+
padding: 18px 16px 18px 16px;
146+
147+
.divDep7L2 {
148+
display: flex;
149+
flex-direction: row;
150+
151+
.divDep8L3 {
152+
display: flex;
153+
flex-direction: column;
154+
align-self: center;
155+
flex: 1;
156+
157+
.divDep9L2 {
158+
display: flex;
159+
flex-direction: row;
160+
align-items: stretch;
161+
margin-right: 2px;
162+
163+
.laptopIcon {
164+
font-size: 12px;
165+
margin-top: -2px;
166+
}
167+
168+
.spanDep10L1 {
169+
color: #483D8B;
170+
font-size: 12px;
171+
margin-top: 2px;
172+
margin-left: 10px;
173+
}
174+
}
175+
176+
.spanDep9L6 {
177+
color: #696969;
178+
font-size: 12px;
179+
margin-top: 15px;
180+
}
181+
182+
.divDep9L3 {
183+
display: flex;
184+
flex-direction: row;
185+
align-items: center;
186+
align-self: flex-start;
187+
margin-top: 12px;
188+
189+
.divDep10L1 {
190+
background-color: rgb(254,255,255);
191+
margin-top: -2px;
192+
}
193+
194+
.spanDep10L2 {
195+
color: #2B2B2B;
196+
font-size: 12px;
197+
margin-top: 2px;
198+
margin-left: 2px;
199+
}
200+
201+
.starIconDep10L1 {
202+
margin-top: -2px;
203+
margin-left: 18px;
204+
}
205+
206+
.spanDep10L3 {
207+
color: #483D8B;
208+
font-size: 12px;
209+
margin-left: 2px;
210+
}
211+
212+
.forkIconDep10L1 {
213+
margin-top: -2px;
214+
margin-left: 18px;
215+
}
216+
217+
.spanDep10L4 {
218+
color: #696969;
219+
font-size: 12px;
220+
margin-left: 2px;
221+
}
222+
}
223+
}
224+
225+
.holderIconDep8L1 {
226+
margin-top: 4px;
227+
margin-left: 10px;
228+
}
229+
}
230+
}
231+
}
232+
}
233+
}
234+
}

‎antd-sample/app.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ import './app.less';
1010

1111
import fetch from './common/fetch';
1212
import Login from './login.jsx';
13+
import { MyComponent as MyComponent1 } from './MyComponents1';
14+
15+
import styles from './app.module.less';
1316

1417
import {
1518
Layout,
@@ -94,6 +97,10 @@ class App extends React.Component {
9497
return (
9598
<Layout>
9699
<Header className="header" />
100+
<div className={styles.myComponent}>
101+
<h3>MyComponent</h3>
102+
<MyComponent1 />
103+
</div>
97104
<Content style={{ padding: 30 }}>
98105
<Select
99106
className="test-list"

‎antd-sample/app.module.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.myComponent {
2+
border: 1px solid black;
3+
padding: 20px;
4+
max-width: 60vw;
5+
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"contributor": "git-contributor"
2727
},
2828
"devDependencies": {
29-
"@ant-design/icons": "^4.7.0",
29+
"@ant-design/icons": "^5.2.6",
3030
"@babel/core": "^7.0.0",
3131
"@babel/plugin-proposal-class-properties": "^7.0.0",
3232
"@babel/plugin-proposal-decorators": "^7.0.0",

0 commit comments

Comments
 (0)