Fixed #1757 - OrderList slots before and after the buttons
parent
c9df934f2a
commit
099574edc7
|
@ -98,6 +98,14 @@ const OrderListSlots = [
|
|||
{
|
||||
name: "item",
|
||||
description: "Custom content for the item"
|
||||
},
|
||||
{
|
||||
name: "controlsstart",
|
||||
description: "Custom content before the buttons"
|
||||
},
|
||||
{
|
||||
name: "controlsend",
|
||||
description: "Custom content after the buttons"
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -25,6 +25,8 @@ declare class OrderList {
|
|||
$slots: {
|
||||
header: VNode[];
|
||||
item: OrderListItemSlotInterface;
|
||||
controlsstart: VNode[];
|
||||
controlsend: VNode[];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<div class="p-orderlist p-component">
|
||||
<div class="p-orderlist-controls">
|
||||
<slot name="controlsstart"></slot>
|
||||
<OLButton type="button" icon="pi pi-angle-up" @click="moveUp"></OLButton>
|
||||
<OLButton type="button" icon="pi pi-angle-double-up" @click="moveTop"></OLButton>
|
||||
<OLButton type="button" icon="pi pi-angle-down" @click="moveDown"></OLButton>
|
||||
<OLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom"></OLButton>
|
||||
<slot name="controlsend"></slot>
|
||||
</div>
|
||||
<div class="p-orderlist-list-container">
|
||||
<div class="p-orderlist-header" v-if="$slots.header">
|
||||
|
|
|
@ -64,6 +64,10 @@ import OrderList from 'primevue/orderlist';
|
|||
<h5>DataKey</h5>
|
||||
<p>It is recommended to provide the name of the field that uniquely identifies the a record in the data via the <i>dataKey</i> property for better performance.</p>
|
||||
|
||||
<h5>Templating</h5>
|
||||
<p>In addition to the <i>item</i> template, <i>header</i> is provided to place custom content at the list header. Controls section
|
||||
can also be customized to place content before and after the buttons with <i>controlsstart</i> and <i>controlsend</i> slots respectively.</p>
|
||||
|
||||
<h5>Properties</h5>
|
||||
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
|
@ -180,6 +184,14 @@ import OrderList from 'primevue/orderlist';
|
|||
<td>item</td>
|
||||
<td>item: Item of the component<br />
|
||||
index: Index of the item</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>controlsstart</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>ı
|
||||
<td>controlsend</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
Loading…
Reference in New Issue