mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-29 05:29:37 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
afc163
commit
37880beedb
@ -5,11 +5,11 @@ title: Card
|
||||
cols: 1
|
||||
---
|
||||
|
||||
Common card container.
|
||||
Simple rectangular container
|
||||
|
||||
## When to use
|
||||
|
||||
The most basic card container. You can use it to contain text, lists, pictures and paragraphs.
|
||||
A card can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.
|
||||
|
||||
## API
|
||||
|
||||
@ -20,6 +20,6 @@ The most basic card container. You can use it to contain text, lists, pictures a
|
||||
| Property | Description | Type | Default |
|
||||
|----------|----------------|----------|--------------|
|
||||
| title | Card title | React.Element | - |
|
||||
| extra | Corner content of card | React.Element | - |
|
||||
| bordered | Whether a border is set | Boolean | true |
|
||||
| bodyStyle | Custom style for content area | Object | - |
|
||||
| extra | Content to render in the top-right corner of the card | React.Element | - |
|
||||
| bordered | Toggles rendering of the border around the card | Boolean | true |
|
||||
| bodyStyle | Inline style to apply to the card content | Object | - |
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 2
|
||||
title: 所有组件
|
||||
title:
|
||||
zh-CN: 所有组件
|
||||
en-US: All components
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
此处列出 Ant Design 中需要国际化支持的组件，你可以在演示里切换语言。
|
||||
|
||||
## en-US
|
||||
|
||||
Components which need localization support are listed here, you can toggle the language in the demo.
|
||||
|
||||
````jsx
|
||||
import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
|
||||
Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'antd';
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 1
|
||||
title: 国际化
|
||||
title:
|
||||
zh-CN: 国际化
|
||||
en-US: Localization
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用 `LocaleProvider` 包裹你的应用，并引用对应的语言包。
|
||||
|
||||
## en-US
|
||||
|
||||
Wrap your app with `LocaleProvider`, and apply the corresponding language package.
|
||||
|
||||
````jsx
|
||||
import { Pagination, LocaleProvider } from 'antd';
|
||||
import enUS from 'antd/lib/locale-provider/en_US';
|
||||
|
||||
35
components/locale-provider/index.en-US.md
Normal file
35
components/locale-provider/index.en-US.md
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
category: Components
|
||||
type: Other
|
||||
cols: 1
|
||||
title: LocaleProvider
|
||||
---
|
||||
|
||||
`LocaleProvider` provides a uniform localization support for built-in text of components.
|
||||
|
||||
## Usage
|
||||
|
||||
`LocaleProvider` takes use of [context](https://facebook.github.io/react/docs/context.html), a feature of React, to accomplish global effectiveness by wrapping the app only once.
|
||||
|
||||
|
||||
```jsx
|
||||
import enUS from 'antd/lib/locale-provider/en_US';
|
||||
|
||||
...
|
||||
|
||||
return <LocaleProvider locale={enUS}><App /></LocaleProvider>;
|
||||
```
|
||||
|
||||
### Add a language
|
||||
|
||||
We supply an English locale package. Other language users can create a locale package based on [en_US](https://github.com/ant-design/ant-design/blob/26b1f37392a278285aec6c573b99c6feea09e218/components/locale-provider/en_US.js) and send us a pull request.
|
||||
|
||||
### Other localization needs
|
||||
|
||||
This component aims for localization of the built-in text, if you want to support other documents, we recommend using [react-intl](https://github.com/yahoo/react-intl), refer to [Intl demo 1](http://github.com/ant-design/intl-example) and [Intl demo 2](http://yiminghe.me/learning-react/examples/react-intl.html?locale=en-US).
|
||||
|
||||
## API
|
||||
|
||||
Property | Description | Type | Default
|
||||
-----|-----|-----|------
|
||||
locale | language package setting, you can find the packages in this path: `antd/lib/locale-provider/` | Object | -
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 0
|
||||
title: 基本
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
基础分页。
|
||||
|
||||
## en-US
|
||||
|
||||
Basic pagination.
|
||||
|
||||
````jsx
|
||||
import { Pagination } from 'antd';
|
||||
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 2
|
||||
title: 改变
|
||||
title:
|
||||
zh-CN: 改变
|
||||
en-US: Changer
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
改变每页显示条目数。
|
||||
|
||||
## en-US
|
||||
|
||||
Change `pageSize`.
|
||||
|
||||
````jsx
|
||||
import { Pagination } from 'antd';
|
||||
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 8
|
||||
title: 受控
|
||||
title:
|
||||
zh-CN: 受控
|
||||
en-US: Controlled
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
受控制的页码。
|
||||
|
||||
## en-US
|
||||
|
||||
Controlled page number.
|
||||
|
||||
````jsx
|
||||
import { Pagination } from 'antd';
|
||||
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 3
|
||||
title: 跳转
|
||||
title:
|
||||
zh-CN: 跳转
|
||||
en-US: Jumper
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
快速跳转到某一页。
|
||||
|
||||
## en-US
|
||||
|
||||
Jump to a page directly.
|
||||
|
||||
````jsx
|
||||
import { Pagination } from 'antd';
|
||||
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 4
|
||||
title: 迷你
|
||||
title:
|
||||
zh-CN: 迷你
|
||||
en-US: Mini size
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
迷你版本。
|
||||
|
||||
## en-US
|
||||
|
||||
Mini size pagination.
|
||||
|
||||
````jsx
|
||||
import { Pagination } from 'antd';
|
||||
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 1
|
||||
title: 更多
|
||||
title:
|
||||
zh-CN: 更多
|
||||
en-US: More
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
更多分页。
|
||||
|
||||
## en-US
|
||||
|
||||
More pages.
|
||||
|
||||
````jsx
|
||||
import { Pagination } from 'antd';
|
||||
|
||||
|
||||
@ -1,9 +1,17 @@
|
||||
---
|
||||
order: 6
|
||||
title: 简洁
|
||||
title:
|
||||
zh-CN: 简洁
|
||||
en-US: Simple mode
|
||||
---
|
||||
|
||||
简单地翻页。
|
||||
## zh-CN
|
||||
|
||||
简单的翻页。
|
||||
|
||||
## en-US
|
||||
|
||||
Simple mode.
|
||||
|
||||
````jsx
|
||||
import { Pagination } from 'antd';
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 9
|
||||
title: 总数
|
||||
title:
|
||||
zh-CN: 总数
|
||||
en-US: Total number
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过设置 `showTotal` 展示总共有多少数据。
|
||||
|
||||
## en-US
|
||||
|
||||
You can show the total number of data by setting `showTotal`.
|
||||
|
||||
````jsx
|
||||
import { Pagination, Select } from 'antd';
|
||||
|
||||
|
||||
34
components/pagination/index.en-US.md
Normal file
34
components/pagination/index.en-US.md
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
title: Pagination
|
||||
---
|
||||
|
||||
A long list can be divided into several pages by `Pagination`, and only one page will be loaded at a time.
|
||||
|
||||
## 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.
|
||||
|
||||
## API
|
||||
|
||||
```html
|
||||
<Pagination onChange={onChange} total={50} />
|
||||
```
|
||||
|
||||
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 as an argument | Function | noop
|
||||
showSizeChanger | determine whether `pageSize` can be changed | Boolean | false
|
||||
pageSizeOptions | specify the sizeChanger selections | Array | ['10', '20', '30', '40']
|
||||
onShowSizeChange | a callback function, can be executed when `pageSize` is changing | Function | noop
|
||||
showQuickJumper | determine whether you can jump to a page directly | Boolean | false
|
||||
size | specify the size of `Pagination`, can be set to `small` | String | ""
|
||||
simple | whether to use simple mode | Object | -
|
||||
showTotal | to custom the total number display | Function | -
|
||||
@ -20,16 +20,16 @@ english: Pagination
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------------|------------------------------------|---------------|--------------------------|
|
||||
| current | 当前页数 | Number | 无 |
|
||||
| current | 当前页数 | Number | - |
|
||||
| defaultCurrent | 默认的当前页数 | Number | 1 |
|
||||
| total | 数据总数 | Number | 0 |
|
||||
| defaultPageSize | 初始的每页条数 | Number | 10 |
|
||||
| pageSize | 每页条数 | Number | |
|
||||
| defaultPageSize | 默认的每页条数 | Number | 10 |
|
||||
| pageSize | 每页条数 | Number | - |
|
||||
| onChange | 页码改变的回调，参数是改变后的页码 | Function | noop |
|
||||
| showSizeChanger | 是否可以改变 pageSize | Bool | false |
|
||||
| showSizeChanger | 是否可以改变 pageSize | Boolean | false |
|
||||
| pageSizeOptions | 指定每页可以显示多少条 | Array<String> | ['10', '20', '30', '40'] |
|
||||
| onShowSizeChange | pageSize 变化的回调 | Function | noop |
|
||||
| showQuickJumper | 是否可以快速跳转至某页 | Bool | false |
|
||||
| showQuickJumper | 是否可以快速跳转至某页 | Boolean | false |
|
||||
| size | 当为「small」时，是小尺寸分页 | String | "" |
|
||||
| simple | 当添加该属性时，显示为简单分页 | Object | 无 |
|
||||
| showTotal | 用于显示总共有多少条数据 | Function | 无 |
|
||||
| simple | 当添加该属性时，显示为简单分页 | Object | - |
|
||||
| showTotal | 用于显示总共有多少条数据 | Function | - |
|
||||
Loading…
Reference in New Issue
Block a user