Adaptive Rendering
The Pager provides an option for enabling adaptive rendering for the popup element of the drop-down list with the page sizes. This functionality allows the component to adapt to the screen size by adjusting its popup element dynamically based on the screen dimensions.
-
To enable the adaptive rendering, set the
adaptiveproperty of the Pager totrue. -
To set the title of the action sheet rendered when the Pager is opened on a smaller screen, set the
adaptiveTitleproperty of the component.
The Adaptive Mode adjusts the rendering of the popup element for the drop-down list with the page sizes based on the screen resolution of the device (the horizontal value in pixels) by using the following default breakpoints:
- Small screens (up to 500 px)—Displays a full-screen action sheet.
- Medium screens (between 500 px and 768 px)—Displays a popup as an action sheet pinned to the bottom of the screen.
- Large screens (larger than 768 px)—Displays a popup as an animation container attached to the main element of the component.
You can further customize the adaptive breakpoints by using the AdaptiveMode React Context.