Vue Box - Overview

The Box UI component allows you to arrange various elements within it. This UI component is separate and adaptive and acts as the layout's building block.

View Demo

The following code adds a simple Box containing three items to your page. These items are plain texts placed in differently-colored rectangles arranged in a row. Equal ratio property values ensure they have equal widths.

jQuery
HTML
JavaScript
CSS
<div id="boxContainer">
    <div class="box-item orange" data-options="dxItem: { ratio: 1 }"> Item 1 </div>
    <div class="box-item yellow" data-options="dxItem: { ratio: 1 }"> Item 2 </div>
    <div class="box-item green"  data-options="dxItem: { ratio: 1 }"> Item 3 </div>
</div>
$(function() {
    $("#boxContainer").dxBox({
        direction: "row",
        height: 100
    });
});
.box-item {
    text-align: center;
    padding-top: 34px;
    font-size: 16px;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }
Angular
HTML
TypeScript
CSS
<dx-box
    direction="row"
    [height]="100">
    <dxi-item class="box-item orange" [ratio]="1"> Item 1 </dxi-item>
    <dxi-item class="box-item yellow" [ratio]="1"> Item 2 </dxi-item>
    <dxi-item class="box-item green"  [ratio]="1"> Item 3 </dxi-item>
</dx-box>
import { DxBoxModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxBoxModule
    ],
    // ...
})
.box-item {
    text-align: center;
    padding-top: 34px;
    font-size: 16px;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }
Vue
App.vue
<template>
    <DxBox
        direction="row"
        :height="100">
        <DxItem :ratio="1">
            <template #default>
                <div class="box-item orange"> Item 1 </div>
            </template>
        </DxItem>
        <DxItem :ratio="1">
            <template #default>
                <div class="box-item yellow"> Item 2 </div>
            </template>
        </DxItem>
        <DxItem :ratio="1">
            <template #default>
                <div class="box-item green"> Item 3 </div>
            </template>
        </DxItem>
    </DxBox>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
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: 34px;
    font-size: 16px;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }
</style>
React
App.js
CSS
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import Box, { Item } from 'devextreme-react/box';

class App extends React.Component {
    render() {
        return (
            <Box
                direction="row"
                height={100}>
                <Item ratio={1}>
                    <div className="box-item orange"> Item 1 </div>
                </Item>
                <Item ratio={1}>
                    <div className="box-item yellow"> Item 2 </div>
                </Item>
                <Item ratio={1}>
                    <div className="box-item green"> Item 3 </div>
                </Item>
            </Box>
        );
    }
}

export default App;
.box-item {
    text-align: center;
    padding-top: 34px;
    font-size: 16px;
    height: 100%;
}

.orange { background: #f39e6c }
.yellow { background: #f5e5a6 }
.green { background: #94d7c7 }

Note that the Box items in the code above are declared using the dxItem markup component. An object passed to this component can have the following fields:

See Also