mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

Merge from master

Browse Source
This commit is contained in:
afc163 2017-09-08 16:49:58 +08:00
commit 7bee69a9df
14 changed files with 84 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/affix/index.en-US.md
View File

@ -4,7 +4,7 @@ type: Navigation
title: Affix
---
Make an element sticky to viewport.
Make an element stick to viewport.
## When To Use
@ -19,7 +19,7 @@ Please note that Affix should not cover other content on the page, especially wh
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
| onChange | Callback when affix state is changed | Function(affixed) | - |
| onChange | Callback for when affix state is changed | Function(affixed) | - |
**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:

6
components/breadcrumb/index.en-US.md
View File

@ -18,15 +18,15 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
| Property | Description | Type | Optional | Default |
|-----------|-----------------------------------|-----------------|---------|--------|
| routes | The routing stack information of router | object[] | | - |
| params | Routing parameter | object | | - |
| separator | Custom separator | string\|ReactNode | | '/' |
| params | Routing parameters | object | | - |
| separator | Custom separator | string\|ReactNode | | `/` |
| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | | - |
> `linkRender` and `nameRender` were removed after `antd@2.0`, please use `itemRender` instead.
### Use with browserHistory
The link of Breadcrumb item contain `#` defaultly, you can use `itemRender` to make `browserHistory` Link.
The link of Breadcrumb item targets `#` by default, you can use `itemRender` to make a `browserHistory` Link.
```jsx
import { Link } from 'react-router';

22
components/dropdown/index.en-US.md
View File

@ -16,30 +16,30 @@ If there are too many operations to display, you can wrap them in a `Dropdown`.
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| trigger | the trigger mode which can execute the drop-down action | Array<'click'\|'hover'> | ['hover'] |
| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`> | [`hover`] |
| overlay | the dropdown menu | [Menu](/components/menu) | - |
| getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
| visible | determine whether the dropdown menu is visible | boolean | - |
| disabled| determine whether the dropdown menu is disabled| boolean | - |
| onVisibleChange | a callback function takes an argument: `visible`, can be executed when the visible state is changing | Function(visible) | - |
| visible | whether the dropdown menu is visible | boolean | - |
| disabled| whether the dropdown menu is disabled| boolean | - |
| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function(visible) | - |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
You can get the menu list by `antd.Menu`, and set a callback function `onSelect` for it if you need. The menu items and the dividers are also available, by using `Menu.Item` and `Menu.Divider` respectively.
> Warning: You must set a unique `key` for `Menu.Item`.
> Menu of Dropdown is unselectable defaultly, you can make it selectable via `<Menu selectable>`.
> Menu of Dropdown is unselectable by default, you can make it selectable via `<Menu selectable>`.
### Dropdown.Button
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| type | type of the button, the same as [Button](/components/button) | string | 'default' |
| size | size of the button, the same as [Button](/components/button) | string | 'default' |
| type | type of the button, the same as [Button](/components/button) | string | `default` |
| size | size of the button, the same as [Button](/components/button) | string | `default` |
| onClick | a callback function, the same as [Button](/components/button), which will be executed when you click the button on the left | Function | - |
| trigger | the trigger mode which can execute the drop-down action | Array<'click'\|'hover'> | ['hover'] |
| trigger | the trigger mode which executes the drop-down action | Array<'click'\|`hover`> | [`hover`] |
| overlay | the dropdown menu | [Menu](/components/menu) | - |
| visible | determine whether the dropdown menu is visible | boolean | - |
| disabled | determine whether the dropdown menu is disabled| boolean | - |
| onVisibleChange | a callback function takes an argument: `visible`, can be executed when the visible state is changing | Function | - |
| visible | whether the dropdown menu is visible | boolean | - |
| disabled | whether the dropdown menu is disabled| boolean | - |
| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function | - |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |

52
components/grid/index.en-US.md
View File

