Update OrderList and PickList demos
cagataycivici
parent
2d5dd3a9f4
commit
fa537c5495
|
|
@ -15,7 +15,10 @@
|
|||
<template #item="slotProps">
|
||||
<div class="p-caritem">
|
||||
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
|
||||
<div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
||||
<div>
|
||||
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
|
||||
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
|
|
@ -49,23 +52,24 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.p-caritem {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-caritem-vin {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
img {
|
||||
display:inline-block;
|
||||
margin:2px 0 2px 2px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size:14px;
|
||||
float:right;
|
||||
margin: 16px 6px 0 0;
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,7 +21,10 @@ import OrderList from 'primevue/orderlist';
|
|||
<template #item="slotProps">
|
||||
<div class="p-caritem">
|
||||
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
|
||||
<div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
||||
<div>
|
||||
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
|
||||
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
|
|
@ -44,7 +47,10 @@ import OrderList from 'primevue/orderlist';
|
|||
<template #item="slotProps">
|
||||
<div class="p-caritem">
|
||||
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
|
||||
<div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
||||
<div>
|
||||
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
|
||||
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
|
|
@ -171,7 +177,10 @@ import OrderList from 'primevue/orderlist';
|
|||
<template #item="slotProps">
|
||||
<div class="p-caritem">
|
||||
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
|
||||
<div>{{slotProps.item.brand} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
||||
<div>
|
||||
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
|
||||
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</OrderList>
|
||||
|
|
@ -199,23 +208,24 @@ export default {
|
|||
|
||||
<CodeHighlight lang="css">
|
||||
.p-caritem {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-caritem-vin {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
img {
|
||||
display:inline-block;
|
||||
margin:2px 0 2px 2px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size:14px;
|
||||
float:right;
|
||||
margin: 16px 6px 0 0;
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,10 @@
|
|||
<template #item="slotProps">
|
||||
<div class="p-caritem">
|
||||
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
|
||||
<div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
||||
<div>
|
||||
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
|
||||
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</PickList>
|
||||
|
|
@ -52,23 +55,24 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.p-caritem {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-caritem-vin {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
img {
|
||||
display:inline-block;
|
||||
margin:2px 0 2px 2px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size:14px;
|
||||
float:right;
|
||||
margin: 16px 6px 0 0;
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,7 +16,10 @@ import PickList from 'primevue/picklist';
|
|||
<template #item="slotProps">
|
||||
<div class="p-caritem">
|
||||
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
|
||||
<div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
||||
<div>
|
||||
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
|
||||
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</PickList>
|
||||
|
|
@ -37,7 +40,10 @@ import PickList from 'primevue/picklist';
|
|||
<template #item="slotProps">
|
||||
<div class="p-caritem">
|
||||
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
|
||||
<div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
||||
<div>
|
||||
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
|
||||
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</PickList>
|
||||
|
|
@ -55,7 +61,10 @@ import PickList from 'primevue/picklist';
|
|||
<template #item="slotProps">
|
||||
<div class="p-caritem">
|
||||
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
|
||||
<div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
||||
<div>
|
||||
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
|
||||
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</PickList>
|
||||
|
|
@ -230,7 +239,10 @@ import PickList from 'primevue/picklist';
|
|||
<template #item="slotProps">
|
||||
<div class="p-caritem">
|
||||
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
|
||||
<div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
|
||||
<div>
|
||||
<span class="p-caritem-vin">{{slotProps.item.vin}}</span>
|
||||
<span>{{slotProps.item.year}} - {{slotProps.item.color}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</PickList>
|
||||
|
|
@ -258,23 +270,24 @@ export default {
|
|||
|
||||
<CodeHighlight lang="css">
|
||||
.p-caritem {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-caritem-vin {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
img {
|
||||
display:inline-block;
|
||||
margin:2px 0 2px 2px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size:14px;
|
||||
float:right;
|
||||
margin: 16px 6px 0 0;
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
|
|
|||
Loading…
Reference in New Issue