mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-11 01:42:34 +00:00
Migrated demos
This commit is contained in:
Cagatay Civici
parent
1f86b4906f
commit
48f92d3966
454 changed files with 3920 additions and 3920 deletions
|
|
@ -2,34 +2,34 @@
|
|||
<DocSectionText v-bind="$attrs">
|
||||
<p>ContextMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex md:justify-content-center">
|
||||
<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
|
||||
<div class="card flex md:justify-center">
|
||||
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
|
||||
<li
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
|
||||
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
|
||||
@contextmenu="onRightClick($event, product.id)"
|
||||
>
|
||||
<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/' + product.image" :alt="product.name" />
|
||||
<div class="flex-1 flex flex-column gap-1">
|
||||
<div class="flex flex-wrap p-2 items-center gap-4">
|
||||
<img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
|
||||
<div class="flex-1 flex flex-col gap-1">
|
||||
<span class="font-bold">{{ product.name }}</span>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-tag text-sm"></i>
|
||||
<span>{{ product.category }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-bold text-900 ml-5">${{ product.price }}</span>
|
||||
<span class="font-bold text-surface-900 ml-8">${{ product.price }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ContextMenu ref="menu" :model="items" @hide="selectedId = null">
|
||||
<template #item="{ item, props }">
|
||||
<a v-ripple class="flex align-items-center" v-bind="props.action">
|
||||
<a v-ripple class="flex items-center" v-bind="props.action">
|
||||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
|
@ -79,33 +79,33 @@ export default {
|
|||
],
|
||||
code: {
|
||||
basic: `
|
||||
<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
|
||||
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
|
||||
<li
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
|
||||
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
|
||||
@contextmenu="onRightClick($event, product.id)"
|
||||
>
|
||||
<div class="flex flex-wrap p-2 align-items-center gap-3">
|
||||
<img class="w-4rem flex-shrink-0 border-round" :src="'/images/product/' + product.image" :alt="product.name" />
|
||||
<div class="flex-1 flex flex-column gap-1">
|
||||
<div class="flex flex-wrap p-2 items-center gap-4">
|
||||
<img class="w-16 flex-shrink-0 rounded" :src="'/images/product/' + product.image" :alt="product.name" />
|
||||
<div class="flex-1 flex flex-col gap-1">
|
||||
<span class="font-bold">{{ product.name }}</span>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-tag text-sm"></i>
|
||||
<span>{{ product.category }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-bold text-900 ml-5">\${{ product.price }}</span>
|
||||
<span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ContextMenu ref="menu" :model="items" @hide="selectedId = null">
|
||||
<template #item="{ item, props }">
|
||||
<a v-ripple class="flex align-items-center" v-bind="props.action">
|
||||
<a v-ripple class="flex items-center" v-bind="props.action">
|
||||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
|
@ -113,34 +113,34 @@ export default {
|
|||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card flex md:justify-content-center">
|
||||
<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
|
||||
<div class="card flex md:justify-center">
|
||||
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
|
||||
<li
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
|
||||
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
|
||||
@contextmenu="onRightClick($event, product.id)"
|
||||
>
|
||||
<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/' + product.image" :alt="product.name" />
|
||||
<div class="flex-1 flex flex-column gap-1">
|
||||
<div class="flex flex-wrap p-2 items-center gap-4">
|
||||
<img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
|
||||
<div class="flex-1 flex flex-col gap-1">
|
||||
<span class="font-bold">{{ product.name }}</span>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-tag text-sm"></i>
|
||||
<span>{{ product.category }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-bold text-900 ml-5">\${{ product.price }}</span>
|
||||
<span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ContextMenu ref="menu" :model="items" @hide="selectedId = null">
|
||||
<template #item="{ item, props }">
|
||||
<a v-ripple class="flex align-items-center" v-bind="props.action">
|
||||
<a v-ripple class="flex items-center" v-bind="props.action">
|
||||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
|
@ -203,34 +203,34 @@ export default {
|
|||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card flex md:justify-content-center">
|
||||
<ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem" @hide="selectedId = null">
|
||||
<div class="card flex md:justify-center">
|
||||
<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]" @hide="selectedId = null">
|
||||
<li
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:class="['p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
|
||||
:class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
|
||||
@contextmenu="onRightClick($event, product.id)"
|
||||
>
|
||||
<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/' + product.image" :alt="product.name" />
|
||||
<div class="flex-1 flex flex-column gap-1">
|
||||
<div class="flex flex-wrap p-2 items-center gap-4">
|
||||
<img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
|
||||
<div class="flex-1 flex flex-col gap-1">
|
||||
<span class="font-bold">{{ product.name }}</span>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-tag text-sm"></i>
|
||||
<span>{{ product.category }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="font-bold text-900 ml-5">\${{ product.price }}</span>
|
||||
<span class="font-bold text-surface-900 ml-8">\${{ product.price }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ContextMenu ref="menu" :model="items">
|
||||
<template #item="{ item, props }">
|
||||
<a v-ripple class="flex align-items-center" v-bind="props.action">
|
||||
<a v-ripple class="flex items-center" v-bind="props.action">
|
||||
<span :class="item.icon" />
|
||||
<span class="ml-2">{{ item.label }}</span>
|
||||
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
|
||||
<span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<span v-if="item.shortcut" class="ml-auto border border-surface-200 dark:border-surface-700 rounded bg-surface-100 text-xs p-1">{{ item.shortcut }}</span>
|
||||
<i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue