Vue Listbox est utilisé pour sélectionner une ou plusieurs valeurs dans une liste d'éléments. Il prend en charge Vue 3 avec PrimeVue 3 et Vue 2 avec PrimeVue 2.

Installation

Reportez-vous à la documentation de configuration de PrimeVue pour les étapes de téléchargement et d'installation de votre environnement, telles que Vue CLI, Vite ou navigateur.

Importation

import Listbox from 'primevue/listbox';

Commencez

Listbox nécessite une valeur à lier et une collection d'objets arbitraires avec la propriété optionLabel pour spécifier la propriété label de l'option.

<Listbox v-model="selectedCity" :options="cities" optionLabel="name" />

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'}
        ]
    }
}

Sélection

Listbox permet la sélection d'éléments uniques ou multiples. Dans un cas unique, le modèle doit être une référence d'objet unique alors que dans plusieurs cas, il doit s'agir d'un tableau. Plusieurs éléments peuvent être sélectionnés à l'aide de metaKey ou basculés individuellement selon la valeur de la propriété metaKeySelection, qui est true par défaut. Sur les appareils tactiles, metaKeySelection est automatiquement désactivé.

<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :multiple="true"/>

Contenu personnalisé

L'étiquette d'une option est utilisée comme texte d'affichage d'un élément par défaut, pour la prise en charge du contenu personnalisé, définissez un modèle d'option qui obtient l'instance d'option en tant que paramètre.

<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem">
    <template #option="slotProps">
        <div class="country-item">
            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
            <div>{{slotProps.option.name}}</div>
        </div>
    </template>
</Listbox>

Filtre

Le filtrage permet de rechercher des éléments dans la liste à l'aide d'un champ de saisie en tête. Pour utiliser le filtrage, activez la propriété de filter.

<Listbox v-model="selectedCity" :options="cities" optionLabel="name" :filter="true"/>

Thème

Listbox prend en charge divers thèmes comprenant Material, Bootstrap, Fluent ainsi que vos propres thèmes personnalisés via l'outil Designer .

Ressources

Visitez la vitrine PrimeVue Listbox pour des démos et de la documentation.