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