Vue ResponsiveBox - Size Qualifiers
When choosing the layout for a specific screen, the UI component considers the screen's size qualifier. There are four size qualifiers in all.
Size Qualifier | Description |
---|---|
xs | Stands for "extra small". Screens with width less than 768 pixels. |
sm | Stands for "small". Screens with width between 768 and 992 pixels. |
md | Stands for "medium". Screens with width between 992 and 1200 pixels. |
lg | Stands for "large". Screens with width more than 1200 pixels. |
If a size qualifier should be identified with other screen width values, use the screenByWidth property to specify the relation.
jQuery
JavaScript
CSS
$(function() { $("#responsiveBoxContainer").dxResponsiveBox({ // ... screenByWidth: function(width) { if (width < 640) return 'xs'; if (width < 1280) return 'sm'; if (width < 1920) return 'md'; return 'lg'; } }); });
html, body { height: 100%; }
Angular
HTML
TypeScript
CSS
<dx-responsive-box ... [screenByWidth]="getSizeQualifier"> <!-- ... --> </dx-responsive-box>
import { DxResponsiveBoxModule } from 'devextreme-angular'; // ... export class AppComponent { getSizeQualifier(width) { if (width < 640) return 'xs'; if (width < 1280) return 'sm'; if (width < 1920) return 'md'; return 'lg'; } } @NgModule({ imports: [ // ... DxResponsiveBoxModule ], // ... })
html, body { height: 100%; }
Vue
HTML
<template> <DxResponsiveBox ... :screen-by-width="getSizeQualifier"> <!-- ... --> </DxResponsiveBox> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxResponsiveBox } from 'devextreme-vue/responsive-box'; export default { components: { DxResponsiveBox }, data() { return { getSizeQualifier(width) { if (width < 640) return 'xs'; if (width < 1280) return 'sm'; if (width < 1920) return 'md'; return 'lg'; } } }; </script> <style> html, body { height: 100%; } </style>
React
HTML
CSS
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import ResponsiveBox from 'devextreme-react/responsive-box'; class App extends React.Component { render() { return ( <ResponsiveBox ... screenByWidth={this.getSizeQualifier} /> ); } getSizeQualifier = (width) => { if (width < 640) return 'xs'; if (width < 1280) return 'sm'; if (width < 1920) return 'md'; return 'lg'; } } export default App;
html, body { height: 100%; }
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.