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

Use Flex

pull/104/head
cagataycivici 2019-10-28 21:52:10 +03:00
parent 3213f81ea0
commit 35f0c7ace7
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/dropdown/DropdownDemo.vue
View File

@ -17,7 +17,7 @@
<h3>Advanced with Templating, Filtering and Clear Icon</h3>
<Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true">
<template #option="slotProps">
<div class="p-clearfix p-dropdown-car-option">
<div class="p-dropdown-car-option">
<img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
<span>{{slotProps.option.brand}}</span>
</div>
@ -70,14 +70,16 @@ export default {
}
.p-dropdown-car-option {
display: flex;
justify-content: space-between;
align-items: center;
img {
vertical-align: middle;
margin-right: .5em;
width: 24px;
}
span {
float: right;
margin-top: .125em;
}
}

24
src/views/dropdown/DropdownDoc.vue
View File

@ -44,7 +44,7 @@ data() {
<template v-pre>
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix p-dropdown-car-option"&gt;
&lt;div class="p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt;
@ -254,7 +254,7 @@ data() {
&lt;h3&gt;Advanced with Templating, Filtering and Clear Icon&lt;/h3&gt;
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true" :showClear="true"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="p-clearfix p-dropdown-car-option"&gt;
&lt;div class="p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt;
@ -299,16 +299,18 @@ export default {
}
.p-dropdown-car-option {
img {
vertical-align: middle;
margin-right: .5em;
width: 24px;
}
display: flex;
justify-content: space-between;
align-items: center;
span {
float: right;
margin-top: .125em;
}
img {
margin-right: .5em;
width: 24px;
}
span {
margin-top: .125em;
}
}
</CodeHighlight>
</TabPanel>