Images and Some demos fixed
This commit is contained in:
Bahadır Sofuoğlu
@@ -62,10 +62,10 @@
|
||||
<div class="card">
|
||||
<h5>Templating</h5>
|
||||
<Button type="button" class="mr-2 mb-2 px-3">
|
||||
<img alt="logo" src="images/primevue-logo.svg" style="width: 1.5rem" />
|
||||
<img alt="logo" src="/images/primevue-logo.svg" style="width: 1.5rem" />
|
||||
</Button>
|
||||
<Button type="button" class="p-button-outlined p-button-success mr-2 mb-2">
|
||||
<img alt="logo" src="images/primevue-logo.svg" style="width: 1.5rem" />
|
||||
<img alt="logo" src="/images/primevue-logo.svg" style="width: 1.5rem" />
|
||||
<span class="ml-2 text-bold">PrimeVue</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<template #list="slotProps">
|
||||
<div class="col-12">
|
||||
<div class="flex flex-column md:flex-row align-items-center p-3 w-full">
|
||||
<img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
|
||||
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
|
||||
<div class="flex-1 text-center md:text-left">
|
||||
<div class="font-bold text-2xl">{{ slotProps.data.name }}</div>
|
||||
<div class="mb-3">{{ slotProps.data.description }}</div>
|
||||
@@ -47,7 +47,7 @@
|
||||
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
|
||||
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
|
||||
<div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
|
||||
<div class="mb-3">{{ slotProps.data.description }}</div>
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="mb-3">
|
||||
<img :src="'images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
|
||||
<img :src="'/images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-1">
|
||||
@@ -34,10 +34,10 @@
|
||||
<h5>Galleria</h5>
|
||||
<Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px; margin: auto">
|
||||
<template #item="slotProps">
|
||||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
|
||||
<img :src="'/' + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
<img :src="'/' + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</template>
|
||||
</Galleria>
|
||||
</div>
|
||||
@@ -47,7 +47,7 @@
|
||||
<div class="card">
|
||||
<h5>Image</h5>
|
||||
<div class="flex justify-content-center">
|
||||
<Image src="images/galleria/galleria11.jpg" alt="Image" width="250" preview />
|
||||
<Image src="/images/galleria/galleria11.jpg" alt="Image" width="250" preview />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -68,16 +68,17 @@ const toast = useToast();
|
||||
const message = ref([]);
|
||||
const username = ref(null);
|
||||
const email = ref(null);
|
||||
const count = ref(0);
|
||||
|
||||
const addMessage = (type) => {
|
||||
if (type === 'success') {
|
||||
this.message = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: this.count++ }];
|
||||
message.value = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: count.value++ }];
|
||||
} else if (type === 'info') {
|
||||
this.message = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: this.count++ }];
|
||||
message.value = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: count.value++ }];
|
||||
} else if (type === 'warn') {
|
||||
this.message = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: this.count++ }];
|
||||
message.value = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: count.value++ }];
|
||||
} else if (type === 'error') {
|
||||
this.message = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: this.count++ }];
|
||||
message.value = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: count.value++ }];
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -16,21 +16,21 @@
|
||||
</div>
|
||||
<div class="card p-fluid">
|
||||
<h5>Overlay Panel</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-6">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div>
|
||||
<Button type="button" label="Image" @click="toggle" class="p-button-success" />
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
|
||||
<img src="images/nature/nature9.jpg" alt="Nature 9" />
|
||||
<img src="/images/nature/nature9.jpg" alt="Nature 9" />
|
||||
</OverlayPanel>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div>
|
||||
<Button type="button" label="DataTable" @click="toggleDataTable" class="p-button-success" />
|
||||
<OverlayPanel ref="op2" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
|
||||
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
|
||||
<Column field="name" header="Name" :sortable="true" headerStyle="min-width:10rem;"></Column>
|
||||
<Column header="Image" headerStyle="min-width:10rem;">
|
||||
<template #body="slotProps">
|
||||
<img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="100" class="shadow-2" />
|
||||
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="100" class="shadow-2" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" :sortable="true" headerStyle="min-width:8rem;">
|
||||
|
||||
@@ -162,34 +162,22 @@
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Splitter</h5>
|
||||
<div class="grid">
|
||||
<Splitter style="height: 300px" class="mb-5">
|
||||
<SplitterPanel :size="40" :minSize="10" style="overflow: scroll">
|
||||
<p class="col m-3">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur pariatur recusandae rerum atque nisi ipsum fuga numquam distinctio obcaecati quibusdam repellat, est assumenda quam perferendis reprehenderit,
|
||||
blanditiis, excepturi facilis! Voluptatem.
|
||||
</p>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel :size="60" style="overflow: scroll">
|
||||
<Splitter layout="vertical">
|
||||
<SplitterPanel :size="15">
|
||||
<p class="col m-3">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
|
||||
similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
|
||||
cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel :size="85">
|
||||
<p class="col m-3">
|
||||
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
|
||||
aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus
|
||||
luctus odio.
|
||||
</p>
|
||||
</SplitterPanel>
|
||||
</Splitter>
|
||||
</SplitterPanel>
|
||||
</Splitter>
|
||||
</div>
|
||||
|
||||
<Splitter style="height: 300px" class="mb-5">
|
||||
<SplitterPanel :size="30" :minSize="10" style="overflow: scroll">
|
||||
<div className="h-full flex align-items-center justify-content-center">Panel 1</div>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel :size="70" style="overflow: scroll">
|
||||
<Splitter layout="vertical">
|
||||
<SplitterPanel :size="15">
|
||||
<div className="h-full flex align-items-center justify-content-center">Panel 2</div>
|
||||
</SplitterPanel>
|
||||
<SplitterPanel :size="50">
|
||||
<div className="h-full flex align-items-center justify-content-center">Panel 3</div>
|
||||
</SplitterPanel>
|
||||
</Splitter>
|
||||
</SplitterPanel>
|
||||
</Splitter>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
</Column>
|
||||
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
|
||||
<template #body="{ data }">
|
||||
<img :alt="data.representative.name" :src="'images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<img :alt="data.representative.name" :src="'/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
|
||||
</template>
|
||||
<template #filter="{ filterModel }">
|
||||
@@ -132,7 +132,6 @@
|
||||
<DataTable :value="customer2" :scrollable="true" scrollHeight="400px" :loading="loading2" scrollDirection="both" class="mt-3">
|
||||
<Column field="name" header="Name" :style="{ width: '150px' }" frozen></Column>
|
||||
<Column field="id" header="Id" :style="{ width: '100px' }" :frozen="idFrozen"></Column>
|
||||
<Column field="name" header="Name" :style="{ width: '200px' }"></Column>
|
||||
<Column field="country.name" header="Country" :style="{ width: '200px' }">
|
||||
<template #body="{ data }">
|
||||
<img src="@/assets/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
|
||||
@@ -180,7 +179,7 @@
|
||||
</Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
|
||||
<img :src="'/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="price" header="Price" :sortable="true">
|
||||
@@ -264,7 +263,7 @@
|
||||
</Column>
|
||||
<Column field="date" header="Date" style="min-width: 200px"></Column>
|
||||
<template #groupheader="slotProps">
|
||||
<img :alt="slotProps.data.representative.name" :src="'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<img :alt="slotProps.data.representative.name" :src="'/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span class="image-text font-bold ml-2">{{ slotProps.data.representative.name }}</span>
|
||||
</template>
|
||||
<template #groupfooter="slotProps">
|
||||
|
||||
Reference in New Issue
Block a user