DevExtreme Vue - Customize the Appearance

You can customize the text field and the drop-down button using the fieldTemplate and dropDownButtonTemplate. To adjust the drop-down field, use the dropDownOptions object that contains options described in the Popup Configuration section.

App.vue
  • <template>
  • <div>
  • <DxDropDownBox
  • :value.sync="selectedFruit"
  • :opened.sync="isDropDownBoxOpened"
  • :data-source="dataSource"
  • drop-down-button-template="dropDownButtonTemplate"
  • field-template="fieldTemplate">
  • <div slot="dropDownButtonTemplate" slot-scope="{ data }">
  • <img src="images/icons/custom-dropbutton-icon.svg">
  • </div>
  • <div slot="fieldTemplate" slot-scope="{ data }">
  • <div class="custom-item">
  • <img :src="data.image">
  • <div class="product-name">
  • <DxTextBox
  • :value="data.text"
  • :read-only="true">
  • </DxTextBox>
  • </div>
  • </div>
  • </div>
  • <DxDropDownOptions
  • title="Fruits"
  • :show-title="true"
  • :full-screen="true"
  • :show-close-button="true"
  • />
  • <DxList
  • :data-source="dataSource"
  • selection-mode="single"
  • @selection-changed="changeDropDownBoxValue">
  • </DxList>
  • </DxDropDownBox>
  • </div>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxDropDownBox, DxDropDownOptions } from "devextreme-vue/drop-down-box";
  • import DxList from "devextreme-vue/list";
  • import DxTextBox from "devextreme-vue/text-box";
  • import ArrayStore from "devextreme/data/array_store";
  •  
  • export default {
  • components: {
  • DxDropDownBox,
  • DxList,
  • DxTextBox,
  • DxDropDownOptions
  • },
  • data() {
  • const fruits = [
  • { ID: 1, text: "Apples", image: "images/Apples.svg" },
  • { ID: 2, text: "Oranges", image: "images/Oranges.svg" },
  • { ID: 3, text: "Lemons", image: "images/Lemons.svg" },
  • { ID: 4, text: "Pears", image: "images/Pears.svg" },
  • { ID: 5, text: "Pineapples", image: "images/Pineapples.svg" }
  • ];
  • return {
  • dataSource: new ArrayStore({
  • data: fruits,
  • key: "ID"
  • }),
  • isDropDownBoxOpened: false,
  • selectedFruit: fruits[0]
  • }
  • },
  • methods: {
  • changeDropDownBoxValue(e) {
  • this.selectedFruit = e.addedItems[0];
  • this.isDropDownBoxOpened = false;
  • }
  • }
  • }
  • </script>
  •  
  • <style>
  • .custom-item {
  • position: relative;
  • min-height: 30px;
  • }
  • .custom-item > img {
  • left: 1px;
  • margin-top: 3px;
  • max-height: 30px;
  • width: auto;
  • position: absolute;
  • }
  • .product-name {
  • display: inline-block;
  • padding-left: 45px;
  • text-indent: 0;
  • line-height: 30px;
  • font-size: 15px;
  • width: 100%;
  • }
  • </style>