Множественный выбор
PrimeNG/MultiSelect (opens in a new tab)
Multiselect используется для выбора нескольких элементов из коллекции.
С чего начать
Подключите модуль
import { MultiSelectModule } from 'primeng/multiselect';
В .ts файле
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-prime-multiselect',
templateUrl: './prime-multiselect.component.html',
styleUrls: ['./prime-multiselect.component.scss']
})
export class PrimeMultiselectComponent implements OnInit {
selectedCities: string[] = [];
selectedCities1: string[] = [];
selectedCities2: string[] = [];
selectedCities3: string[] = [];
selectedCities4: string[] = [];
cities: any[] = [];
selectedCountries1: string[] = [];
selectedCountries2: string[] = [];
countries: any[] = [];
virtualCountries: any[] = [];
groupedCities: any[] = [];
selectedCitiesXs: string[] = [];
selectedCitiesSm: string[] = [];
selectedCitiesDe: string[] = [];
selectedCitiesLg: string[] = [];
constructor() {
this.cities = [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Milan', code: 'PRS' },
{ name: 'Tokyo', code: 'PRS' },
{ name: 'Moscow', code: 'PRS' },
{ name: 'Venice', code: 'PRS' },
{ name: 'Berlin', code: 'PRS' },
];
this.countries = [
{ name: 'Australia', code: 'AU' },
{ name: 'Brazil', code: 'BR' },
{ name: 'China', code: 'CN' },
{ name: 'Egypt', code: 'EG' },
{ name: 'France', code: 'FR' },
{ name: 'Germany', code: 'DE' },
{ name: 'India', code: 'IN' },
{ name: 'Japan', code: 'JP' },
{ name: 'Spain', code: 'ES' },
{ name: 'United States', code: 'US' }
];
this.groupedCities = [
{
label: 'Germany', value: 'de',
items: [
{ label: 'Berlin', value: 'Berlin' },
{ label: 'Frankfurt', value: 'Frankfurt' },
{ label: 'Hamburg', value: 'Hamburg' },
{ label: 'Munich', value: 'Munich' }
]
},
{
label: 'USA', value: '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', value: 'jp',
items: [
{ label: 'Kyoto', value: 'Kyoto' },
{ label: 'Osaka', value: 'Osaka' },
{ label: 'Tokyo', value: 'Tokyo' },
{ label: 'Yokohama', value: 'Yokohama' }
]
}
];
this.virtualCountries = [
{ name: 'Afghanistan', 'code': 'AF' },
{ name: 'Åland Islands', 'code': 'AX' },
{ name: 'Albania', 'code': 'AL' },
{ name: 'Algeria', 'code': 'DZ' },
{ name: 'American Samoa', 'code': 'AS' },
{ name: 'Andorra', 'code': 'AD' },
{ name: 'Angola', 'code': 'AO' },
{ name: 'Anguilla', 'code': 'AI' },
{ name: 'Antarctica', 'code': 'AQ' },
{ name: 'Antigua and Barbuda', 'code': 'AG' },
{ name: 'Argentina', 'code': 'AR' },
{ name: 'Armenia', 'code': 'AM' },
{ name: 'Aruba', 'code': 'AW' },
{ name: 'Australia', 'code': 'AU' },
{ name: 'Austria', 'code': 'AT' },
{ name: 'Azerbaijan', 'code': 'AZ' },
{ name: 'Bahamas', 'code': 'BS' },
{ name: 'Bahrain', 'code': 'BH' },
{ name: 'Bangladesh', 'code': 'BD' },
{ name: 'Barbados', 'code': 'BB' },
{ name: 'Belarus', 'code': 'BY' },
{ name: 'Belgium', 'code': 'BE' },
{ name: 'Belize', 'code': 'BZ' },
{ name: 'Benin', 'code': 'BJ' },
{ name: 'Bermuda', 'code': 'BM' },
{ name: 'Bhutan', 'code': 'BT' },
{ name: 'Bolivia', 'code': 'BO' },
{ name: 'Bosnia and Herzegovina', 'code': 'BA' },
{ name: 'Botswana', 'code': 'BW' },
{ name: 'Bouvet Island', 'code': 'BV' },
{ name: 'Brazil', 'code': 'BR' },
{ name: 'British Indian Ocean Territory', 'code': 'IO' },
{ name: 'Brunei Darussalam', 'code': 'BN' },
{ name: 'Bulgaria', 'code': 'BG' },
{ name: 'Burkina Faso', 'code': 'BF' },
{ name: 'Burundi', 'code': 'BI' },
{ name: 'Cambodia', 'code': 'KH' },
{ name: 'Cameroon', 'code': 'CM' },
{ name: 'Canada', 'code': 'CA' },
{ name: 'Cape Verde', 'code': 'CV' },
{ name: 'Cayman Islands', 'code': 'KY' },
{ name: 'Central African Republic', 'code': 'CF' },
{ name: 'Chad', 'code': 'TD' },
{ name: 'Chile', 'code': 'CL' },
{ name: 'China', 'code': 'CN' },
{ name: 'Christmas Island', 'code': 'CX' },
{ name: 'Cocos (Keeling) Islands', 'code': 'CC' },
{ name: 'Colombia', 'code': 'CO' },
{ name: 'Comoros', 'code': 'KM' },
{ name: 'Congo', 'code': 'CG' },
{ name: 'Congo, The Democratic Republic of the', 'code': 'CD' },
{ name: 'Cook Islands', 'code': 'CK' },
{ name: 'Costa Rica', 'code': 'CR' },
{ name: 'Cote D\'Ivoire', 'code': 'CI' },
{ name: 'Croatia', 'code': 'HR' },
{ name: 'Cuba', 'code': 'CU' },
{ name: 'Cyprus', 'code': 'CY' },
{ name: 'Czech Republic', 'code': 'CZ' },
{ name: 'Denmark', 'code': 'DK' },
{ name: 'Djibouti', 'code': 'DJ' },
{ name: 'Dominica', 'code': 'DM' },
{ name: 'Dominican Republic', 'code': 'DO' },
{ name: 'Ecuador', 'code': 'EC' },
{ name: 'Egypt', 'code': 'EG' },
{ name: 'El Salvador', 'code': 'SV' },
{ name: 'Equatorial Guinea', 'code': 'GQ' },
{ name: 'Eritrea', 'code': 'ER' },
{ name: 'Estonia', 'code': 'EE' },
{ name: 'Ethiopia', 'code': 'ET' },
{ name: 'Falkland Islands (Malvinas)', 'code': 'FK' },
{ name: 'Faroe Islands', 'code': 'FO' },
{ name: 'Fiji', 'code': 'FJ' },
{ name: 'Finland', 'code': 'FI' },
{ name: 'France', 'code': 'FR' },
{ name: 'French Guiana', 'code': 'GF' },
{ name: 'French Polynesia', 'code': 'PF' },
{ name: 'French Southern Territories', 'code': 'TF' },
{ name: 'Gabon', 'code': 'GA' },
{ name: 'Gambia', 'code': 'GM' },
{ name: 'Georgia', 'code': 'GE' },
{ name: 'Germany', 'code': 'DE' },
{ name: 'Ghana', 'code': 'GH' },
{ name: 'Gibraltar', 'code': 'GI' },
{ name: 'Greece', 'code': 'GR' },
{ name: 'Greenland', 'code': 'GL' },
{ name: 'Grenada', 'code': 'GD' },
{ name: 'Guadeloupe', 'code': 'GP' },
{ name: 'Guam', 'code': 'GU' },
{ name: 'Guatemala', 'code': 'GT' },
{ name: 'Guernsey', 'code': 'GG' },
{ name: 'Guinea', 'code': 'GN' },
{ name: 'Guinea-Bissau', 'code': 'GW' },
{ name: 'Guyana', 'code': 'GY' },
{ name: 'Haiti', 'code': 'HT' },
{ name: 'Heard Island and Mcdonald Islands', 'code': 'HM' },
{ name: 'Holy See (Vatican City State)', 'code': 'VA' },
{ name: 'Honduras', 'code': 'HN' },
{ name: 'Hong Kong', 'code': 'HK' },
{ name: 'Hungary', 'code': 'HU' },
{ name: 'Iceland', 'code': 'IS' },
{ name: 'India', 'code': 'IN' },
{ name: 'Indonesia', 'code': 'ID' },
{ name: 'Iran, Islamic Republic Of', 'code': 'IR' },
{ name: 'Iraq', 'code': 'IQ' },
{ name: 'Ireland', 'code': 'IE' },
{ name: 'Isle of Man', 'code': 'IM' },
{ name: 'Israel', 'code': 'IL' },
{ name: 'Italy', 'code': 'IT' },
{ name: 'Jamaica', 'code': 'JM' },
{ name: 'Japan', 'code': 'JP' },
{ name: 'Jersey', 'code': 'JE' },
{ name: 'Jordan', 'code': 'JO' },
{ name: 'Kazakhstan', 'code': 'KZ' },
{ name: 'Kenya', 'code': 'KE' },
{ name: 'Kiribati', 'code': 'KI' },
{ name: 'Korea, Democratic People\'S Republic of', 'code': 'KP' },
{ name: 'Korea, Republic of', 'code': 'KR' },
{ name: 'Kuwait', 'code': 'KW' },
{ name: 'Kyrgyzstan', 'code': 'KG' },
{ name: 'Lao People\'S Democratic Republic', 'code': 'LA' },
{ name: 'Latvia', 'code': 'LV' },
{ name: 'Lebanon', 'code': 'LB' },
{ name: 'Lesotho', 'code': 'LS' },
{ name: 'Liberia', 'code': 'LR' },
{ name: 'Libyan Arab Jamahiriya', 'code': 'LY' },
{ name: 'Liechtenstein', 'code': 'LI' },
{ name: 'Lithuania', 'code': 'LT' },
{ name: 'Luxembourg', 'code': 'LU' },
{ name: 'Macao', 'code': 'MO' },
{ name: 'Macedonia, The Former Yugoslav Republic of', 'code': 'MK' },
{ name: 'Madagascar', 'code': 'MG' },
{ name: 'Malawi', 'code': 'MW' },
{ name: 'Malaysia', 'code': 'MY' },
{ name: 'Maldives', 'code': 'MV' },
{ name: 'Mali', 'code': 'ML' },
{ name: 'Malta', 'code': 'MT' },
{ name: 'Marshall Islands', 'code': 'MH' },
{ name: 'Martinique', 'code': 'MQ' },
{ name: 'Mauritania', 'code': 'MR' },
{ name: 'Mauritius', 'code': 'MU' },
{ name: 'Mayotte', 'code': 'YT' },
{ name: 'Mexico', 'code': 'MX' },
{ name: 'Micronesia, Federated States of', 'code': 'FM' },
{ name: 'Moldova, Republic of', 'code': 'MD' },
{ name: 'Monaco', 'code': 'MC' },
{ name: 'Mongolia', 'code': 'MN' },
{ name: 'Montserrat', 'code': 'MS' },
{ name: 'Morocco', 'code': 'MA' },
{ name: 'Mozambique', 'code': 'MZ' },
{ name: 'Myanmar', 'code': 'MM' },
{ name: 'Namibia', 'code': 'NA' },
{ name: 'Nauru', 'code': 'NR' },
{ name: 'Nepal', 'code': 'NP' },
{ name: 'Netherlands', 'code': 'NL' },
{ name: 'Netherlands Antilles', 'code': 'AN' },
{ name: 'New Caledonia', 'code': 'NC' },
{ name: 'New Zealand', 'code': 'NZ' },
{ name: 'Nicaragua', 'code': 'NI' },
{ name: 'Niger', 'code': 'NE' },
{ name: 'Nigeria', 'code': 'NG' },
{ name: 'Niue', 'code': 'NU' },
{ name: 'Norfolk Island', 'code': 'NF' },
{ name: 'Northern Mariana Islands', 'code': 'MP' },
{ name: 'Norway', 'code': 'NO' },
{ name: 'Oman', 'code': 'OM' },
{ name: 'Pakistan', 'code': 'PK' },
{ name: 'Palau', 'code': 'PW' },
{ name: 'Palestinian Territory, Occupied', 'code': 'PS' },
{ name: 'Panama', 'code': 'PA' },
{ name: 'Papua New Guinea', 'code': 'PG' },
{ name: 'Paraguay', 'code': 'PY' },
{ name: 'Peru', 'code': 'PE' },
{ name: 'Philippines', 'code': 'PH' },
{ name: 'Pitcairn', 'code': 'PN' },
{ name: 'Poland', 'code': 'PL' },
{ name: 'Portugal', 'code': 'PT' },
{ name: 'Puerto Rico', 'code': 'PR' },
{ name: 'Qatar', 'code': 'QA' },
{ name: 'Reunion', 'code': 'RE' },
{ name: 'Romania', 'code': 'RO' },
{ name: 'Russian Federation', 'code': 'RU' },
{ name: 'RWANDA', 'code': 'RW' },
{ name: 'Saint Helena', 'code': 'SH' },
{ name: 'Saint Kitts and Nevis', 'code': 'KN' },
{ name: 'Saint Lucia', 'code': 'LC' },
{ name: 'Saint Pierre and Miquelon', 'code': 'PM' },
{ name: 'Saint Vincent and the Grenadines', 'code': 'VC' },
{ name: 'Samoa', 'code': 'WS' },
{ name: 'San Marino', 'code': 'SM' },
{ name: 'Sao Tome and Principe', 'code': 'ST' },
{ name: 'Saudi Arabia', 'code': 'SA' },
{ name: 'Senegal', 'code': 'SN' },
{ name: 'Serbia and Montenegro', 'code': 'CS' },
{ name: 'Seychelles', 'code': 'SC' },
{ name: 'Sierra Leone', 'code': 'SL' },
{ name: 'Singapore', 'code': 'SG' },
{ name: 'Slovakia', 'code': 'SK' },
{ name: 'Slovenia', 'code': 'SI' },
{ name: 'Solomon Islands', 'code': 'SB' },
{ name: 'Somalia', 'code': 'SO' },
{ name: 'South Africa', 'code': 'ZA' },
{ name: 'South Georgia and the South Sandwich Islands', 'code': 'GS' },
{ name: 'Spain', 'code': 'ES' },
{ name: 'Sri Lanka', 'code': 'LK' },
{ name: 'Sudan', 'code': 'SD' },
{ name: 'Suriname', 'code': 'SR' },
{ name: 'Svalbard and Jan Mayen', 'code': 'SJ' },
{ name: 'Swaziland', 'code': 'SZ' },
{ name: 'Sweden', 'code': 'SE' },
{ name: 'Switzerland', 'code': 'CH' },
{ name: 'Syrian Arab Republic', 'code': 'SY' },
{ name: 'Taiwan, Republic of China', 'code': 'TW' },
{ name: 'Tajikistan', 'code': 'TJ' },
{ name: 'Tanzania, United Republic of', 'code': 'TZ' },
{ name: 'Thailand', 'code': 'TH' },
{ name: 'Timor-Leste', 'code': 'TL' },
{ name: 'Togo', 'code': 'TG' },
{ name: 'Tokelau', 'code': 'TK' },
{ name: 'Tonga', 'code': 'TO' },
{ name: 'Trinidad and Tobago', 'code': 'TT' },
{ name: 'Tunisia', 'code': 'TN' },
{ name: 'Turkey', 'code': 'TR' },
{ name: 'Turkmenistan', 'code': 'TM' },
{ name: 'Turks and Caicos Islands', 'code': 'TC' },
{ name: 'Tuvalu', 'code': 'TV' },
{ name: 'Uganda', 'code': 'UG' },
{ name: 'Ukraine', 'code': 'UA' },
{ name: 'United Arab Emirates', 'code': 'AE' },
{ name: 'United Kingdom', 'code': 'GB' },
{ name: 'United States', 'code': 'US' },
{ name: 'United States Minor Outlying Islands', 'code': 'UM' },
{ name: 'Uruguay', 'code': 'UY' },
{ name: 'Uzbekistan', 'code': 'UZ' },
{ name: 'Vanuatu', 'code': 'VU' },
{ name: 'Venezuela', 'code': 'VE' },
{ name: 'Viet Nam', 'code': 'VN' },
{ name: 'Virgin Islands, British', 'code': 'VG' },
{ name: 'Virgin Islands, U.S.', 'code': 'VI' },
{ name: 'Wallis and Futuna', 'code': 'WF' },
{ name: 'Western Sahara', 'code': 'EH' },
{ name: 'Yemen', 'code': 'YE' },
{ name: 'Zambia', 'code': 'ZM' },
{ name: 'Zimbabwe', 'code': 'ZW' }
];
}
ngOnInit(): void {
}
}
Встройте компонент с помощью тэга p-multiSelect.
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1" defaultLabel="Select a City" optionLabel="name" selectedItemsLabel="{0} items selected"></p-multiSelect>
Template Mode
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1" defaultLabel="Select a City" optionLabel="name" selectedItemsLabel="{0} items selected"></p-multiSelect>
Elipsis Mode
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities2" defaultLabel="Select a City" optionLabel="name"></p-multiSelect>
Chips
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities3" defaultLabel="Select a City" optionLabel="name" display="chip"></p-multiSelect>
Grouped
group.label
<p-multiSelect [options]="groupedCities" [group]="true" [(ngModel)]="selectedCities4" defaultLabel="Select a City" scrollHeight="250px" display="chip">
<ng-template let-group pTemplate="group">
<div class="p-d-flex p-ai-center">
<span> { { group.label } } </span>
</div>
</ng-template>
</p-multiSelect>
Advanced with Templating and Filtering
option.name Select Countries country.name
<p-multiSelect [options]="countries" [(ngModel)]="selectedCountries1" defaultLabel="Select a Country" optionLabel="name" class="multiselect-custom">
<ng-template let-value pTemplate="selectedItems">
<div class="country-item country-item-value" *ngFor="let option of selectedCountries1">
<div> { { option.name } } </div>
</div>
<div *ngIf="!selectedCountries1 || selectedCountries1.length === 0" class="country-placeholder">
Select Countries
</div>
</ng-template>
<ng-template let-country pTemplate="item">
<div class="country-item">
<div> { { country.name } } </div>
</div>
</ng-template>
</p-multiSelect>
Virtual Scroll
country.name
<p-multiSelect [options]="virtualCountries" [showToggleAll]="false" [(ngModel)]="selectedCountries2" optionLabel="name" [virtualScroll]="true" [filter]="true" [itemSize]="34" class="multiselect-custom-virtual-scroll">
<ng-template let-country pTemplate="item">
<div class="country-item">
<div> { { country.name } } </div>
</div>
</ng-template>
</p-multiSelect>
Размеры
<p-multiSelect
[options]="cities"
[(ngModel)]="selectedCitiesXs"
defaultLabel="Extra small"
optionLabel="name"
class="p-multiselect-xs"
></p-multiSelect>
<p-multiSelect
[options]="cities"
[(ngModel)]="selectedCitiesSm"
defaultLabel="Small"
optionLabel="name"
class="p-multiselect-sm"
></p-multiSelect>
<p-multiSelect [options]="cities" [(ngModel)]="selectedCitiesDe" defaultLabel="Default" optionLabel="name"></p-multiSelect>
<p-multiSelect
[options]="cities"
[(ngModel)]="selectedCitiesLg"
defaultLabel="Large"
optionLabel="name"
class="p-multiselect-lg"
></p-multiSelect>
Float Label
Basic
<span class="p-float-label">
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities1" optionLabel="name" selectedItemsLabel="{0} items selected" inputId="basic"></p-multiSelect>
<label for="basic">Basic</label>
</span>
Свойства
Name | Type | Default | Description |
---|---|---|---|
appendTo | any | null | Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name). |
ariaFilterLabel | string | null | Defines a string that labels the filter input. |
ariaLabelledBy | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
autofocusFilter | boolean | false | Applies focus to the filter element when the overlay is shown. |
autoZIndex | boolean | true | Whether to automatically manage layering. |
baseZIndex | number | 0 | Base zIndex value to use in layering. |
defaultLabel | string | Choose | Label to display when there are no selections. Deprecated: Use placeholder instead. |
dataKey | string | null | A property to uniquely identify a value in options. |
disabled | boolean | false | When present, it specifies that the element should be disabled. |
displaySelectedLabel | boolean | true | Whether to show labels of selected item labels or use default label. |
dropdownIcon | string | pi pi-chevron-down | Icon class of the dropdown icon. |
emptyFilterMessage | string | No results found | Text to display when filtering does not return any results. |
filter | boolean | true | When specified, displays an input field to filter the items on keyup. |
filterMatchMode | string | contains | Defines how the items are filtered, valid values are "contains" (default) "startsWith", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt" and "gte". |
filterValue | string | null | When specified, filter displays with this value. |
filterLocale | string | undefined | Locale to use in filtering. The default locale is the host environment's current locale. |
filterBy | string | null | When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. |
filterPlaceHolder | string | null | Defines placeholder of the filter input. |
hideTransitionOptions | string | .1s linear | Transition options of the hide animation. |
inputId | string | null | Identifier of the focus input to match a label defined for the component. |
itemSize | number | null | Height of an item in the list for VirtualScrolling. |
maxSelectedLabels | number | 3 | Decides how many selected item labels to show at most. |
name | string | null | Name of the input element. |
options | array | null | An array of objects to display as the available options. |
optionLabel | string | label | Name of the label field of an option. |
optionValue | string | value | Name of the value field of an option. |
optionDisabled | string | disabled | Name of the disabled field of an option. |
optionGroupLabel | string | label | Name of the label field of an option group. |
optionGroupChildren | string | items | Name of the options field of an option group. |
group | boolean | false | Whether to display options as grouped when nested options are provided. |
overlayVisible | boolean | false | Specifies the visibility of the options panel. |
panelStyle | object | null | Inline style of the overlay panel. |
placeholder | string | null | Label to display when there are no selections. |
readonly | boolean | false | When present, it specifies that the component cannot be edited. |
emptyMessage | string | No records found. | Text to display when there is no data. Defaults to global value in i18n translation configuration. |
emptyFilterMessage | string | No results found | Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration. |
resetFilterOnHide | boolean | false | Clears the filter value when hiding the dropdown. |
scrollHeight | string | 200px | Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value. |
selectedItemsLabel | string | ellipsis | Label to display after exceeding max selected labels e.g. (0 items selected), defaults "ellipsis" keyword to indicate a text-overflow. |
selectionLimit | number | null | Number of maximum options that can be selected. |
showHeader | boolean | true | Whether to show the header. |
showTransitionOptions | string | .12s cubic-bezier(0, 0, 0.2, 1) | Transition options of the show animation. |
showToggleAll | boolean | true | Whether to show the checkbox at header to toggle all items at once. |
style | object | null | Inline style of the element. |
styleClass | string | null | Style class of the element. |
tabindex | number | null | Index of the element in tabbing order. |
tooltip | any | null | Advisory information to display in a tooltip on hover. |
tooltipStyleClass | string | null | Style class of the tooltip. |
tooltipPosition | string | top | Position of the tooltip, valid values are right, left, top and bottom. |
tooltipPositionStyle | string | absolute | Type of CSS position. |
virtualScroll | boolean | false | Whether the data should be loaded on demand during scroll. |
События
Name | Parameters | Description |
---|---|---|
onClick | event: Click event | Callback to invoke when component is clicked. |
onChange | event.originalEvent: browser event<br>event.value: Current selected values<br>event.itemValue: Toggled item value | Callback to invoke when value changes. |
onFilter | event.originalEvent: Browser event<br>event.filter: Filter value used in filtering. | Callback to invoke when data is filtered. |
onFocus | event.originalEvent: browser event | Callback to invoke when multiselect receives focus. |
onBlur | event.originalEvent: browser event | Callback to invoke when multiselect loses focus. |
onPanelShow | - | Callback to invoke when overlay panel becomes visible. |
onPanelHide | - | Callback to invoke when overlay panel becomes hidden. |
Шаблоны
Name | Parameters |
---|---|
item | $implicit: Data of the item |
group | $implicit: Data of the group item |
selectedItems | $implicit: value |
header | - |
empty | - |
emptyfilter | - |
footer | - |
Стилизация
Name | Element |
---|---|
p-multiselect | Container element. |
p-multiselect-label-container | Container of the label to display selected items. |
p-multiselect-label | Label to display selected items. |
p-multiselect-trigger | Dropdown button. |
p-multiselect-filter-container | Container of filter input. |
p-multiselect-panel | Overlay panel for items. |
p-multiselect-items | List container of items. |
p-multiselect-item | An item in the list. |
p-multiselect-open | Container element when overlay is visible. |