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

Update OrderList and PickList demos

pull/310/head
cagataycivici 2020-05-02 11:38:18 +03:00
parent 2d5dd3a9f4
commit fa537c5495
4 changed files with 88 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/orderlist/OrderListDemo.vue
View File

@ -15,7 +15,10 @@
<template #item="slotProps"> <template #item="slotProps">
<div class="p-caritem"> <div class="p-caritem">
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'"> <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> </div>
</template> </template>
</OrderList> </OrderList>
@ -49,23 +52,24 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.p-caritem { .p-caritem {
&:after { display: flex;
content: ""; align-items: center;
display: table;
clear: both; div {
display: flex;
flex-direction: column;
}
.p-caritem-vin {
font-weight: 600;
display: block;
margin-bottom: .25em;
} }
img { img {
display:inline-block;
margin:2px 0 2px 2px;
width: 48px; width: 48px;
height: 48px; height: 48px;
} margin-right: .5em;
div {
font-size:14px;
float:right;
margin: 16px 6px 0 0;
} }
} }
</style> </style>

40
src/views/orderlist/OrderListDoc.vue
View File

@ -21,7 +21,10 @@ import OrderList from 'primevue/orderlist';
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt; &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt; &lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/OrderList&gt; &lt;/OrderList&gt;
@ -44,7 +47,10 @@ import OrderList from 'primevue/orderlist';
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt; &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt; &lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/OrderList&gt; &lt;/OrderList&gt;
@ -171,7 +177,10 @@ import OrderList from 'primevue/orderlist';
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt; &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;&#123;&#123;slotProps.item.brand&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt; &lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/OrderList&gt; &lt;/OrderList&gt;
@ -199,23 +208,24 @@ export default {
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.p-caritem { .p-caritem {
&amp;:after { display: flex;
content: ""; align-items: center;
display: table;
clear: both; div {
display: flex;
flex-direction: column;
}
.p-caritem-vin {
font-weight: 600;
display: block;
margin-bottom: .25em;
} }
img { img {
display:inline-block;
margin:2px 0 2px 2px;
width: 48px; width: 48px;
height: 48px; height: 48px;
} margin-right: .5em;
div {
font-size:14px;
float:right;
margin: 16px 6px 0 0;
} }
} }
</CodeHighlight> </CodeHighlight>

30
src/views/picklist/PickListDemo.vue
View File

@ -18,7 +18,10 @@
<template #item="slotProps"> <template #item="slotProps">
<div class="p-caritem"> <div class="p-caritem">
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'"> <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> </div>
</template> </template>
</PickList> </PickList>
@ -52,23 +55,24 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.p-caritem { .p-caritem {
&:after { display: flex;
content: ""; align-items: center;
display: table;
clear: both; div {
display: flex;
flex-direction: column;
}
.p-caritem-vin {
font-weight: 600;
display: block;
margin-bottom: .25em;
} }
img { img {
display:inline-block;
margin:2px 0 2px 2px;
width: 48px; width: 48px;
height: 48px; height: 48px;
} margin-right: .5em;
div {
font-size:14px;
float:right;
margin: 16px 6px 0 0;
} }
} }
</style> </style>

45
src/views/picklist/PickListDoc.vue
View File

@ -16,7 +16,10 @@ import PickList from 'primevue/picklist';
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt; &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt; &lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/PickList&gt; &lt;/PickList&gt;
@ -37,7 +40,10 @@ import PickList from 'primevue/picklist';
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt; &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt; &lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/PickList&gt; &lt;/PickList&gt;
@ -55,7 +61,10 @@ import PickList from 'primevue/picklist';
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt; &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt; &lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/PickList&gt; &lt;/PickList&gt;
@ -230,7 +239,10 @@ import PickList from 'primevue/picklist';
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt; &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt; &lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/PickList&gt; &lt;/PickList&gt;
@ -258,23 +270,24 @@ export default {
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.p-caritem { .p-caritem {
&amp;:after { display: flex;
content: ""; align-items: center;
display: table;
clear: both; div {
display: flex;
flex-direction: column;
}
.p-caritem-vin {
font-weight: 600;
display: block;
margin-bottom: .25em;
} }
img { img {
display:inline-block;
margin:2px 0 2px 2px;
width: 48px; width: 48px;
height: 48px; height: 48px;
} margin-right: .5em;
div {
font-size:14px;
float:right;
margin: 16px 6px 0 0;
} }
} }
</CodeHighlight> </CodeHighlight>