Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
A
ant-design-pro
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
duanledexianxianxian
ant-design-pro
Commits
1d31618f
Commit
1d31618f
authored
Nov 21, 2017
by
nikogu
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add SimpleCard style to fixed:
https://github.com/ant-design/ant-design-pro/issues/192
parent
0688459b
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
92 additions
and
30 deletions
+92
-30
src/components/Charts/ChartCard/index.js
src/components/Charts/ChartCard/index.js
+28
-12
src/components/Charts/ChartCard/index.less
src/components/Charts/ChartCard/index.less
+26
-1
src/components/Charts/demo/chart-card.md
src/components/Charts/demo/chart-card.md
+38
-17
No files found.
src/components/Charts/ChartCard/index.js
View file @
1d31618f
import
React
from
'
react
'
;
import
{
Card
,
Spin
}
from
'
antd
'
;
import
classNames
from
'
classnames
'
;
import
styles
from
'
./index.less
'
;
const
ChartCard
=
({
loading
=
false
,
contentHeight
,
title
,
action
,
total
,
footer
,
children
,
...
rest
loading
=
false
,
contentHeight
,
title
,
a
vatar
,
a
ction
,
total
,
footer
,
children
,
...
rest
})
=>
{
const
content
=
(
<
div
className
=
{
styles
.
chartCard
}
>
<
div
className
=
{
styles
.
meta
}
>
<
span
className
=
{
styles
.
title
}
>
{
title
}
<
/span
>
<
span
className
=
{
styles
.
action
}
>
{
action
}
<
/span
>
<
div
className
=
{
classNames
(
styles
.
chartTop
,
{
[
styles
.
chartTopMargin
]:
(
!
children
&&
!
footer
)
})}
>
<
div
className
=
{
styles
.
avatar
}
>
{
avatar
}
<
/div
>
<
div
className
=
{
styles
.
metaWrap
}
>
<
div
className
=
{
styles
.
meta
}
>
<
span
className
=
{
styles
.
title
}
>
{
title
}
<
/span
>
<
span
className
=
{
styles
.
action
}
>
{
action
}
<
/span
>
<
/div
>
{
// eslint-disable-next-line
total
&&
(
<
div
className
=
{
styles
.
total
}
dangerouslySetInnerHTML
=
{{
__html
:
total
}}
/>
)
}
<
/div
>
<
/div
>
{
// eslint-disable-next-line
total
&&
<
div
className
=
{
styles
.
total
}
dangerouslySetInnerHTML
=
{{
__html
:
total
}}
/
>
children
&&
(
<
div
className
=
{
styles
.
content
}
style
=
{{
height
:
contentHeight
||
'
auto
'
}}
>
<
div
className
=
{
contentHeight
&&
styles
.
contentFixed
}
>
{
children
}
<
/div
>
<
/div
>
)
}
<
div
className
=
{
styles
.
content
}
style
=
{{
height
:
contentHeight
||
'
auto
'
}}
>
<
div
className
=
{
contentHeight
&&
styles
.
contentFixed
}
>
{
children
}
<
/div
>
<
/div
>
{
footer
&&
(
<
div
className
=
{
styles
.
footer
}
>
<
div
className
=
{
classNames
(
styles
.
footer
,
{
[
styles
.
footerMargin
]:
!
children
})
}
>
{
footer
}
<
/div
>
)
...
...
src/components/Charts/ChartCard/index.less
View file @
1d31618f
...
...
@@ -2,10 +2,32 @@
.chartCard {
position: relative;
.chartTop {
position: relative;
overflow: hidden;
width: 100%;
}
.chartTopMargin {
margin-bottom: 12px;
}
.chartTopHasMargin {
margin-bottom: 20px;
}
.metaWrap {
float: left;
}
.avatar {
position: relative;
top: 4px;
float: left;
margin-right: 20px;
img {
border-radius: 100%;
}
}
.meta {
color: @text-color-secondary;
font-size: @font-size-base;
position: relative;
line-height: 22px;
height: 22px;
}
...
...
@@ -46,4 +68,7 @@
position: relative;
}
}
.footerMargin {
margin-top: 20px;
}
}
src/components/Charts/demo/chart-card.md
View file @
1d31618f
...
...
@@ -8,25 +8,46 @@ title: 图表卡片
````
jsx
import
{
ChartCard
,
yuan
,
Field
}
from
'
ant-design-pro/lib/Charts
'
;
import
Trend
from
'
ant-design-pro/lib/Trend
'
;
import
{
Tooltip
,
Icon
}
from
'
antd
'
;
import
{
Row
,
Col
,
Icon
,
Tooltip
}
from
'
antd
'
;
import
numeral
from
'
numeral
'
;
ReactDOM
.
render
(
<
ChartCard
title
=
"销售额"
action
=
{
<
Tooltip
title
=
"指标说明"
><
Icon
type
=
"info-circle-o"
/></
Tooltip
>
}
total
=
{
yuan
(
126560
)
}
footer
=
{
<
Field
label
=
"日均销售额"
value
=
{
numeral
(
12423
).
format
(
'
0,0
'
)
}
/>
}
contentHeight
=
{
46
}
>
<
span
>
周同比
<
Trend
flag
=
"up"
style
=
{
{
marginLeft
:
8
,
color
:
'
rgba(0,0,0,.85)
'
}
}
>
12%
</
Trend
>
</
span
>
<
span
style
=
{
{
marginLeft
:
16
}
}
>
日环比
<
Trend
flag
=
"down"
style
=
{
{
marginLeft
:
8
,
color
:
'
rgba(0,0,0,.85)
'
}
}
>
11%
</
Trend
>
</
span
>
</
ChartCard
>
<
Row
>
<
Col
span
=
{
24
}
>
<
ChartCard
title
=
"销售额"
action
=
{
<
Tooltip
title
=
"指标说明"
><
Icon
type
=
"info-circle-o"
/></
Tooltip
>
}
total
=
{
yuan
(
126560
)
}
footer
=
{
<
Field
label
=
"日均销售额"
value
=
{
numeral
(
12423
).
format
(
'
0,0
'
)
}
/>
}
contentHeight
=
{
46
}
>
<
span
>
周同比
<
Trend
flag
=
"up"
style
=
{
{
marginLeft
:
8
,
color
:
'
rgba(0,0,0,.85)
'
}
}
>
12%
</
Trend
>
</
span
>
<
span
style
=
{
{
marginLeft
:
16
}
}
>
日环比
<
Trend
flag
=
"down"
style
=
{
{
marginLeft
:
8
,
color
:
'
rgba(0,0,0,.85)
'
}
}
>
11%
</
Trend
>
</
span
>
</
ChartCard
>
</
Col
>
<
Col
span
=
{
24
}
style
=
{
{
marginTop
:
24
}
}
>
<
ChartCard
title
=
"移动指标"
avatar
=
{
<
img
style
=
{
{
width
:
56
,
height
:
56
}
}
src
=
"https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
/>
}
action
=
{
<
Tooltip
title
=
"指标说明"
><
Icon
type
=
"info-circle-o"
/></
Tooltip
>
}
total
=
{
yuan
(
126560
)
}
footer
=
{
<
Field
label
=
"日均销售额"
value
=
{
numeral
(
12423
).
format
(
'
0,0
'
)
}
/>
}
/>
</
Col
>
<
Col
span
=
{
24
}
style
=
{
{
marginTop
:
24
}
}
>
<
ChartCard
title
=
"移动指标"
avatar
=
{
<
img
style
=
{
{
width
:
56
,
height
:
56
}
}
src
=
"https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"
/>
}
action
=
{
<
Tooltip
title
=
"指标说明"
><
Icon
type
=
"info-circle-o"
/></
Tooltip
>
}
total
=
{
yuan
(
126560
)
}
/>
</
Col
>
</
Row
>
,
mountNode
);
````
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment