After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls，the flow of form data will be handled by Form which will cause:
After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause:
1. You shouldn't use `onChange` to collect data, but you still can listen to `onChange`(and so on) events.
2. You cannot set value of form control via `value``defaultValue` prop, and you should set default value with `initialValue` in `getFieldDecorator` instead.
@ -43,7 +43,7 @@ The first level navigation is inclined left near a logo, and the secondary menu
- **Enlarge the size of the font**
`12px`、`14px` is a standard font size of navigations，`14px` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.
`12px`, `14px` is a standard font size of navigations, `14px` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.
| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | 0 or \[0, 0] |
| disabled | If true, the slider will not be interactable. | boolean | false |
| dots | Whether the thumb can drag over tick only. | boolean | false |
| included | Make effect when `marks` not null，`true` means containment and `false` means coordinative | boolean | true |
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max] ，each mark can declare its own style. | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |
| included | Make effect when `marks` not null, `true` means containment and `false` means coordinative | boolean | true |
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style. | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |
| max | The maximum value the slider can slide to | number | 100 |
| min | The minimum value the slider can slide to. | number | 0 |
@ -69,7 +69,7 @@ Note that do not exclude antd package in node_modules when using less-loader.
### Customize in roadhog or Umi
You can easily use `theme` field in [.webpackrc](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18) (roadhog) or [config/config.js](https://github.com/ant-design/ant-design-pro/blob/56e648ec14bdb9f6724169fd64830447e224ccb1/config/config.js#L45) (Umi) file of your project root directory if you are using [roadhog](https://github.com/sorrycc/roadhog) or [Umi](http://umijs.org/)，which could be a object or a javascript file path.
You can easily use `theme` field in [.webpackrc](https://github.com/ant-design/ant-design-pro/blob/b7e7983661eb5e53dc807452e9653e93e74276d4/.webpackrc.js#L18) (roadhog) or [config/config.js](https://github.com/ant-design/ant-design-pro/blob/56e648ec14bdb9f6724169fd64830447e224ccb1/config/config.js#L45) (Umi) file of your project root directory if you are using [roadhog](https://github.com/sorrycc/roadhog) or [Umi](http://umijs.org/), which could be a object or a javascript file path.
@ -48,7 +48,7 @@ You can subscribe to this feed for new version notifications: https://github.com
### Using npm or yarn
**We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
**We recommend using npm or yarn to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
```bash
$ npm install antd --save
@ -58,7 +58,7 @@ $ npm install antd --save
$ yarn add antd
```
If you are in a bad network environment，you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
In order to help user make a quick operation (something like the form，modal), a more important operation or a operation with higher frequency would be emphasized.
In order to help user make a quick operation (something like the form, modal), a more important operation or a operation with higher frequency would be emphasized.
> Notes: ways of emphasizing are not just to intensify the key item. It could also weaken the other items.
@ -29,7 +29,7 @@ If the priority is given to 『readability』 and the 『editability』 of opera
Multi-Field Inline Edit
>Note：In『Multi-Field Inline Edit』，there are huge different between the content and required field，So it is more needed to use the [『Explain What Just Happened』](../docs/spec/transition#解释刚刚发生了什么) in 『Use Transition』to eliminate this visual effects.
>Note：In『Multi-Field Inline Edit』, there are huge different between the content and required field, So it is more needed to use the [『Explain What Just Happened』](../docs/spec/transition#解释刚刚发生了什么) in 『Use Transition』to eliminate this visual effects.
<br>
@ -38,7 +38,7 @@ Multi-Field Inline Edit
## Drag and Drop
<imgclass="preview-img"align="right"alt="Example of Drag and Drop List"description="Status 1: On mouse hover,a removable 『icon』 appears.；<br>Status 2： When hovering over the 『icon』，the pointer changes into a 『hand』， click-and-drag operation can be used；<br>Status 3：Drag target to the placeable block. When blue stroke appears, inform user that object can be placed in the block."src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">
<imgclass="preview-img"align="right"alt="Example of Drag and Drop List"description="Status 1: On mouse hover,a removable 『icon』 appears.；<br>Status 2： When hovering over the 『icon』, the pointer changes into a 『hand』, click-and-drag operation can be used；<br>Status 3：Drag target to the placeable block. When blue stroke appears, inform user that object can be placed in the block."src="https://gw.alipayobjects.com/zos/rmsportal/xZWSNecZhGXaAVluxOAK.png">
The color of the icon should be consistent the color of the surrounding copy, unless the icon is being used to express state (in which case it should be colored accordingly).
@ -20,7 +20,7 @@ Divide the hierarchy of information through three formats:『small spacing』,
In the case that the three formats are applicable, the hierarchy of information can be separated clearly through adding or cutting down the multiple of 『basic spacing』, or adding elements.
> Note: in Ant Design, y=8+8*n, among which，n>=0，y stands for the vertical spacing and 8 represents 『basic spacing』.
> Note: in Ant Design, y = 8 + 8 * n, among which, n >= 0, y stands for the vertical spacing and 8 represents 『basic spacing』.
Solve most of problems on the same page and avoid a new one, because the page refresh and forwarding can lead to change blindness, in addition to disrupting the user’s mental flow.
> ** Change Blindness** is a surprising perceptual phenomenon that occurs when a change in a visual stimulus is introduced and the observer does not notice it. People's poor ability to detect changes has been argued to reflect fundamental limitations of human attention，from the term of Change blindness, Wikipedia.
> ** Change Blindness** is a surprising perceptual phenomenon that occurs when a change in a visual stimulus is introduced and the observer does not notice it. People's poor ability to detect changes has been argued to reflect fundamental limitations of human attention, from the term of Change blindness, Wikipedia.
> ** Flow**, also known as the zone, is the mental state of operation in which a person performing an activity is fully immersed in a feeling of energized focus, full involvement, and enjoyment in the process of the activity, from the term of Flow, Wikipedia
zy410419243
6 years ago