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

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

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