docs: improve docs and update api

This commit is contained in:
Justineo
2021-11-24 12:05:27 +08:00
parent a790f0d8a9
commit 5226ec968c
19 changed files with 297 additions and 114 deletions

View File

@@ -6,11 +6,19 @@
[[ demo src="/demo/pagination/size.vue" ]]
### Go to a specific page
### Page size
Use the [`goto`](#props-goto) prop to enable the go to page section.
Use the [`page-size`](#props-page-size) prop to specify the current page size.
[[ demo src="/demo/pagination/goto.vue" ]]
Use the [`page-sizes`](#props-page-sizes) prop to specify the page size options.
[[ demo src="/demo/pagination/pages.vue" ]]
### Optional parts
Use the [`show-total`](#props-show-total) / [`show-page-size`](#props-show-page-size) / [`show-goto`](#props-show-goto) props to control the visibility of the total items / page size selector / goto page parts.
[[ demo src="/demo/pagination/parts.vue" ]]
## API
@@ -20,12 +28,14 @@ Use the [`goto`](#props-goto) prop to enable the go to page section.
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``page`` | `number` | `1` | Current page index (starts from `1`). |
| ``total`` | `number` | - | Total page count. |
| ``total`` | `number` | - | Total items count. |
| ``to`` | `string | Object` | `''` | [^to] |
| ``native`` | `boolean` | `false` | Use native links for navigation. |
| ``page-size`` | `number` | `pagination.pageSize` | [^page-size] |
| ``page-sizes`` | `Array` | `pagination.pageSizes` | The predefined available page sizes for users to select. |
| ``goto`` | `boolean` | `false` | Whether to show goto page number” section. |
| ``show-goto`` | `boolean=` | `false` | Whether to show the go to page section. |
| ``show-total`` | `boolean=` | `false` | Whether to show the total page count. |
| ``show-page-size`` | `boolean=` | `false` | Whether to show the page size selection section. |
^^^ui
Style variants.
@@ -55,7 +65,7 @@ The count of item in each page.
| Name | Description |
| -- | -- |
| ``pagesizechange`` | Triggered when `page-size` is changed. The callback parameter list is `(size: number)`, with `size` being the new `page-size` value. |
| ``pagesizechange`` | Triggered when page size is changed. The callback parameter list is `(size: number)`, with `size` being the new page size value. |
| ``redirect`` | Triggered when page links are activated. The callback parameter list is `(page: number, event: Object)`. `page` is the number of the targe page. `event` is the native event object, calling `event.preventDefault` will stop navigation when `native` is `true`. |
### Configs