mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-09 09:03:51 +08:00
docs(pagination): add docs for pagination
This commit is contained in:
unix
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
108
pages/en-us/components/pagination.mdx
Normal file
108
pages/en-us/components/pagination.mdx
Normal file
@@ -0,0 +1,108 @@
|
||||
import { Layout, Playground, Attributes } from 'lib/components'
|
||||
import { Pagination, Spacer } from 'components'
|
||||
import ChevronRight from '@zeit-ui/react-icons/chevronRight'
|
||||
import ChevronLeft from '@zeit-ui/react-icons/chevronLeft'
|
||||
import ChevronRightCircle from '@zeit-ui/react-icons/chevronRightCircle'
|
||||
import ChevronLeftCircle from '@zeit-ui/react-icons/chevronLeftCircle'
|
||||
import ChevronRightCircleFill from '@zeit-ui/react-icons/chevronRightCircleFill'
|
||||
import ChevronLeftCircleFill from '@zeit-ui/react-icons/chevronLeftCircleFill'
|
||||
|
||||
export const meta = {
|
||||
title: 'Pagination',
|
||||
group: 'Navigation',
|
||||
}
|
||||
|
||||
## Pagination
|
||||
|
||||
Navigation and identification between multiple pages.
|
||||
|
||||
<Playground
|
||||
scope={{ Pagination }}
|
||||
code={`
|
||||
<Pagination count={20} initialPage={3} />
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Limit"
|
||||
desc="The maximum number of pages that can be displayed"
|
||||
scope={{ Pagination }}
|
||||
code={`
|
||||
<>
|
||||
<Pagination count={10} limit={10} />
|
||||
<Pagination count={5} />
|
||||
<Pagination count={10} initialPage={6} limit={5} />
|
||||
<Pagination count={10} initialPage={6} />
|
||||
<Pagination count={30} initialPage={6} limit={10} />
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Icon"
|
||||
desc="Customize buttons as icons."
|
||||
scope={{ Spacer, Pagination, ChevronRight, ChevronLeft, ChevronRightCircle, ChevronLeftCircle, ChevronRightCircleFill, ChevronLeftCircleFill }}
|
||||
code={`
|
||||
<>
|
||||
<Pagination count={5}>
|
||||
<Pagination.Next><ChevronRight /></Pagination.Next>
|
||||
<Pagination.Previous><ChevronLeft /></Pagination.Previous>
|
||||
</Pagination>
|
||||
<Spacer y={.5} />
|
||||
<Pagination count={5}>
|
||||
<Pagination.Next><ChevronRightCircle /></Pagination.Next>
|
||||
<Pagination.Previous><ChevronLeftCircle /></Pagination.Previous>
|
||||
</Pagination>
|
||||
<Spacer y={.5} />
|
||||
<Pagination count={5}>
|
||||
<Pagination.Next><ChevronRightCircleFill /></Pagination.Next>
|
||||
<Pagination.Previous><ChevronLeftCircleFill /></Pagination.Previous>
|
||||
</Pagination>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Sizes"
|
||||
desc="Pagination of different sizes."
|
||||
scope={{ Pagination }}
|
||||
code={`
|
||||
<>
|
||||
<Pagination count={20} size="mini" />
|
||||
<Pagination count={20} size="small" />
|
||||
<Pagination count={20} size="medium" />
|
||||
<Pagination count={20} size="large" />
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Attributes edit="/pages/en-us/components/pagination.mdx">
|
||||
<Attributes.Title>Pagination.Props</Attributes.Title>
|
||||
|
||||
| Attribute | Description | Type | Accepted values | Default
|
||||
| ---------- | ---------- | ---- | -------------- | ------ |
|
||||
| **initialPage** | the page selected by default | `number` | - | 1 |
|
||||
| **page** | current page | `number` | - | 1 |
|
||||
| **count** | the total number of pages | `number` | - | 1 |
|
||||
| **limit** | limit of display page | `number` | - | 7 |
|
||||
| **size** | pagination size | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` |
|
||||
| **onChange** | change event | `(page: number) => void` | - | - |
|
||||
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
|
||||
|
||||
<Attributes.Title>Pagination.Previous.Props</Attributes.Title>
|
||||
|
||||
| Attribute | Description | Type | Accepted values | Default
|
||||
| ---------- | ---------- | ---- | -------------- | ------ |
|
||||
| ... | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | - |
|
||||
|
||||
<Attributes.Title>Pagination.Next.Props</Attributes.Title>
|
||||
|
||||
| Attribute | Description | Type | Accepted values | Default
|
||||
| ---------- | ---------- | ---- | -------------- | ------ |
|
||||
| ... | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | - |
|
||||
|
||||
<Attributes.Title>NormalSizes</Attributes.Title>
|
||||
|
||||
```ts
|
||||
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
|
||||
```
|
||||
|
||||
</Attributes>
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|
||||
109
pages/zh-cn/components/pagination.mdx
Normal file
109
pages/zh-cn/components/pagination.mdx
Normal file
@@ -0,0 +1,109 @@
|
||||
import { Layout, Playground, Attributes } from 'lib/components'
|
||||
import { Pagination, Spacer } from 'components'
|
||||
import ChevronRight from '@zeit-ui/react-icons/chevronRight'
|
||||
import ChevronLeft from '@zeit-ui/react-icons/chevronLeft'
|
||||
import ChevronRightCircle from '@zeit-ui/react-icons/chevronRightCircle'
|
||||
import ChevronLeftCircle from '@zeit-ui/react-icons/chevronLeftCircle'
|
||||
import ChevronRightCircleFill from '@zeit-ui/react-icons/chevronRightCircleFill'
|
||||
import ChevronLeftCircleFill from '@zeit-ui/react-icons/chevronLeftCircleFill'
|
||||
|
||||
export const meta = {
|
||||
title: '分页 Pagination',
|
||||
group: '导航',
|
||||
}
|
||||
|
||||
## Pagination / 分页
|
||||
|
||||
多个页面之间的导航与鉴别。
|
||||
|
||||
<Playground
|
||||
scope={{ Pagination }}
|
||||
desc="默认的分页会自动收缩与扩展。"
|
||||
code={`
|
||||
<Pagination count={20} initialPage={3} />
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Limit"
|
||||
desc="调整最大可展示页面数。"
|
||||
scope={{ Pagination }}
|
||||
code={`
|
||||
<>
|
||||
<Pagination count={10} limit={10} />
|
||||
<Pagination count={5} />
|
||||
<Pagination count={10} initialPage={6} limit={5} />
|
||||
<Pagination count={10} initialPage={6} />
|
||||
<Pagination count={30} initialPage={6} limit={10} />
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Icon"
|
||||
desc="用图标定制按钮。"
|
||||
scope={{ Spacer, Pagination, ChevronRight, ChevronLeft, ChevronRightCircle, ChevronLeftCircle, ChevronRightCircleFill, ChevronLeftCircleFill }}
|
||||
code={`
|
||||
<>
|
||||
<Pagination count={5}>
|
||||
<Pagination.Next><ChevronRight /></Pagination.Next>
|
||||
<Pagination.Previous><ChevronLeft /></Pagination.Previous>
|
||||
</Pagination>
|
||||
<Spacer y={.5} />
|
||||
<Pagination count={5}>
|
||||
<Pagination.Next><ChevronRightCircle /></Pagination.Next>
|
||||
<Pagination.Previous><ChevronLeftCircle /></Pagination.Previous>
|
||||
</Pagination>
|
||||
<Spacer y={.5} />
|
||||
<Pagination count={5}>
|
||||
<Pagination.Next><ChevronRightCircleFill /></Pagination.Next>
|
||||
<Pagination.Previous><ChevronLeftCircleFill /></Pagination.Previous>
|
||||
</Pagination>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Sizes"
|
||||
desc="不同大小的分页器。"
|
||||
scope={{ Pagination }}
|
||||
code={`
|
||||
<>
|
||||
<Pagination count={20} size="mini" />
|
||||
<Pagination count={20} size="small" />
|
||||
<Pagination count={20} size="medium" />
|
||||
<Pagination count={20} size="large" />
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Attributes edit="/pages/zh-cn/components/pagination.mdx">
|
||||
<Attributes.Title>Pagination.Props</Attributes.Title>
|
||||
|
||||
| 属性 | 描述 | 类型 | 推荐值 | 默认
|
||||
| ---------- | ---------- | ---- | -------------- | ------ |
|
||||
| **initialPage** | 初始选中的页面 | `number` | - | 1 |
|
||||
| **page** | 当前页码 | `number` | - | 1 |
|
||||
| **count** | 页码数量 | `number` | - | 1 |
|
||||
| **limit** | 一次可展示页面的最大值 | `number` | - | 7 |
|
||||
| **size** | 组件的大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` |
|
||||
| **onChange** | 分页器的事件 | `(page: number) => void` | - | - |
|
||||
| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
|
||||
|
||||
<Attributes.Title>Pagination.Previous.Props</Attributes.Title>
|
||||
|
||||
| 属性 | 描述 | 类型 | 推荐值 | 默认
|
||||
| ---------- | ---------- | ---- | -------------- | ------ |
|
||||
| ... | 原生属性 | `ButtonHTMLAttributes` | `'id', 'className', ...` | - |
|
||||
|
||||
<Attributes.Title>Pagination.Next.Props</Attributes.Title>
|
||||
|
||||
| 属性 | 描述 | 类型 | 推荐值 | 默认
|
||||
| ---------- | ---------- | ---- | -------------- | ------ |
|
||||
| ... | 原生属性 | `ButtonHTMLAttributes` | `'id', 'className', ...` | - |
|
||||
|
||||
<Attributes.Title>NormalSizes</Attributes.Title>
|
||||
|
||||
```ts
|
||||
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
|
||||
```
|
||||
|
||||
</Attributes>
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|
||||
Reference in New Issue
Block a user