@@ -69,7 +78,8 @@ export default {
width: 12em;
}
-.p-dropdown-car-option {
+.p-dropdown-car-option,
+.p-dropdown-car-value {
display: flex;
justify-content: space-between;
align-items: center;
@@ -83,4 +93,13 @@ export default {
margin-top: .125em;
}
}
+
+.p-dropdown-car-value {
+ justify-content: flex-start;
+}
+
+.p-dropdown-empty-car-token {
+ background: #d95f00;
+ color: #ffffff;
+}
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index 30d48bec1..2126b4fbc 100644
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -40,10 +40,20 @@ data() {
Custom Content
Label of an option is used as the display text of an item by default, for custom content support define an option template that gets the option instance as a parameter.
+
In addition the value template can be used to customize the selected value.
-<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
- <template #option="slotProps">
+<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" :showClear="true">
+ <template #value="slotProps">
+ <div class="p-dropdown-car-value" v-if="slotProps.value">
+ <img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" />
+ <span>{{slotProps.value.brand}}</span>
+ </div>
+ <span v-else>
+ Select a Car
+ </span>
+ </template>
+ <template #option="slotProps">
<div class="p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
@@ -284,7 +294,14 @@ data() {
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
-<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
+<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" :showClear="true">
+ <div class="p-dropdown-car-value" v-if="slotProps.value">
+ <img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" />
+ <span>{{slotProps.value.brand}}</span>
+ </div>
+ <span v-else>
+ Select a Car
+ </span>
<template #option="slotProps">
<div class="p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
@@ -327,10 +344,11 @@ export default {
.p-dropdown {
- width: 12em;
+ width: 12em;
}
-.p-dropdown-car-option {
+.p-dropdown-car-option,
+.p-dropdown-car-value {
display: flex;
justify-content: space-between;
align-items: center;
@@ -344,6 +362,15 @@ export default {
margin-top: .125em;
}
}
+
+.p-dropdown-car-value {
+ justify-content: flex-start;
+}
+
+.p-dropdown-empty-car-token {
+ background: #d95f00;
+ color: #ffffff;
+}