vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Templating for MultiSelect

pull/12/head
cagataycivici 2018-12-30 22:42:01 +03:00
parent 09ebaa9b73
commit 1044100f0f
2 changed files with 54 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/multiselect/MultiSelect.vue
View File

@ -4,7 +4,11 @@
<input ref="focusInput" type="text" role="listbox" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"/> <input ref="focusInput" type="text" role="listbox" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"/>
</div> </div>
<div class="p-multiselect-label-container"> <div class="p-multiselect-label-container">
<label :class="labelClass">{{label}}</label> <label :class="labelClass">
<slot name="value" :value="value">
{{label}}
</slot>
</label>
</div> </div>
<div class="p-multiselect-trigger"> <div class="p-multiselect-trigger">
<span class="p-multiselect-trigger-icon pi pi-chevron-down p-c"></span> <span class="p-multiselect-trigger-icon pi pi-chevron-down p-c"></span>

50
src/views/multiselect/MultiSelectDemo.vue
View File

@ -10,6 +10,25 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<p-multiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" /> <p-multiSelect v-model="selectedCars1" :options="cars" optionLabel="brand" placeholder="Select Brands" />
<h3>Advanced with Templating and Filtering</h3>
<p-multiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
<template slot="value" slot-scope="{value}">
<div class="p-multiselect-car-token" v-for="option of value" :key="option.brand">
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
<span>{{option.brand}}</span>
</div>
<div class="p-multiselect-empty-car-token" v-if="!value || value.length === 0">
Select Brands
</div>
</template>
<template slot="option" slot-scope="{option}">
<div class="p-multiselect-car-option">
<img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
<span>{{option.brand}}</span>
</div>
</template>
</p-multiSelect>
</div> </div>
</div> </div>
</template> </template>
@ -36,12 +55,15 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.p-multiselect { .p-multiselect {
min-width: 12em; min-width: 12em;
} }
.p-multiselect-car-option { .p-multiselect-car-option {
display: inline-block;
vertical-align: middle;
img { img {
vertical-align: middle; vertical-align: middle;
margin-right: .5em; margin-right: .5em;
@ -52,4 +74,30 @@ export default {
margin-top: .125em; margin-top: .125em;
} }
} }
.p-multiselect-car-token,
.p-multiselect-empty-car-token {
padding: 2px 4px;
margin: 0 0.286em 0 0;
display: inline-block;
vertical-align: middle;
height: 1.857em;
border-radius: 3px;
}
.p-multiselect-car-token img {
width: 20px;
vertical-align: middle;
margin-right: .5em
}
.p-multiselect-car-token {
background: #007ad9;
color: #ffffff;
}
.p-multiselect-empty-car-token {
background: #d95f00;
color: #ffffff;
}
</style> </style>