Update OverlayPanel Demo

pull/358/head
cagataycivici 2020-07-01 18:54:09 +03:00
parent 6989681d22
commit c89d6879b3
3 changed files with 91 additions and 15 deletions

View File

@ -43,8 +43,6 @@
</template>
</DataTable>
</div>
</div>
<div class="content-section documentation">

View File

@ -3,16 +3,28 @@
<div class="content-section introduction">
<div class="feature-intro">
<h1>OverlayPanel</h1>
<p>OverlayPanel is a container component that can overlay other components on page.</p>
<p>OverlayPanel is a container component positioned as connected to its target.</p>
</div>
</div>
<div class="content-section implementation">
<div class="card">
<Button type="button" label="Toggle" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
<Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel">
<img src="demo/images/nature/nature1.jpg" alt="Nature Image">
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
<DataTable :value="products" :selection.sync="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
<Column field="name" header="Name" sortable></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template>
</Column>
<Column field="price" header="Price" sortable>
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
</DataTable>
</OverlayPanel>
</div>
</div>
@ -22,12 +34,33 @@
</template>
<script>
import ProductService from '../../service/ProductService';
import OverlayPanelDoc from './OverlayPanelDoc';
export default {
data() {
return {
products: null,
selectedProduct: null
}
},
productService: null,
created() {
this.productService = new ProductService();
},
mounted() {
this.productService.getProductsSmall().then(data => this.products = data);
},
methods: {
toggle(event) {
this.$refs.op.toggle(event);
},
formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
},
onProductSelect(event) {
this.$refs.op.hide();
this.$toast.add({severity:'info', summary: 'Product Select', detail: event.data.name, life: 3000});
}
},
components: {
@ -35,3 +68,14 @@ export default {
}
}
</script>
<style lang="scss" scoped>
button {
min-width: 15rem;
}
.product-image {
width: 50px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}
</style>

View File

@ -152,19 +152,53 @@ toggle(event) {
</a>
<CodeHighlight>
<template v-pre>
&lt;Button type="button" label="Toggle" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel"/&gt;
&lt;Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /&gt;
&lt;OverlayPanel ref="op" id="overlay_panel"&gt;
&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"&gt;
&lt;DataTable :value="products" :selection.sync="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"&gt;
&lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
&lt;Column header="Image"&gt;
&lt;template #body="slotProps"&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="price" header="Price" sortable&gt;
&lt;template #body="slotProps"&gt;
{{formatCurrency(slotProps.data.price)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/OverlayPanel&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import ProductService from '../../service/ProductService';
export default {
data() {
return {
products: null,
selectedProduct: null
}
},
productService: null,
created() {
this.productService = new ProductService();
},
mounted() {
this.productService.getProductsSmall().then(data => this.products = data);
},
methods: {
toggle(event) {
this.$refs.op.toggle(event);
},
formatCurrency(value) {
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
},
onProductSelect(event) {
this.$refs.op.hide();
this.$toast.add({severity:'info', summary: 'Product Select', detail: event.data.name, life: 3000});
}
}
}