Commit 2c0e700f authored by jim's avatar jim

Merge branch 'master' into v2

parents 84315b3a a144bbd0
...@@ -10,7 +10,7 @@ import Trend from 'ant-design-pro/lib/Trend'; ...@@ -10,7 +10,7 @@ import Trend from 'ant-design-pro/lib/Trend';
ReactDOM.render( ReactDOM.render(
<div> <div>
<Trend flag="up">12%</Trend> <Trend flag="up" >12%</Trend>
<Trend flag="down" style={{ marginLeft: 8 }}>11%</Trend> <Trend flag="down" style={{ marginLeft: 8 }}>11%</Trend>
</div> </div>
, mountNode); , mountNode);
......
---
order: 0
title: 颜色反转
---
在数值背后添加一个小图标来标识涨跌情况。
````jsx
import Trend from 'ant-design-pro/lib/Trend';
ReactDOM.render(
<div>
<Trend flag="up" reverseColor={true} >12%</Trend>
<Trend flag="down" reverseColor={true} style={{ marginLeft: 8 }}>11%</Trend>
</div>
, mountNode);
````
...@@ -4,6 +4,7 @@ export interface ITrendProps { ...@@ -4,6 +4,7 @@ export interface ITrendProps {
colorful?: boolean; colorful?: boolean;
flag: 'up' | 'down'; flag: 'up' | 'down';
style?: React.CSSProperties; style?: React.CSSProperties;
reverseColor?: boolean;
} }
export default class Trend extends React.Component<ITrendProps, any> {} export default class Trend extends React.Component<ITrendProps, any> {}
...@@ -3,11 +3,12 @@ import { Icon } from 'antd'; ...@@ -3,11 +3,12 @@ import { Icon } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from './index.less'; import styles from './index.less';
const Trend = ({ colorful = true, flag, children, className, ...rest }) => { const Trend = ({ colorful = true, reverseColor = false, flag, children, className, ...rest }) => {
const classString = classNames( const classString = classNames(
styles.trendItem, styles.trendItem,
{ {
[styles.trendItemGrey]: !colorful, [styles.trendItemGrey]: !colorful,
[styles.reverseColor]: reverseColor && colorful,
}, },
className className
); );
......
...@@ -27,4 +27,11 @@ ...@@ -27,4 +27,11 @@
&.trendItemGrey .down { &.trendItemGrey .down {
color: @text-color; color: @text-color;
} }
&.reverseColor .up {
color: @green-6;
}
&.reverseColor .down {
color: @red-6;
}
} }
...@@ -19,3 +19,4 @@ order: 14 ...@@ -19,3 +19,4 @@ order: 14
|----------|------------------------------------------|-------------|-------| |----------|------------------------------------------|-------------|-------|
| colorful | 是否彩色标记 | Boolean | true | | colorful | 是否彩色标记 | Boolean | true |
| flag | 上升下降标识:`up|down` | string | - | | flag | 上升下降标识:`up|down` | string | - |
| reverseColor | 颜色反转 | Boolean | true |
...@@ -151,7 +151,7 @@ export default class BasicForms extends PureComponent { ...@@ -151,7 +151,7 @@ export default class BasicForms extends PureComponent {
} }
> >
{getFieldDecorator('weight')(<InputNumber placeholder="请输入" min={0} max={100} />)} {getFieldDecorator('weight')(<InputNumber placeholder="请输入" min={0} max={100} />)}
<span>%</span> <span className="ant-form-text">%</span>
</FormItem> </FormItem>
<FormItem {...formItemLayout} label="目标公开" help="客户、邀评人默认被分享"> <FormItem {...formItemLayout} label="目标公开" help="客户、邀评人默认被分享">
<div> <div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment