Adaptive Rendering

The ColorPicker provides an option for enabling adaptive rendering for the popup element. 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 adaptive property of the ColorPicker to true.

• To specify a custom title for the action sheet displayed when the ColorPicker opens on smaller screens, set the adaptiveTitle property of the component.

The Adaptive Mode adjusts the rendering of the ColorPicker's popup element based on the screen resolution of the device (the horizontal value in pixels) by using the following default breakpoints:

• Small screens (up to 500px)—Displays a full-screen action sheet.
• Medium screens (between 500px and 768px)—Displays a popup as an action sheet pinned to the bottom of the screen.
• Large screens (larger than 768px)—Displays a popup as an animation container attached to the main element of the component.

You can further customize the adaptive breakpoints using the AdaptiveModeProvider.

Resize the browser to see how the ColorPicker in the example below adapts to different resolutions.

Suggested Links

• API Reference of the ColorPicker
• Creating Custom Styles with ThemeBuilder