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.
HTML
- <template>
- <DxResponsiveBox ...
- :screen-by-width="getSizeQualifier">
- <!-- ... -->
- </DxResponsiveBox>
- </template>
- <script>
- 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>
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.