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