Vue Responsive Box

The ResponsiveBox component allows you to create an application or a website with a layout adapted to different screen sizes. In this demo, each element on the page is a ResponsiveBox element whose location is specified for each possible screen size.

Backend API

<template> <div id="page"> <DxResponsiveBox :screen-by-width="screen" single-column-screen="sm" > <DxRow :ratio="1"/> <DxRow :ratio="2"/> <DxRow :ratio="1"/> <DxCol :ratio="1"/> <DxCol :ratio="2" screen="lg" /> <DxCol :ratio="1"/> <DxItem> <DxLocation :row="0" :col="0" :colspan="3" screen="lg" /> <DxLocation :row="0" :col="0" :colspan="2" screen="sm" /> <div class="header item"> <p>Header</p> </div> </DxItem> <DxItem> <DxLocation :row="1" :col="1" screen="lg" /> <DxLocation :row="1" :col="0" :colspan="2" screen="sm" /> <div class="content item"> <p>Content</p> </div> </DxItem> <DxItem> <DxLocation :row="1" :col="0" screen="lg" /> <DxLocation :row="2" :col="0" screen="sm" /> <div class="left-side-bar item"> <p>Left Bar</p> </div> </DxItem> <DxItem> <DxLocation :row="1" :col="2" screen="lg" /> <DxLocation :row="2" :col="1" screen="sm" /> <div class="right-side-bar item"> <p>Right Bar</p> </div> </DxItem> <DxItem> <DxLocation :row="2" :col="0" :colspan="3" screen="lg" /> <DxLocation :row="3" :col="0" :colspan="2" screen="sm" /> <div class="footer item"> <p>Footer</p> </div> </DxItem> </DxResponsiveBox> </div> </template> <script setup lang="ts"> import { DxResponsiveBox, DxItem, DxLocation, DxCol, DxRow, } from 'devextreme-vue/responsive-box'; const screen = ((width: number) => ((width < 700) ? 'sm' : 'lg')) as unknown as () => void; </script> <style> .demo-container, #app, #page { height: 100%; min-height: 300px; } .header { background-color: #C6B1DE; text-align: center; } .content { background-color: #EDBBE7; } .left-side-bar { background-color: #F9E2AE; } .right-side-bar { background-color: #9FD89F; } .footer { background-color: #B4D6FA; } .item { height: 100%; } #page p { font-size: 20px; padding-top: 10px; text-align: center; color: #000; } </style>

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>