@ -58,30 +58,30 @@ title: Grid
</div>
</div>
In most business situations,Ant Design need solve a lot of information storage problems within the design area,so based on 12 Grids System,we divided the design area into 24 aliquots.
In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 aliquots.
We name the divided area as 'box'.We suggest that four boxes horizontal arrangement at most, one at least.Box on the proportion of the entire screen as above picture.To ensure that the level of visual comfort,we custom typography inside of the box based on the box unit.
We name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.
## Outline
In the grid system, we define the frame outside the information area based on row and column, to ensure that every area can steady arrangement.
In the grid system, we define the frame outside the information area based on `row` and `column`, to ensure that every area can have stable arrangement.
Following is a brief look at how it works:
* To establish a set of `column` in the horizontal direction by` row` (abbreviated col)
* Direct your content elements should be placed in the `col`, and only` col` as the `row`
* The column grid system is a value of 1-24 to represent its range spans.For example, three columns of equal width can be created by `.col-8`.
* If a `row` sum of` col` more than 24, then the extra `col` as a whole will start a new line arrangement.
* Establish a set of `column` in the horizontal space defined by `row` (abbreviated col)
* Your content elements should be placed directly in the `col`, and only `col` should be placed directly in `row`
* The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `.col-8` (`span=8`).
* If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement.
## Flex layout
Our grid systems support Flex layout to allow the child elements within the parent horizontal alignment - Left, center, right of abode, and other wide arrangement, decentralized arrangement. Between sub-elements and sub-elements, support the top of the aligned vertically centered, bottom-aligned manner. At the same time, you can define the order of elements by using 'order'.
Our grid systems support Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using `order`.
Flex layout is based on a grid 24 to define each "box" in width, but not rigidly adhere to the grid layout.
Flex layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
## API
Ant Design layout component if it can not meet your needs, you can use the excellent layout of the components of the community:
If the Ant Design grid layout component does not meet your needs, you can use the excellent layout components of the community:
- [react-flexbox-grid](http://roylee0704.github.io/react-flexbox-grid/)
- [react-blocks](https://github.com/whoisandy/react-blocks/)
@ -90,25 +90,25 @@ Ant Design layout component if it can not meet your needs, you can use the excel
| Property | Description | Type | Default |
|------------|-----------------|--------------------|-------------|
| gutter | grid spacing | number | 0 |
| type | layout mode, the optional `flex`, [effective modern browser](http://caniuse.com/#search=flex) | string | |
| align | the vertical alignment of the layout of flex: `top` ` middle` `bottom` | string | `top` |
| justify | horizontal arrangement of the layout of flex: `start` ` end` `center` ` space-around` `space-between` | string | `start` |
| gutter | spacing between grids | number | 0 |
| type | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | string | |
| align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` |
| justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` |
### Col
| Property | Description | Type | Default |
|------------|-----------------|--------------------|-------------|
| span | raster occupying the number of cells,0 corresponds to `display: none` | number | none |
| order | raster order, under `flex` effective layout mode | number | 0 |
| offset | the number of cells to the left of the grid spacing, no cell in grid spacing | number | 0 |
| push | the number of cells that raster move to the right | number | 0 |
| pull | the number of cells that raster move to the left | number | 0 |
| xs | `<576px` and also default setting, could be a `span` value or a object contain above props | number\|object | - |
| sm | `≥576px`, could be a `span` value or a object contain above props | number\|object | - |
| md | `≥768px`, could be a `span` value or a object contain above props | number\|object | - |
| lg | `≥992px`, could be a `span` value or a object contain above props | number\|object | - |
| xl | `≥1200px`, could be a `span` value or a object contain above props | number\|object | - |
| xxl | `≥1600px`, could be a `span` value or a object contain above props | number\|object | - |
| span | raster number of cells to occupy, 0 corresponds to `display: none` | number | none |
| order | raster order, used in `flex` layout mode | number | 0 |
| offset | the number of cells to offset Col from the left | number | 0 |
| push | the number of cells that raster is moved to the right | number | 0 |
| pull | the number of cells that raster is moved to the left | number | 0 |
| xs | `<576px` and also default setting, could be a `span` value or an object containing above props | number\|object | - |
| sm | `≥576px`, could be a `span` value or an object containing above props | number\|object | - |
| md | `≥768px`, could be a `span` value or an object containing above props | number\|object | - |
| lg | `≥992px`, could be a `span` value or an object containing above props | number\|object | - |
| xl | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - |
| xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - |
The breakpoints of responsive grid extends from [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not contain `occasionally part`).
The breakpoints of responsive grid follow [BootStrap 3 media queries rules](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes)(not including `occasionally part`).

4
components/menu/__tests__/__snapshots__/demo.test.js.snap
View File

@ -764,8 +764,8 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
class="ant-menu-submenu-title"
>
<span>
<icon
type="setting"
<i
class="anticon anticon-setting"
/>
<span>
Navigation Three

2
components/menu/demo/vertical.md
View File

@ -42,7 +42,7 @@ ReactDOM.render(
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><icon type="setting" /><span>Navigation Three</span></span>}>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>Navigation Three</span></span>}>
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>

24
components/menu/index.en-US.md
View File

@ -28,21 +28,21 @@ More layouts with navigation: [layout](/components/layout).
| Param | Description | Type | Default value |
|----------|---------------|----------|--------------|
| theme | color of the theme | string: `light` `dark` | `light` |
| mode | type of the menu; vertical, horizontal, and inline modes are supported | string: vertical horizontal inline | vertical |
| theme | color theme of the menu | string: `light` `dark` | `light` |
| mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | string: `vertical` \| `horizontal` \| `inline` | `vertical` |
| selectable | allow selecting menu items | boolean | true |
| selectedKeys | array with the keys of currently selected menu items | string[] | |
| defaultSelectedKeys | array with the keys of default selected menu items | string[] | |
| openKeys | array with the keys of currently opened sub menus | string[] | |
| defaultOpenKeys | array with the keys of default opened sub menus | | |
| onOpenChange | called when open/close sub menu | function(openKeys: string[]) | noop |
| onSelect | callback of the selected item | function({ item, key, selectedKeys }) | none |
| onDeselect | callback of the deselected item, only supported for multiple mode | function({ item, key, selectedKeys }) | - |
| onClick | callback when click menu item, params: {item, key, keyPath} | function({ item, key, keyPath }) | - |
| onSelect | callback executed when a menu item is selected | function({ item, key, selectedKeys }) | none |
| onDeselect | callback executed when a menu item is deselected, only supported for multiple mode | function({ item, key, selectedKeys }) | - |
| onClick | callback executed when a menu item is clicked | function({ item, key, keyPath }) | - |
| style | style of the root node | object | |
| inlineIndent | indent px of inline menu item on each level | number | 24 |
| multiple | Allow select multiple item | boolean | false |
| inlineCollapsed | specified the collapsed status when menu is inline mode | boolean | - |
| multiple | Allow selection of multiple items | boolean | false |
| inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - |
| selectable | Allow to be selected | boolean | true |
> More options in [rc-menu](https://github.com/react-component/menu#api)
@ -51,18 +51,18 @@ More layouts with navigation: [layout](/components/layout).
| Param | Description | Type | Default value |
|----------|----------------|----------|--------------|
| disabled | disabled or not | boolean | false |
| disabled | whether menu item is disabled or not | boolean | false |
| key | unique id of the menu item | string | |
### Menu.SubMenu
| Param | Description | Type | Default value |
|----------|----------------|----------|--------------|
| disabled | disabled or not | boolean | false |
| key | unique id of the menu item | string | |
| disabled | whether sub menu is disabled or not | boolean | false |
| key | unique id of the sub menu | string | |
| title | title of the sub menu | string\|ReactNode | |
| children | sub menus or sub menu items | Array<MenuItem\|SubMenu> | |
| onTitleClick | callback of the clicked sub menu title | function({ key, domEvent }) | |
| onTitleClick | callback executed when the sub menu title is clicked | function({ key, domEvent }) | |
### Menu.ItemGroup
@ -73,4 +73,4 @@ More layouts with navigation: [layout](/components/layout).
### Menu.Divider
divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.
Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.

18
components/pagination/index.en-US.md
View File

@ -10,7 +10,7 @@ A long list can be divided into several pages by `Pagination`, and only one page
## When To Use
- When it will take a long time to load/render all items.
- If you want to browse the data by switching in the pages.
- If you want to browse the data by navigating through pages.
## API
@ -21,15 +21,15 @@ A long list can be divided into several pages by `Pagination`, and only one page
Property | Description | Type | Default
-----|-----|-----|------
current | current page number | number | -
defaultCurrent | default current page number | number | 1
total | total number of data | number | 0
defaultPageSize | default number of data per page | number | 10
pageSize | number of data per page | number | -
onChange | a callback function, can be executed when the page number is changing, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop
defaultCurrent | default initial page number | number | 1
total | total number of data items | number | 0
defaultPageSize | default number of data items per page | number | 10
pageSize | number of data items per page | number | -
onChange | a callback function, executed when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop
showSizeChanger | determine whether `pageSize` can be changed | boolean | false
pageSizeOptions | specify the sizeChanger selections | string[] | ['10', '20', '30', '40']
onShowSizeChange | a callback function, can be executed when `pageSize` is changing | Function(current, size) | noop
showQuickJumper | determine whether you can jump to a page directly | boolean | false
pageSizeOptions | specify the sizeChanger options | string[] | ['10', '20', '30', '40']
onShowSizeChange | a callback function, executed when `pageSize` is changed | Function(current, size) | noop
showQuickJumper | determine whether you can jump to pages directly | boolean | false
size | specify the size of `Pagination`, can be set to `small` | string | ""
simple | whether to use simple mode | boolean | -
showTotal | to display the total number and range | Function(total, range) | -

5
components/popover/style/index.less
View File

@ -61,9 +61,8 @@
&-title {
min-width: @popover-min-width;
margin: 0; // reset heading margin
padding: 0 16px;
line-height: 32px;
height: 32px;
padding: 8px 16px;
min-height: 32px;
border-bottom: 1px solid @border-color-split;
color: @popover-color;
font-weight: 500;

8
components/table/style/index.less
View File

@ -454,6 +454,14 @@
}
}
// Fix https://github.com/ant-design/ant-design/issues/7509
&-middle &-placeholder {
padding: 10px 8px;
}
&-small &-placeholder {
padding: 6px 8px;
}
// not scrollable
&-scroll-position-left&-scroll-position-right &-placeholder-fixed-columns {
overflow-x: hidden;

2
components/upload/interface.tsx
View File

@ -16,7 +16,7 @@ export interface UploadFile {
percent?: number;
thumbUrl?: string;
originFileObj?: File;
response?: string;
response?: any;
error?: any;
}

6
docs/react/practical-projects.en-US.md
View File

@ -13,12 +13,12 @@ Include the following:
## Install dva-cli
Install dva-cli with npm, and make sure the version is larger than `0.7.0`.
Install dva-cli with npm, and make sure the version is larger than `0.8.1`.
```bash
$ npm install dva-cli -g
$ dva -v
0.7.0
0.8.1
```
## Create New App
@ -94,7 +94,7 @@ Add routing information to router, edit `router.js`:
```diff
+ import Products from './routes/Products';
...
+ <Route path="/products" component={Products} />
+ <Route path="/products" exact component={Products} />
```
Then open http://localhost:8000/#/products in your browser, you should be able to see the `<h2>` tag defined before.

6
docs/react/practical-projects.zh-CN.md
View File

@ -13,12 +13,12 @@ title: 项目实战
## 安装 dva-cli
通过 npm 安装 dva-cli 并确保版本是 `0.7.0` 或以上。
通过 npm 安装 dva-cli 并确保版本是 `0.8.1` 或以上。
```bash
$ npm install dva-cli -g
$ dva -v
0.7.0
0.8.1
```
## 创建新应用
@ -94,7 +94,7 @@ export default Products;
```diff
+ import Products from './routes/Products';
...
+ <Route path="/products" component={Products} />
+ <Route path="/products" exact component={Products} />
```
然后在浏览器里打开 http://localhost:8000/#/products ，你应该能看到前面定义的 `<h2>` 标签。

7
site/theme/static/common.less
View File

@ -1,8 +1,3 @@
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html,
body {
height: 100%;
@ -105,5 +100,5 @@ a {
}
.page-wrapper {
background: #ececec;
background: #f0f2f5;
}