@ -26,9 +26,11 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
| size | can be set to `small``large` or omitted | string | `default` |
| target | same as target attribute of a, works when href is specified | string | - |
| type | can be set to `primary``ghost``dashed``danger`(added in 2.7) or omitted (meaning `default`) | string | `default` |
| onClick | set the handler to handle `click` event | function | - |
| onClick | set the handler to handle `click` event | (event) => void | - |
| block | option to fit button width to its parent width | boolean | `false` |
It accepts all props which native button support.
`<Button>Hello world!</Button>` will be rendered into `<button><span>Hello world!</span></button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.
`<Button href="http://example.com">Hello world!</Button>` will be rendered into `<a href="http://example.com"><span>Hello world!</span></a>`.
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - |
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
| showTime.defaultValue | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
@ -20,10 +20,10 @@ The first level navigation is inclined left near a logo, and the secondary menu
### Interaction rules
- The first level navigation and the last level navigation should be distincted by visualization;
- The first level navigation and the last level navigation should be distinguishable by visualization;
- The current item should have the highest priority of visualization;
- When the current navigation item is collapsed, the stlye of the current navigation item will be applied to its parent level;
- The left side navigation bar has support for both the accordion and expanding styles, you can choose the one that fits your case best.
- When the current navigation item is collapsed, the style of the current navigation item is applied to its parent level;
- The left side navigation bar has support for both the accordion and expanding styles; you can choose the one that fits your case the best.
## Visualization rules
@ -31,27 +31,27 @@ The first level navigation is inclined left near a logo, and the secondary menu
- **Emphasis by colorblock**
When background color is a deep color, you can use this pattern for the parent level navigation item of current page.
When background color is a deep color, you can use this pattern for the parent level navigation item of the current page.
- **The highlight match stick**
When background color is a light color, you can use this pattern for the current page navigation item, we recommed using it for the last item of the navigation path.
When background color is a light color, you can use this pattern for the current page navigation item; we recommend using it for the last item of the navigation path.
- **Hightlighted font**
- **Highlighted font**
From the visualization aspect, hightlighted font is stronger than colorblock, this pattern is often used for the parent level of the current item.
From the visualization aspect, a highlighted font is stronger than colorblock; this pattern is often used for the parent level of the current item.
- **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 a appropriate font size in terms of 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.
## Component Overview
- `Layout`: The layout wrapper, in which `Header``Sider``Content``Footer` or `Layout` itself can be nested, and can be placed in any parent container.
- `Header`: The top layout with default style, in which any element can be nested, and must be placed in `Layout`.
- `Header`: The top layout with the default style, in which any element can be nested, and must be placed in `Layout`.
- `Sider`: The sidebar with default style and basic functions, in which any element can be nested, and must be placed in `Layout`.
- `Content`: The content layout with default style, in which any element can be nested, and must be placed in `Layout`.
- `Footer`: The bottom layout with default style, in which any element can be nested, and must be placed in `Layout`.
- `Content`: The content layout with the default style, in which any element can be nested, and must be placed in `Layout`.
- `Footer`: The bottom layout with the default style, in which any element can be nested, and must be placed in `Layout`.
> Based on `flex layout`, please pay attention to the [compatibility](http://caniuse.com/#search=flex).
### It doesn't work when I change `defaultValue` dynamically.
The `defaultXxxx` (like `defaultValue`) of `Input`/`Select`(etc...) only works in first render. It is a specification of React, please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
The `defaultXxxx` (like `defaultValue`) of `Input`/`Select`(etc...) only works in first render. It is a specification of React; please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
### I set the `value` of `Input`/`Select`(etc...), and then, it cannot be changed by user's action.
@ -72,9 +72,9 @@ Try `defaultValue` or `onChange` to change `value`, and please read [React's doc
### antd override my global styles!
Yes, antd is designed to develop a complete background application, we override some global styles for styling convenience and it can't be removed now. More info trace https://github.com/ant-design/ant-design/issues/4331 .
Yes, antd is designed to develop a complete background application, we override some global styles for styling convenience, and it can't be removed now. More info trace https://github.com/ant-design/ant-design/issues/4331 .
Or follow instruction in [How to avoid modifying global styles?](docs/react/customize-theme#How-to-avoid-modifying-global-styles-?)
Or, follow the instructions in [How to avoid modifying global styles?](docs/react/customize-theme#How-to-avoid-modifying-global-styles-?)
### I cannot install `antd` and `antd`'s dependencies(etc...). FYI, I live in China mainland.
@ -94,13 +94,13 @@ Please check [And Design Mobile](http://mobile.ant.design) for details. `antd` h
### Does `antd` supply standalone files like 'react' do?
Yep, you can [import `antd` with script tag](https://ant.design/docs/react/install?locale=en-US#Import-in-Browser). But we recommend use`npm` to import `antd`, it is simple and easy to maintain.
Yep, you can [import `antd` with script tag](https://ant.design/docs/react/install?locale=en-US#Import-in-Browser). But we recommend using`npm` to import `antd`, it is simple and easy to maintain.
### I can't visit `icon` in my network environment.
You should deploy the iconfont files to your network by following this [example](https://github.com/ant-design/antd-init/tree/7c1a33cadb98f2fd8688fe527dd7f98215b9bced/examples/local-iconfont). [#1070](https://github.com/ant-design/ant-design/issues/1070)
After 3.9.x [we are using svg icon](/components/icon#svg-icons) so you don't need to deploy iconfont locally anymore!
After 3.9.x [we are using svg icon](/components/icon#svg-icons), so you don't need to deploy iconfont locally anymore!
### How to extend antd's components?
@ -121,13 +121,13 @@ Here are some typical wrong examples:
- ❌ antdesign
- ❌ Antdesign
### Do you guys have any channel for donation? like PayPal or Alipay.
### Do you guys have any channel for donation, like PayPal or Alipay?
No yet.
Not yet.
### Why not?
Alibaba will pay us.
Alibaba pays us.
---
@ -141,7 +141,7 @@ An [answer from StackOverflow](http://stackoverflow.com/questions/25034994/how-t
### React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)
Please make sure that you import `antd`'s components correctly. Read the corresponding documentation of the `antd`'s version which you use. And pay attention to typo.
Please make sure that you import `antd`'s components correctly. Read the corresponding documentation of the `antd`'s version which you use, and pay attention to typos.
### rm is not recognized as an internal or external command
@ -149,7 +149,7 @@ Please read this [issue](https://github.com/ant-design/ant-design/issues/650#iss
### Failed propType: Invalid prop `AAA` of type `BBB` supplied to `CCC`, expected `DDD`. Check the render method of `EEE`.
Please read the corresponding documentation of the `antd`'s version which you use, and make sure that you pass value with correct type to `antd`'s components,
Please read the corresponding documentation of the `antd`'s version which you use, and make sure that you pass values with correct type to `antd`'s components,
### Unknown option: xxx/package.json.presets
@ -157,4 +157,4 @@ An [answer from Stack Overflow](http://stackoverflow.com/questions/33685365/unkn
### Invariant Violation: findComponentRoot(...): Unable to find element.
You may import React twice. Set React & ReactDOM as external, if you are using webpack, See: [#525](https://github.com/ant-design/ant-design/issues/525). If you are using others(browserify, etc...), please read its documentation and find options which can set React & ReactDOM as external.
You may import React twice. Set React & ReactDOM as external, if you are using webpack, See [#525](https://github.com/ant-design/ant-design/issues/525). If you are using others(browserify, etc...), please read its documentation and find options which can set React & ReactDOM as external.
Wei Zhu
6 years ago