Vue ResponsiveBox - Arrange Layout Elements
All layout elements are arranged against a layout grid. For example, suppose that you have the following layout grid.
- <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.
- <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.
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.