b448ff60b7
Fixes woocommerce/woocommerce-admin#4732 This updates `@wordpress/base-styles`, and because `@wordpress/components` depends on variables from it, that must be updated as well. There are 3 major changes required as part of updating: 1. The $theme-color variable is no longer exposed by base-styles. Instead there are 3 css vars exposed. These are made available by use of a provided mixin. Situations where $theme-color was darkened using scss have been mapped as best as possible to the 2 other darkened shades of the css var that are available such as `--wp-admin-theme-color-darker-20` and `--wp-admin-theme-color-darker-10`. In some cases this means the colors are not exactly the same as before. 2. The post css `theme()` call is no longer available. All uses of this have been consolidated to use of the main theme css var `--wp-admin-theme-color`. This means that calls like `theme(secondary)` or `theme(outline)` etc have all been consolidated to the one color. 3. Many of the variables used for different shades of gray have been deprecated. These have been mapped across to the new gray variables. (Mapped according to the list described in woocommerce/woocommerce-admin#4732) |
||
|---|---|---|
| .. | ||
| docs | ||
| stories | ||
| README.md | ||
| index.js | ||
| style.scss | ||
README.md
Pagination
Use Pagination to allow navigation between pages that represent a collection of items.
The component allows for selecting a new page and items per page options.
Usage
<Pagination
page={ 1 }
perPage={ 10 }
total={ 500 }
onPageChange={ ( newPage ) => setState( { page: newPage } ) }
onPerPageChange={ ( newPerPage ) => setState( { perPage: newPerPage } ) }
/>
Props
| Name | Type | Default | Description |
|---|---|---|---|
page |
Number | null |
(required) The current page of the collection |
onPageChange |
Function | noop |
A function to execute when the page is changed |
perPage |
Number | null |
(required) The amount of results that are being displayed per page |
onPerPageChange |
Function | noop |
A function to execute when the per page option is changed |
total |
Number | null |
(required) The total number of results |
className |
String | null |
Additional classNames |
showPagePicker |
Boolean | true |
Whether the page picker should be shown. |
showPerPagePicker |
Boolean | true |
Whether the per page picker should shown. |
showPageArrowsLabel |
Boolean | true |
Whether the page arrows label should be shown. |