Kendo UI for Vue AdaptiveModeProvider Overview
The increasing variety of mobile devices requires an adaptive rendering for your application that covers all different screen resolutions and ensures a smooth user experience. You can customize the adaptive rendering of the Kendo UI for Vue components by modifying the default adaptive breakpoints.
Start Free Trial
AdaptiveModeProvider
The AdaptiveModeProvider is based on Vue provide and inject pattern that provides a global configuration for adaptive rendering across various components. It lets you define breakpoints for small and medium screen sizes. This provider is essential for implementing responsive layouts, where UI components such as DatePicker, DropDownList, ComboBox, and others may need to adapt.
The provider itself provides small and medium breakpoints. You should wrap your components in a AdaptiveModeProvider to pass these values down the component tree:
small—Sets the horizontal screen width in pixels up to which the component will display as a full-screen modal. The default value is500.medium—Sets the horizontal screen width in pixels up to which the component will display as a docked-to-the-bottom modal. The default value is768.
The following example demonstrates how to customize the adaptive settings of the Kendo UI for Vue ComboBox component.