vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Visual updates to orderlist-picklist demos

Browse source
This commit is contained in:
Cagatay Civici 2024-04-02 12:21:07 +03:00
parent 5ba2a6b9d5
commit 26a2374f1d
5 changed files with 81 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

76
doc/picklist/TemplateDoc.vue
View file

@ -3,17 +3,15 @@
<p>For custom content support define an <i>item</i> template that gets the item instance as a parameter. In addition <i>sourceheader</i> and <i>targetheader</i> slots are provided for further customization.</p>
</DocSectionText>
<div class="card">
<PickList v-model="products" dataKey="id" breakpoint="1400px" listStyle="height:342px">
<template #sourceheader> Available </template>
<template #targetheader> Selected </template>
<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
<template #item="{ item }">
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ item.name }}</span>
<div class="flex align-items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ item.category }}</span>
<div class="flex flex-wrap p-1 align-items-center gap-3">
<img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex align-items-center gap-1">
<i class="pi pi-tag text-sm text-secondary"></i>
<span class="text-sm text-secondary">{{ item.category }}</span>
</div>
</div>
<span class="font-bold">${{ item.price }}</span>
@ -33,20 +31,18 @@ export default {
products: null,
code: {
basic: `
<PickList v-model="products" dataKey="id" breakpoint="1400px">
<template #sourceheader> Available </template>
<template #targetheader> Selected </template>
<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
<template #item="{ item }">
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ item.name }}</span>
<div class="flex align-items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ item.category }}</span>
<div class="flex flex-wrap p-1 align-items-center gap-3">
<img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex align-items-center gap-1">
<i class="pi pi-tag text-sm text-secondary"></i>
<span class="text-sm text-secondary">{{ item.category }}</span>
</div>
</div>
<span class="font-bold">$ {{ item.price }}</span>
<span class="font-bold">\${{ item.price }}</span>
</div>
</template>
</PickList>
@ -54,20 +50,18 @@ export default {
options: `
<template>
<div class="card">
<PickList v-model="products" dataKey="id" breakpoint="1400px">
<template #sourceheader> Available </template>
<template #targetheader> Selected </template>
<PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
<template #item="{ item }">
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ item.name }}</span>
<div class="flex align-items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ item.category }}</span>
<div class="flex flex-wrap p-1 align-items-center gap-3">
<img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex align-items-center gap-1">
<i class="pi pi-tag text-sm text-secondary"></i>
<span class="text-sm text-secondary">{{ item.category }}</span>
</div>
</div>
<span class="font-bold">$ {{ item.price }}</span>
<span class="font-bold">\${{ item.price }}</span>
</div>
</template>
</PickList>
@ -92,19 +86,17 @@ export default {
<template>
<div class="card">
<PickList v-model="products" dataKey="id" breakpoint="1400px">
<template #sourceheader> Available </template>
<template #targetheader> Selected </template>
<template #item="{ item }">
<div class="flex flex-wrap p-2 align-items-center gap-3">
<img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-2">
<span class="font-bold">{{ item.name }}</span>
<div class="flex align-items-center gap-2">
<i class="pi pi-tag text-sm"></i>
<span>{{ item.category }}</span>
<div class="flex flex-wrap p-1 align-items-center gap-3">
<img class="w-3rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-column gap-1">
<span class="font-medium">{{ item.name }}</span>
<div class="flex align-items-center gap-1">
<i class="pi pi-tag text-sm text-secondary"></i>
<span class="text-sm text-secondary">{{ item.category }}</span>
</div>
</div>
<span class="font-bold">$ {{ item.price }}</span>
<span class="font-bold">\${{ item.price }}</span>
</div>
</template>
</PickList>