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

Demo update

pull/310/head
cagataycivici 2020-04-29 15:18:38 +03:00
parent 0069b8474d
commit 493bb27631
2 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/listbox/ListboxDemo.vue
View File

@ -14,9 +14,9 @@
<h3>Advanced with Templating, Filtering and Multiple Selection</h3> <h3>Advanced with Templating, Filtering and Multiple Selection</h3>
<Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"> <Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-clearfix"> <div class="car-item">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /> <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span> <span>{{slotProps.option.brand}}</span>
</div> </div>
</template> </template>
</Listbox> </Listbox>
@ -59,3 +59,15 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
/deep/ .car-item {
display: flex;
justify-content: space-between;
align-items: center;
img {
width:32px;
}
}
</style>

24
src/views/listbox/ListboxDoc.vue
View File

@ -42,9 +42,9 @@ data() {
<template v-pre> <template v-pre>
&lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt; &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix"&gt; &lt;div&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt; &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span style="float:right;margin:1.25em .5em 0 0"&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Listbox&gt; &lt;/Listbox&gt;
@ -230,9 +230,9 @@ data() {
&lt;h3&gt;Advanced with Templating, Filtering and Multiple Selection&lt;/h3&gt; &lt;h3&gt;Advanced with Templating, Filtering and Multiple Selection&lt;/h3&gt;
&lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt; &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix"&gt; &lt;div class="car-item"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" /&gt; &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span style="float:right;margin:1.25em .5em 0 0"&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Listbox&gt; &lt;/Listbox&gt;
@ -266,6 +266,18 @@ export default {
} }
} }
} }
</CodeHighlight>
<CodeHighlight lang="css">
/deep/ .car-item {
display: flex;
justify-content: space-between;
align-items: center;
img {
width:32px;
}
}
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>
</TabView> </TabView>