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

Updated overlay panel demos

pull/4759/head
Cagatay Civici 2023-11-02 09:54:55 +03:00
parent dbac600078
commit 287fc92009
3 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
doc/overlaypanel/BasicDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <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> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Button type="button" icon="pi pi-image" label="Image" @click="toggle" /> <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" /> <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
<OverlayPanel ref="op"> <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> </OverlayPanel>
`, `,
options: ` options: `
@ -60,6 +60,7 @@ export default {
import { ref } from "vue"; import { ref } from "vue";
const op = ref(); const op = ref();
const toggle = (event) => { const toggle = (event) => {
op.value.toggle(event); op.value.toggle(event);
} }

36
doc/overlaypanel/DataTableDoc.vue
View File

@ -8,16 +8,16 @@
<div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round"> <div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
<div class="relative"> <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>
<div class="flex align-items-center justify-content-between mt-3 mb-2"> <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> <span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
</div> </div>
<span class="text-600">{{ selectedProduct.category }}</span> <span class="text-600">{{ selectedProduct.category }}</span>
</div> </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"> <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 field="name" header="Name" sortable style="min-width: 12rem"></Column>
<Column header="Image"> <Column header="Image">
@ -26,9 +26,7 @@
</template> </template>
</Column> </Column>
<Column field="price" header="Price" sortable style="min-width: 8rem"> <Column field="price" header="Price" sortable style="min-width: 8rem">
<template #body="slotProps"> <template #body="slotProps"> $ {{ slotProps.data.price }} </template>
{{ slotProps.data.price }}
</template>
</Column> </Column>
</DataTable> </DataTable>
</OverlayPanel> </OverlayPanel>
@ -50,26 +48,26 @@ export default {
<div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round"> <div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
<div class="relative"> <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>
<div class="flex align-items-center justify-content-between mt-3 mb-2"> <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> <span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
</div> </div>
<span class="text-600">{{ selectedProduct.category }}</span> <span class="text-600">{{ selectedProduct.category }}</span>
</div> </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"> <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 field="name" header="Name" sortable style="width: 50%"></Column>
<Column header="Image" style="width: 20%"> <Column header="Image" style="width: 20%">
<template #body="slotProps"> <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> </template>
</Column> </Column>
<Column field="price" header="Price" sortable style="width: 30%"> <Column field="price" header="Price" sortable style="width: 30%">
<template #body="slotProps"> <template #body="slotProps">
{{ slotProps.data.price }} $ {{ slotProps.data.price }}
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -83,16 +81,16 @@ export default {
<div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round"> <div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
<div class="relative"> <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>
<div class="flex align-items-center justify-content-between mt-3 mb-2"> <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> <span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
</div> </div>
<span class="text-600">{{ selectedProduct.category }}</span> <span class="text-600">{{ selectedProduct.category }}</span>
</div> </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"> <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 field="name" header="Name" sortable style="min-width: 12rem"></Column>
<Column header="Image"> <Column header="Image">
@ -102,7 +100,7 @@ export default {
</Column> </Column>
<Column field="price" header="Price" sortable style="min-width: 8rem"> <Column field="price" header="Price" sortable style="min-width: 8rem">
<template #body="slotProps"> <template #body="slotProps">
{{ slotProps.data.price }} $ {{ slotProps.data.price }}
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -145,16 +143,16 @@ export default {
<div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round"> <div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
<div class="relative"> <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>
<div class="flex align-items-center justify-content-between mt-3 mb-2"> <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> <span class="text-900 text-xl ml-3">{{ '$' + selectedProduct.price }}</span>
</div> </div>
<span class="text-600">{{ selectedProduct.category }}</span> <span class="text-600">{{ selectedProduct.category }}</span>
</div> </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"> <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 field="name" header="Name" sortable style="min-width: 12rem"></Column>
<Column header="Image"> <Column header="Image">
@ -164,7 +162,7 @@ export default {
</Column> </Column>
<Column field="price" header="Price" sortable style="min-width: 8rem"> <Column field="price" header="Price" sortable style="min-width: 8rem">
<template #body="slotProps"> <template #body="slotProps">
{{ slotProps.data.price }} $ {{ slotProps.data.price }}
</template> </template>
</Column> </Column>
</DataTable> </DataTable>

2
pages/overlaypanel/index.vue
View File

@ -33,7 +33,7 @@ export default {
component: BasicDoc component: BasicDoc
}, },
{ {
id: 'dataTable', id: 'datatable',
label: 'DataTable', label: 'DataTable',
component: DataTableDoc component: DataTableDoc
}, },