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.
DxComponent.vue
CSS
- <template>
- <div>
- <dx-drop-down-box
- :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">
- <dx-text-box
- :value="data.text"
- :readOnly="true">
- </dx-text-box>
- </div>
- </div>
- </div>
- <dx-drop-down-options
- title="Fruits"
- :show-title="true"
- :full-screen="true"
- :show-close-button="true">
- </dx-drop-down-options>
- <dx-list
- :data-source="dataSource"
- selection-mode="single"
- @selection-changed="changeDropDownBoxValue($event)">
- </dx-list>
- </dx-drop-down-box>
- </div>
- </template>
- <script>
- 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>
- .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%;
- }
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.