Demo update for overlay panel
parent
3748b2dcc7
commit
72148cbb73
|
@ -177,7 +177,7 @@ toggle(event) {
|
|||
<pre v-code><code><template v-pre>
|
||||
<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" style="width: 450px">
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px" :breakpoints="{'960px': '75vw'}">
|
||||
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
|
||||
<Column field="name" header="Name" sortable style="width: 50%"></Column>
|
||||
<Column header="Image" style="width: 20%">
|
||||
|
@ -246,7 +246,7 @@ export default {
|
|||
<div class="card">
|
||||
<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" style="width: 450px">
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px" :breakpoints="{'960px': '75vw'}">
|
||||
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @rowSelect="onProductSelect">
|
||||
<Column field="name" header="Name" sortable style="width: 50%"></Column>
|
||||
<Column header="Image"style="width: 20%">
|
||||
|
|
|
@ -372,7 +372,7 @@
|
|||
<div class="card p-fluid">
|
||||
<h5>Overlay Panel</h5>
|
||||
<Button type="button" label="Choose" @click="toggle" icon="pi pi-search" />
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" style="width: 450px">
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" style="width: 450px" :breakpoints="{'960px':'75vw'}">
|
||||
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<Column field="name" header="Name" sortable></Column>
|
||||
<Column header="Image">
|
||||
|
@ -884,7 +884,7 @@
|
|||
<div class="card p-fluid">
|
||||
<h5>Overlay Panel</h5>
|
||||
<Button type="button" label="Choose" @click="toggle" icon="pi pi-search" />
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" style="width: 450px">
|
||||
<OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" style="width: 450px" :breakpoints="{'960px':'75vw'}">
|
||||
<DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
|
||||
<Column field="name" header="Name" sortable></Column>
|
||||
<Column header="Image">
|
||||
|
|
Loading…
Reference in New Issue