Vue Box - Nest One Box Into Another

A nested Box is configured similarly to an ordinary Box. To nest one Box into another, add one more item to the parent Box and put the markup of the nested Box into this item.

App.vue
  • <template>
  • <DxBox
  • id="parentBox"
  • direction="col"
  • height="100%"
  • :width="300">
  • <DxItem :baseSize="50" :ratio="1">
  • <template #default>
  • <div class="box-item yellow"> Item 1 </div>
  • </template>
  • </DxItem>
  • <DxItem :baseSize="50" :ratio="1">
  • <template #default>
  • <DxBox id="nestedBox"
  • direction="row"
  • height="100%">
  • <DxItem :baseSize="50" :ratio="1">
  • <template #default>
  • <div class="box-item green"> Item 2 </div>
  • </template>
  • </DxItem>
  • <DxItem :baseSize="50" :ratio="1">
  • <template #default>
  • <div class="box-item orange"> Item 3 </div>
  • </template>
  • </DxItem>
  • </DxBox>
  • </template>
  • </DxItem>
  • </DxBox>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxBox, DxItem } from 'devextreme-vue/box';
  •  
  • export default {
  • components: {
  • DxBox,
  • DxItem
  • }
  • };
  • </script>
  • <style>
  • .box-item {
  • text-align: center;
  • padding-top: 16px;
  • font-size: 16px;
  • }
  •  
  • .orange { background: #f39e6c }
  • .yellow { background: #f5e5a6 }
  • .green { background: #94d7c7 }
  • </style>

This code yields the following result.

DevExtreme HTML5 LayoutWidget Box

See Also