DevExtreme Vue - Overview
The Box widget allows you to arrange various elements within it. This widget is separate and adaptive and acts as the layout's building block.
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 option values ensure they have equal widths.
- <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>
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
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Box - Specify an Item Size
- Box - Arrange and Align Items
- Box - Nest One Box into Another
- Box API Reference
If you have technical questions, please create a support ticket in the DevExpress Support Center.