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.
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.
- <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.