+ 
+
+
+
+ {{slotProps.option.label}}
+
+ Common pattern is providing an empty option as the placeholder when using native selects, however Dropdown has built-in support using the placeholder option so it is suggested to use it instead of creating an empty option.
Options can be filtered using an input field in the overlay by enabling the filter property.
+Filtering allows searching items in the list using an input field at the header. In order to use filtering, enable filter property. By default, + optionLabel is used when searching and filterFields can be used to customize the fields being utilized. Furthermore, filterMatchMode is available + to define the search algorithm. Valid values are "contains" (default), "startsWith" and "endsWith".
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" filterPlaceholder="Find Car"/>
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.
+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 value, optiongroup, header, footer, emptyfilter and empty slots are provided for further customization.
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true">
- <template #value="slotProps">
+ <template #header></template>
+ <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>
@@ -62,6 +65,7 @@ data() {
<span>{{slotProps.option.brand}}</span>
</div>
</template>
+ <template #footer></template>
</Dropdown>
| Name | +Parameters | +
|---|---|
| option | +option: Option instance + index: Index of the option |
+
| optiongroup | +option: OptionGroup instance + index: Index of the option group |
+
| value | +value: Value of the component + placeholder: Placeholder prop value |
+
| header | +value: Value of the component + options: Displayed options |
+
| footer | +value: Value of the component + options: Displayed options |
+
| emptyfilter | +- | +
| empty | +- | +
Following is the list of structural style classes, for theming classes visit
<h5>Basic</h5>
-<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
+<Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" optionValue="code" placeholder="Select a City" />
<h5>Editable</h5>
<Dropdown v-model="selectedCity2" :options="cities" optionLabel="name" :editable="true"/>
+<h5>Grouped</h5>
+<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
+ <template #optiongroup="slotProps">
+ <div class="p-d-flex p-ai-center country-item">
+ <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
+ <div>{{slotProps.option.label}}</div>
+ </div>
+ </template>
+</Dropdown>
+{{selectedGroupedCity}}
+
<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
<template #value="slotProps">
@@ -375,6 +467,7 @@ export default {
selectedCity1: null,
selectedCity2: null,
selectedCountry: null,
+ selectedGroupedCity: null,
cities: [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
@@ -393,7 +486,34 @@ export default {
{name: 'Japan', code: 'JP'},
{name: 'Spain', code: 'ES'},
{name: 'United States', code: 'US'}
- ]
+ ],
+ groupedCities: [{
+ label: 'Germany', code: 'DE',
+ items: [
+ {label: 'Berlin', value: 'Berlin'},
+ {label: 'Frankfurt', value: 'Frankfurt'},
+ {label: 'Hamburg', value: 'Hamburg'},
+ {label: 'Munich', value: 'Munich'}
+ ]
+ },
+ {
+ label: 'USA', code: 'US',
+ items: [
+ {label: 'Chicago', value: 'Chicago'},
+ {label: 'Los Angeles', value: 'Los Angeles'},
+ {label: 'New York', value: 'New York'},
+ {label: 'San Francisco', value: 'San Francisco'}
+ ]
+ },
+ {
+ label: 'Japan', code: 'JP',
+ items: [
+ {label: 'Kyoto', value: 'Kyoto'},
+ {label: 'Osaka', value: 'Osaka'},
+ {label: 'Tokyo', value: 'Tokyo'},
+ {label: 'Yokohama', value: 'Yokohama'}
+ ]
+ }]
}
}
}
@@ -421,24 +541,33 @@ export default {
Editable
Grouped
+
+
+
+
+ {{slotProps.option.label}}
+
+
+
+ {{selectedGroupedCity}}
+
Advanced with Templating, Filtering and Clear Icon
- 
- {{ slotProps.value.name }}
+
+ {{slotProps.value.name}}
{{slotProps.placeholder}}
-
-
- {{ slotProps.option.name }}
+
+ {{slotProps.option.name}}
-
@@ -453,6 +582,7 @@ export default {
selectedCity1: null,
selectedCity2: null,
selectedCountry: null,
+ selectedGroupedCity: null,
cities: [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
@@ -471,7 +601,34 @@ export default {
{name: 'Japan', code: 'JP'},
{name: 'Spain', code: 'ES'},
{name: 'United States', code: 'US'}
- ]
+ ],
+ groupedCities: [{
+ label: 'Germany', code: 'DE',
+ items: [
+ {label: 'Berlin', value: 'Berlin'},
+ {label: 'Frankfurt', value: 'Frankfurt'},
+ {label: 'Hamburg', value: 'Hamburg'},
+ {label: 'Munich', value: 'Munich'}
+ ]
+ },
+ {
+ label: 'USA', code: 'US',
+ items: [
+ {label: 'Chicago', value: 'Chicago'},
+ {label: 'Los Angeles', value: 'Los Angeles'},
+ {label: 'New York', value: 'New York'},
+ {label: 'San Francisco', value: 'San Francisco'}
+ ]
+ },
+ {
+ label: 'Japan', code: 'JP',
+ items: [
+ {label: 'Kyoto', value: 'Kyoto'},
+ {label: 'Osaka', value: 'Osaka'},
+ {label: 'Tokyo', value: 'Tokyo'},
+ {label: 'Yokohama', value: 'Yokohama'}
+ ]
+ }]
}
}
}