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

Update autocomplete demo

pull/310/head
cagataycivici 2020-05-02 11:41:42 +03:00
parent fa537c5495
commit 639a51cdea
2 changed files with 13 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/autocomplete/AutoCompleteDemo.vue
View File

@ -15,7 +15,7 @@
<h3>Dropdown and Templating</h3>
<AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Search car brands" :dropdown="true">
<template #item="slotProps">
<div class="p-clearfix p-autocomplete-brand-item">
<div class="p-autocomplete-brand-item">
<img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" />
<div>{{slotProps.item}}</div>
</div>
@ -102,16 +102,12 @@ export default {
<style lang="scss">
.p-autocomplete-brand-item {
img {
width: 32px;
display: inline-block;
margin: 5px 0 2px 5px;
}
display: flex;
align-items: center;
justify-content: space-between;
div {
font-size: 16px;
float: right;
margin: 10px 10px 0 0;
img {
width: 28px;
}
}
</style>

18
src/views/autocomplete/AutoCompleteDoc.vue
View File

@ -261,7 +261,7 @@ export default {
&lt;h3&gt;Dropdown and Templating&lt;/h3&gt;
&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="p-clearfix p-autocomplete-brand-item"&gt;
&lt;div class="p-autocomplete-brand-item"&gt;
&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt;
&lt;div&gt;{{slotProps.item}}&lt;/div&gt;
&lt;/div&gt;
@ -341,17 +341,13 @@ export default {
<CodeHighlight lang="css">
.p-autocomplete-brand-item {
img {
width: 32px;
display: inline-block;
margin: 5px 0 2px 5px;
}
display: flex;
align-items: center;
justify-content: space-between;
div {
font-size: 16px;
float: right;
margin: 10px 10px 0 0;
}
img {
width: 28px;
}
}
</CodeHighlight>
</TabPanel>