Vue ResponsiveBox - Arrange Layout Elements

All layout elements are arranged against a layout grid. For example, suppose that you have the following layout grid.

HTML
  • <template>
  • <DxResponsiveBox>
  • <DxRow :ratio="1"/> <!-- Header -->
  • <DxRow :ratio="2"/> <!-- Content -->
  • <DxRow :ratio="0.7"/> <!-- Footer -->
  • <DxCol :ratio="0.5" screen="md lg"/> <!-- Left-side bar -->
  • <DxCol :ratio="2"/> <!-- Content -->
  • <DxCol :ratio="0.5" screen="md lg"/> <!-- Right-side bar -->
  • </DxResponsiveBox>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxResponsiveBox, DxCol, DxRow } from 'devextreme-vue/responsive-box';
  •  
  • export default {
  • components: {
  • DxResponsiveBox,
  • DxCol,
  • DxRow
  • }
  • };
  • </script>
  • <style>
  • html, body { height: 100%; }
  • </style>

Every layout element has the location property that allows you to relocate the element within the layout grid or hide it on screens of a specific size. For example, in the following code, the "Left-Side Bar" and "Right-Side Bar" elements are present only on medium and large screens. All the other elements have individual settings for screens of each size.

HTML
  • <template>
  • <DxResponsiveBox>
  • <!-- Layout grid is configured here -->
  •  
  • <DxItem>
  • <DxLocation screen="md lg" :row="0" :col="0" :colspan="3"/>
  • <DxLocation screen="xs sm" :row="0" :col="0"/>
  • <template #default>
  • <div class="header">
  • <p>Header</p>
  • </div>
  • </template>
  • </DxItem>
  •  
  • <DxItem>
  • <DxLocation screen="md lg" :row="1" :col="1"/>
  • <DxLocation screen="xs sm" :row="1" :col="0"/>
  • <template #default>
  • <div class="content">
  • <p>Content</p>
  • </div>
  • </template>
  • </DxItem>
  •  
  • <DxItem>
  • <DxLocation screen="md lg" :row="1" :col="0"/>
  • <template #default>
  • <div class="left-side-bar">
  • <p>Left Bar</p>
  • </div>
  • </template>
  • </DxItem>
  •  
  • <DxItem>
  • <DxLocation screen="md lg" :row="1" :col="2"/>
  • <template #default>
  • <div class="right-side-bar">
  • <p>Right Bar</p>
  • </div>
  • </template>
  • </DxItem>
  •  
  • <DxItem class="footer">
  • <DxLocation screen="md lg" :row="2" :col="0" :colspan="3"/>
  • <DxLocation screen="xs sm" :row="2" :col="0"/>
  • <template #default>
  • <div class="footer">
  • <p>Footer</p>
  • </div>
  • </template>
  • </DxItem>
  • </DxResponsiveBox>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxResponsiveBox, DxItem, DxLocation, DxCol, DxRow } from 'devextreme-vue/responsive-box';
  •  
  • export default {
  • components: {
  • DxResponsiveBox,
  • DxItem,
  • DxLocation,
  • DxCol,
  • DxRow
  • }
  • };
  • </script>
  • <style>
  • html, body { height: 100%; }
  • #responsiveBox p {
  • font-size: 16px;
  • padding-top: 10px;
  • text-align: center;
  • }
  • .header { background: #f39e6c }
  • .content { background: #f5e5a6 }
  • .left-side-bar { background: #94d7c7 }
  • .right-side-bar { background: #77c7e7 }
  • .footer { background: #7b9bcf }
  • </style>

If on some screens, all elements should be arranged in a single column, assign the size qualifiers of these screens to the singleColumnScreen property. In this case, the layout grid will be ignored in favor of the single-column layout, and all layout elements will have equal heights.

HTML
  • <template>
  • <DxResponsiveBox ...
  • single-column-screen="xs sm"> <!-- Single-column layout on small and extra small screens -->
  • <DxRow ... /> <!-- Ignored -->
  • <DxCol ... /> <!-- Ignored -->
  • <!-- ... -->
  • </DxResponsiveBox>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxResponsiveBox, DxCol, DxRow } from 'devextreme-vue/responsive-box';
  •  
  • export default {
  • components: {
  • DxResponsiveBox,
  • DxCol,
  • DxRow
  • }
  • };
  • </script>
  • <style>
  • html, body { height: 100%; }
  • </style>
See Also