Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
A
ant-design-pro
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Registry
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Thiago Borges
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
index.js
src/components/Charts/ChartCard/index.js
+28
-12
index.less
src/components/Charts/ChartCard/index.less
+26
-1
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
React
from
'react'
;
import
{
Card
,
Spin
}
from
'antd'
;
import
{
Card
,
Spin
}
from
'antd'
;
import
classNames
from
'classnames'
;
import
styles
from
'./index.less'
;
import
styles
from
'./index.less'
;
const
ChartCard
=
({
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
=
(
const
content
=
(
<
div
className
=
{
styles
.
chartCard
}
>
<
div
className
=
{
styles
.
chartCard
}
>
<
div
className
=
{
styles
.
meta
}
>
<
div
<
span
className
=
{
styles
.
title
}
>
{
title
}
<
/span
>
className
=
{
classNames
(
styles
.
chartTop
,
{
[
styles
.
chartTopMargin
]:
(
!
children
&&
!
footer
)
})}
<
span
className
=
{
styles
.
action
}
>
{
action
}
<
/span
>
>
<
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
>
<
/div
>
{
{
// eslint-disable-next-line
children
&&
(
total
&&
<
div
className
=
{
styles
.
total
}
dangerouslySetInnerHTML
=
{{
__html
:
total
}}
/
>
<
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
&&
(
footer
&&
(
<
div
className
=
{
styles
.
footer
}
>
<
div
className
=
{
classNames
(
styles
.
footer
,
{
[
styles
.
footerMargin
]:
!
children
})
}
>
{
footer
}
{
footer
}
<
/div
>
<
/div
>
)
)
...
...
src/components/Charts/ChartCard/index.less
View file @
1d31618f
...
@@ -2,10 +2,32 @@
...
@@ -2,10 +2,32 @@
.chartCard {
.chartCard {
position: relative;
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 {
.meta {
color: @text-color-secondary;
color: @text-color-secondary;
font-size: @font-size-base;
font-size: @font-size-base;
position: relative;
line-height: 22px;
line-height: 22px;
height: 22px;
height: 22px;
}
}
...
@@ -46,4 +68,7 @@
...
@@ -46,4 +68,7 @@
position: relative;
position: relative;
}
}
}
}
.footerMargin {
margin-top: 20px;
}
}
}
src/components/Charts/demo/chart-card.md
View file @
1d31618f
...
@@ -8,25 +8,46 @@ title: 图表卡片
...
@@ -8,25 +8,46 @@ title: 图表卡片
```
`jsx
```
`jsx
import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
import Trend from 'ant-design-pro/lib/Trend';
import Trend from 'ant-design-pro/lib/Trend';
import {
Tooltip, Icon
} from 'antd';
import {
Row, Col, Icon, Tooltip
} from 'antd';
import numeral from 'numeral';
import numeral from 'numeral';
ReactDOM.render(
ReactDOM.render(
<ChartCard
<Row>
title="销售额"
<Col span={24}>
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
<ChartCard
total={yuan(126560)}
title="销售额"
footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
contentHeight={46}
total={yuan(126560)}
>
footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
<span>
contentHeight={46}
周同比
>
<Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
<span>
</span>
周同比
<span style={{ marginLeft: 16 }}>
<Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
日环比
</span>
<Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
<span style={{ marginLeft: 16 }}>
</span>
日环比
</ChartCard>
<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);
, 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