Updated overlay panel demos
Cagatay Civici
parent
dbac600078
commit
287fc92009
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>OverlayPanel is accessed via its reference and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> methods with an event of the target.</p>
|
||||
<p>OverlayPanel is accessed via its ref and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> functions with an event of the target.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-content-center">
|
||||
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
|
||||
|
|
@ -21,7 +21,7 @@ export default {
|
|||
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
|
||||
|
||||
<OverlayPanel ref="op">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
|
||||
<img src="/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
|
||||
</OverlayPanel>
|
||||
`,
|
||||
options: `
|
||||
|
|
@ -60,6 +60,7 @@ export default {
|
|||
import { ref } from "vue";
|
||||
|
||||
const op = ref();
|
||||
|
||||
const toggle = (event) => {
|
||||
op.value.toggle(event);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,16 +8,16 @@
|
|||
|
||||
<div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
|
||||
<div class="relative">
|
||||
<img :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" />
|
||||
<img :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between mt-3 mb-2">
|
||||
<span class="text-900 font-medium text-xl">{{ selectedProduct.name }}</span>
|
||||
<span class="text-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
|
||||
<span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
|
||||
</div>
|
||||
<span class="text-600">{{ selectedProduct.category }}</span>
|
||||
</div>
|
||||
|
||||
<OverlayPanel ref="op" appendTo="body">
|
||||
<OverlayPanel ref="op" appendTo="body" showCloseIcon>
|
||||
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
|
||||
<Column header="Image">
|
||||
|
|
@ -26,9 +26,7 @@
|
|||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" sortable style="min-width: 8rem">
|
||||
<template #body="slotProps">
|
||||
{{ slotProps.data.price }}
|
||||
</template>
|
||||
<template #body="slotProps"> $ {{ slotProps.data.price }} </template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</OverlayPanel>
|
||||
|
|
@ -50,26 +48,26 @@ export default {
|
|||
|
||||
<div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
|
||||
<div class="relative">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-4rem shadow-1" />
|
||||
<img :src="\`/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-4rem shadow-1" class="w-full sm:w-20rem" />
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between mt-3 mb-2">
|
||||
<span class="text-900 font-medium text-xl">{{ selectedProduct.name }}</span>
|
||||
<span class="text-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
|
||||
<span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
|
||||
</div>
|
||||
<span class="text-600">{{ selectedProduct.category }}</span>
|
||||
</div>
|
||||
|
||||
<OverlayPanel ref="op" appendTo="body">
|
||||
<OverlayPanel ref="op" appendTo="body" showCloseIcon>
|
||||
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<Column field="name" header="Name" sortable style="width: 50%"></Column>
|
||||
<Column header="Image" style="width: 20%">
|
||||
<template #body="slotProps">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="slotProps.data.image" class="w-4rem shadow-1" />
|
||||
<img :src="\`/images/product/\${selectedProduct.image}\`" :alt="slotProps.data.image" class="w-4rem shadow-1" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" sortable style="width: 30%">
|
||||
<template #body="slotProps">
|
||||
{{ slotProps.data.price }}
|
||||
$ {{ slotProps.data.price }}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -83,16 +81,16 @@ export default {
|
|||
|
||||
<div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
|
||||
<div class="relative">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" />
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between mt-3 mb-2">
|
||||
<span class="text-900 font-medium text-xl">{{ selectedProduct.name }}</span>
|
||||
<span class="text-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
|
||||
<span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
|
||||
</div>
|
||||
<span class="text-600">{{ selectedProduct.category }}</span>
|
||||
</div>
|
||||
|
||||
<OverlayPanel ref="op" appendTo="body">
|
||||
<OverlayPanel ref="op" appendTo="body" showCloseIcon>
|
||||
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
|
||||
<Column header="Image">
|
||||
|
|
@ -102,7 +100,7 @@ export default {
|
|||
</Column>
|
||||
<Column field="price" header="Price" sortable style="min-width: 8rem">
|
||||
<template #body="slotProps">
|
||||
{{ slotProps.data.price }}
|
||||
$ {{ slotProps.data.price }}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -145,16 +143,16 @@ export default {
|
|||
|
||||
<div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
|
||||
<div class="relative">
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" />
|
||||
<img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between mt-3 mb-2">
|
||||
<span class="text-900 font-medium text-xl">{{ selectedProduct.name }}</span>
|
||||
<span class="text-900 font-semibold text-xl">{{ selectedProduct.name }}</span>
|
||||
<span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
|
||||
</div>
|
||||
<span class="text-600">{{ selectedProduct.category }}</span>
|
||||
</div>
|
||||
|
||||
<OverlayPanel ref="op" appendTo="body">
|
||||
<OverlayPanel ref="op" appendTo="body" showCloseIcon>
|
||||
<DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
|
||||
<Column header="Image">
|
||||
|
|
@ -164,7 +162,7 @@ export default {
|
|||
</Column>
|
||||
<Column field="price" header="Price" sortable style="min-width: 8rem">
|
||||
<template #body="slotProps">
|
||||
{{ slotProps.data.price }}
|
||||
$ {{ slotProps.data.price }}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default {
|
|||
component: BasicDoc
|
||||
},
|
||||
{
|
||||
id: 'dataTable',
|
||||
id: 'datatable',
|
||||
label: 'DataTable',
|
||||
component: DataTableDoc
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue