- ![]()
- {{props.option.brand}}
-
-
+
+
+
+import Dropdown from 'primevue/dropdown';
+
+
+
+<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" />
+
+
+
+data() {
+ return {
+ selectedCity: null,
+ cities: [
+ {name: 'New York', code: 'NY'},
+ {name: 'Rome', code: 'RM'},
+ {name: 'London', code: 'LDN'},
+ {name: 'Istanbul', code: 'IST'},
+ {name: 'Paris', code: 'PRS'}
+ ]
+ }
+}
+
+
+
+<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" filterPlaceholder="Find Car"/>
+
+
+
+
+<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
+ <template #option="slotProps">
+ <div class="p-clearfix p-dropdown-car-option">
+ <img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
+ <span>{{slotProps.option.brand}}</span>
+ </div>
+ </template>
+</Dropdown>
+
+
+
+
+
+
+
+ View on GitHub
+
+
+
+<template>
+ <div>
+ <div class="content-section introduction">
+ <div class="feature-intro">
+ <h1>Dropdown</h1>
+ <p>Dropdown is used to select an item from a list of options.</p>
+ </div>
+ </div>
+
+ <div class="content-section implementation">
+ <h3 class="first">Basic</h3>
+ <Dropdown v-model="selectedCity1" :options="cities" optionLabel="name" placeholder="Select a City" />
+
+ <h3>Editable</h3>
+ <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">
+ <template #option="slotProps">
+ <div class="p-clearfix p-dropdown-car-option">
+ <img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
+ <span>{{slotProps.option.brand}}</span>
+ </div>
+ </template>
+ </Dropdown>
+ </div>
+ </div>
+</template>
+
+
+
+
+export default {
+ data() {
+ return {
+ selectedCity1: null,
+ selectedCity2: null,
+ selectedCar: null,
+ cities: [
+ {name: 'New York', code: 'NY'},
+ {name: 'Rome', code: 'RM'},
+ {name: 'London', code: 'LDN'},
+ {name: 'Istanbul', code: 'IST'},
+ {name: 'Paris', code: 'PRS'}
+ ],
+ cars: [
+ {brand: 'Audi', value: 'Audi'},
+ {brand: 'Bmw', value: 'Bmw'},
+ {brand: 'Fiat', value: 'Fiat'},
+ {brand: 'Honda', value: 'Honda'},
+ {brand: 'Jaguar', value: 'Jaguar'},
+ {brand: 'Mercedes', value: 'Mercedes'},
+ {brand: 'Renault', value: 'Renault'},
+ {brand: 'Volkswagen', value: 'Volkswagen'},
+ {brand: 'Volvo', value: 'Volvo'}
+ ]
+ }
+ }
+}
+
+
+
+.p-dropdown {
+ width: 12em;
+}
+
+.p-dropdown-car-option {
+ img {
+ vertical-align: middle;
+ margin-right: .5em;
+ width: 24px;
+ }
+
+ span {
+ float: right;
+ margin-top: .125em;
+ }
+}
+
+
+
+
+
\ No newline at end of file
Import
+Getting Started
+Dropdown requires a value to bind, optionLabel and a collection of options. How to define the options property; Providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option.
+Placeholder
+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.
+ +Filtering
+Options can be filtered using an input field in the overlay by enabling the filter property.
+ +Custom Content
+Label of an option is used as the display text of an item by default, for custom content support define an item template that gets the option instance as a parameter and returns the content.
+Properties
+
+
+
+
+
+
+ | Name | +Type | +Default | +Description | +
|---|---|---|---|
| value | +any | +null | +Value of the component. | +
| options | +array | +null | +An array of selectitems to display as the available options. | +
| optionLabel | +string | +null | +Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options. | +
| scrollHeight | +string | +200px | +Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. | +
| filter | +boolean | +false | +When specified, displays an input field to filter the items on keyup. | +
| filterPlaceholder | +string | +null | +Placeholder text to show when filter input is empty. | +
| editable | +boolean | +false | +When present, custom value instead of predefined options can be entered using the editable input field. | +
| placeholder | +string | +null | +Default text to display when no option is selected. | +
| disabled | +boolean | +false | +When present, it specifies that the component should be disabled. | +
| dataKey | +string | +null | +A property to uniquely match the value in options for better performance. | +
| showClear | +boolean | +false | +When enabled, a clear icon is displayed to clear the value. | +
| tabindex | +number | +null | +Index of the element in tabbing order. | +
| optionValue | +string | +null | +??? | +
| optionDisabled | +boolean | +null | +??? | +
Events
+
+
+
+
+
+
+ | Name | +Parameters | +Description | +
|---|---|---|
| change | +event.originalEvent: Original event + event.value: Selected option value |
+ Callback to invoke on value change | +
| input | +event: Input field value | +Callback to invoke on input event of input field (editable mode). | +
Styling
+Following is the list of structural style classes, for theming classes visit
+
+
+
+
+
+ | Name | +Element | +
|---|---|
| p-dropdown | +Container element. | +
| p-dropdown-label | +Element to display label of selected option. | +
| p-dropdown-trigger | +Icon element. | +
| p-dropdown-panel | +Icon element. | +
| p-dropdown-items-wrapper | +Wrapper element of items list. | +
| p-dropdown-items | +List element of items. | +
| p-dropdown-item | +An item in the list. | +
| p-dropdown-filter-container | +Container of filter input. | +
| p-dropdown-filter | +Filter element. | +
| p-dropdown-open | +Container element when overlay is visible. | +
Dependencies
+None.
+