Browse Source
* remove cursor pointer * tweak pie position * Refactor Trend * Use Trend replace IconUp IconDown * update demo and api doc * Move Trend outside Chartspull/28/head
偏右
9 years ago
committed by
GitHub
GitHub
13 changed files with 130 additions and 180 deletions
@ -1,29 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
import { Icon } from 'antd'; |
|
||||
import classNames from 'classnames'; |
|
||||
import styles from './index.less'; |
|
||||
|
|
||||
const IconUp = ({ color, className, ...rest }) => ( |
|
||||
<Icon |
|
||||
{...rest} |
|
||||
className={classNames(styles.normal, className, { |
|
||||
[styles.up]: color !== false, |
|
||||
})} |
|
||||
type="caret-up" |
|
||||
/> |
|
||||
); |
|
||||
|
|
||||
const IconDown = ({ color, className, ...rest }) => ( |
|
||||
<Icon |
|
||||
{...rest} |
|
||||
className={classNames(styles.normal, className, { |
|
||||
[styles.down]: color !== false, |
|
||||
})} |
|
||||
type="caret-down" |
|
||||
/> |
|
||||
); |
|
||||
|
|
||||
export default { |
|
||||
IconUp, |
|
||||
IconDown, |
|
||||
}; |
|
||||
@ -1,15 +0,0 @@ |
|||||
@import "~antd/lib/style/themes/default.less"; |
|
||||
|
|
||||
.normal { |
|
||||
color: @text-color-secondary; |
|
||||
font-size: 12px; |
|
||||
transform: scale(83%); |
|
||||
} |
|
||||
|
|
||||
.up { |
|
||||
color: @green-6; |
|
||||
} |
|
||||
|
|
||||
.down { |
|
||||
color: @red-6; |
|
||||
} |
|
||||
@ -1,34 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
import { Icon } from 'antd'; |
|
||||
|
|
||||
import styles from './index.less'; |
|
||||
|
|
||||
const Item = ({ title, flag, children, ...rest }) => { |
|
||||
return ( |
|
||||
<div {...rest} className={styles.trendItem}> |
|
||||
<div className={styles.content}> |
|
||||
<span className={styles.title}>{title}</span> |
|
||||
<span className={styles.value}>{children}</span> |
|
||||
{flag && <span className={styles[flag]}><Icon type={`caret-${flag}`} /></span>} |
|
||||
</div> |
|
||||
</div> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
class Trend extends React.Component { |
|
||||
render() { |
|
||||
const { colorType, children, ...rest } = this.props; |
|
||||
return ( |
|
||||
<div |
|
||||
className={colorType ? (styles[`trend${colorType}`] || styles.trend) : styles.trend} |
|
||||
{...rest} |
|
||||
> |
|
||||
{children} |
|
||||
</div> |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
Trend.Item = Item; |
|
||||
|
|
||||
export default Trend; |
|
||||
@ -1,58 +0,0 @@ |
|||||
@import "~antd/lib/style/themes/default.less"; |
|
||||
@import "../../../utils/utils.less"; |
|
||||
|
|
||||
.trend { |
|
||||
font-size: 0; |
|
||||
height: 22px; |
|
||||
white-space: nowrap; |
|
||||
overflow: hidden; |
|
||||
text-overflow: ellipsis; |
|
||||
} |
|
||||
|
|
||||
.trendItem { |
|
||||
display: inline-block; |
|
||||
color: @text-color; |
|
||||
font-size: @font-size-base; |
|
||||
line-height: 22px; |
|
||||
height: 22px; |
|
||||
& + & { |
|
||||
margin-left: 16px; |
|
||||
} |
|
||||
.content { |
|
||||
display: block; |
|
||||
} |
|
||||
.miniContent { |
|
||||
display: none; |
|
||||
} |
|
||||
.title { |
|
||||
margin-right: 8px; |
|
||||
} |
|
||||
.value { |
|
||||
color: @heading-color; |
|
||||
} |
|
||||
.up, .down { |
|
||||
color: @green-6; |
|
||||
margin-left: 4px; |
|
||||
position: relative; |
|
||||
top: 1px; |
|
||||
i { |
|
||||
font-size: 12px; |
|
||||
transform: scale(0.83); |
|
||||
} |
|
||||
} |
|
||||
.down { |
|
||||
color: @red-6; |
|
||||
top: -1px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.trendItem:last-child { |
|
||||
margin-right: 0; |
|
||||
} |
|
||||
|
|
||||
.trendgray { |
|
||||
.trend(); |
|
||||
.trendItem { |
|
||||
color: @text-color; |
|
||||
} |
|
||||
} |
|
||||
@ -0,0 +1,22 @@ |
|||||
|
import React from 'react'; |
||||
|
import { Icon } from 'antd'; |
||||
|
import classNames from 'classnames'; |
||||
|
import styles from './index.less'; |
||||
|
|
||||
|
const Trend = ({ colorful = true, flag, children, className, ...rest }) => { |
||||
|
const classString = classNames(styles.trendItem, { |
||||
|
[styles.trendItemGrey]: !colorful, |
||||
|
}, className); |
||||
|
return ( |
||||
|
<div |
||||
|
{...rest} |
||||
|
className={classString} |
||||
|
title={typeof children === 'string' ? children : ''} |
||||
|
> |
||||
|
<span className={styles.value}>{children}</span> |
||||
|
{flag && <span className={styles[flag]}><Icon type={`caret-${flag}`} /></span>} |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default Trend; |
||||
@ -0,0 +1,32 @@ |
|||||
|
@import "~antd/lib/style/themes/default.less"; |
||||
|
@import "../../utils/utils.less"; |
||||
|
|
||||
|
.trendItem { |
||||
|
display: inline-block; |
||||
|
font-size: @font-size-base; |
||||
|
line-height: 22px; |
||||
|
|
||||
|
& + & { |
||||
|
margin-left: 16px; |
||||
|
} |
||||
|
.up, |
||||
|
.down { |
||||
|
color: @green-6; |
||||
|
margin-left: 4px; |
||||
|
position: relative; |
||||
|
top: 1px; |
||||
|
i { |
||||
|
font-size: 12px; |
||||
|
transform: scale(0.83); |
||||
|
} |
||||
|
} |
||||
|
.down { |
||||
|
color: @red-6; |
||||
|
top: -1px; |
||||
|
} |
||||
|
|
||||
|
&.trendItemGrey .up, |
||||
|
&.trendItemGrey .down { |
||||
|
color: @text-color; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,19 @@ |
|||||
|
--- |
||||
|
type: General |
||||
|
title: Trend |
||||
|
subtitle: 趋势标记 |
||||
|
cols: 1 |
||||
|
--- |
||||
|
|
||||
|
趋势符号，标记上升和下降状态。 |
||||
|
|
||||
|
## API |
||||
|
|
||||
|
```html |
||||
|
<Trend flag="up">50%</Trend> |
||||
|
``` |
||||
|
|
||||
|
| 参数 | 说明 | 类型 | 默认值 | |
||||
|
|----------|------------------------------------------|-------------|-------| |
||||
|
| colorful | 是否彩色标记 | Boolean | true | |
||||
|
| flag | 上升下降标识：`up\|down` | string | - | |
||||
Loading…
Reference in new issue