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

Update OrderList samples

pull/5806/head
Cagatay Civici 2024-05-30 03:00:20 +03:00
parent ec6156f1ce
commit 9aa17fd097
2 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
doc/orderlist/BasicDoc.vue
View File

@ -2,8 +2,8 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>OrderList requires an array as its value bound with the <i>v-model</i> directive and <i>item</i> template for its content.</p> <p>OrderList requires an array as its value bound with the <i>v-model</i> directive and <i>item</i> template for its content.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card sm:flex sm:justify-center">
<OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-56"> <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
<template #item="{ item }"> <template #item="{ item }">
{{ item.name }} {{ item.name }}
</template> </template>
@ -21,7 +21,7 @@ export default {
products: null, products: null,
code: { code: {
basic: ` basic: `
<OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-56"> <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
<template #item="{ item }"> <template #item="{ item }">
{{ item.name }} {{ item.name }}
</template> </template>
@ -29,8 +29,8 @@ export default {
`, `,
options: ` options: `
<template> <template>
<div class="card lg:flex lg:justify-center"> <div class="card sm:flex sm:justify-center">
<OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-56"> <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
<template #item="{ item }"> <template #item="{ item }">
{{ item.name }} {{ item.name }}
</template> </template>
@ -54,8 +54,8 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card lg:flex lg:justify-center"> <div class="card sm:flex sm:justify-center">
<OrderList v-model="products" dataKey="id" breakpoint="1400px" pt:pcList:root="w-full md:w-56"> <OrderList v-model="products" dataKey="id" breakpoint="575px" pt:pcList:root="w-full sm:w-56">
<template #item="{ item }"> <template #item="{ item }">
{{ item.name }} {{ item.name }}
</template> </template>

22
doc/orderlist/TemplateDoc.vue
View File

@ -2,10 +2,10 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>For custom content support define an <i>item</i> template that gets the item instance as a parameter. In addition <i>header</i> slot is provided for further customization.</p> <p>For custom content support define an <i>item</i> template that gets the item instance as a parameter. In addition <i>header</i> slot is provided for further customization.</p>
</DocSectionText> </DocSectionText>
<div class="card lg:flex lg:justify-center"> <div class="card sm:flex sm:justify-center">
<OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem"> <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
<template #item="{ item }"> <template #item="{ item }">
<div class="flex flex-wrap p-1 items-center gap-4"> <div class="flex flex-wrap p-1 items-center gap-4 w-full">
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" /> <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1"> <div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
@ -30,9 +30,9 @@ export default {
products: null, products: null,
code: { code: {
basic: ` basic: `
<OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem"> <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
<template #item="{ item }"> <template #item="{ item }">
<div class="flex flex-wrap p-1 items-center gap-4"> <div class="flex flex-wrap p-1 items-center gap-4 w-full">
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" /> <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1"> <div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
@ -48,10 +48,10 @@ export default {
`, `,
options: ` options: `
<template> <template>
<div class="card lg:flex lg:justify-center"> <div class="card sm:flex sm:justify-center">
<OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem"> <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
<template #item="{ item }"> <template #item="{ item }">
<div class="flex flex-wrap p-1 items-center gap-4"> <div class="flex flex-wrap p-1 items-center gap-4 w-full">
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" /> <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1"> <div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>
@ -83,10 +83,10 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card lg:flex lg:justify-center"> <div class="card sm:flex sm:justify-center">
<OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem"> <OrderList v-model="products" dataKey="id" breakpoint="575px" scrollHeight="20rem">
<template #item="{ item }"> <template #item="{ item }">
<div class="flex flex-wrap p-1 items-center gap-4"> <div class="flex flex-wrap p-1 items-center gap-4 w-full">
<img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" /> <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
<div class="flex-1 flex flex-col gap-1"> <div class="flex-1 flex flex-col gap-1">
<span class="font-medium">{{ item.name }}</span> <span class="font-medium">{{ item.name }}</span>