Merge pull request #3788 from sezisfurkan/issue-3771
Image: Add Additional Toolbar Buttonspull/3798/head
commit
9d5c12cf22
|
@ -25,7 +25,27 @@ const ImageEvents = [
|
|||
const ImageSlots = [
|
||||
{
|
||||
name: 'indicator',
|
||||
description: 'Custom content for the preview indicator'
|
||||
description: 'Custom content for the preview indicator.'
|
||||
},
|
||||
{
|
||||
name: 'refresh',
|
||||
description: 'Custom content for the component refresh.'
|
||||
},
|
||||
{
|
||||
name: 'undo',
|
||||
description: 'Custom content for the component undo.'
|
||||
},
|
||||
{
|
||||
name: 'zoomout',
|
||||
description: 'Custom content for the component zoomout.'
|
||||
},
|
||||
{
|
||||
name: 'zoomin',
|
||||
description: 'Custom content for the component zoomin.'
|
||||
},
|
||||
{
|
||||
name: 'close',
|
||||
description: 'Custom content for the component close.'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -37,6 +37,26 @@ export interface ImageSlots {
|
|||
* Custom indicator template.
|
||||
*/
|
||||
indicator(): VNode[];
|
||||
/**
|
||||
* Custom refresh template.
|
||||
*/
|
||||
refresh(): VNode[];
|
||||
/**
|
||||
* Custom undo template.
|
||||
*/
|
||||
undo(): VNode[];
|
||||
/**
|
||||
* Custom zoomout template.
|
||||
*/
|
||||
zoomout(): VNode[];
|
||||
/**
|
||||
* Custom zoomin template.
|
||||
*/
|
||||
zoomin(): VNode[];
|
||||
/**
|
||||
* Custom close template.
|
||||
*/
|
||||
close(): VNode[];
|
||||
}
|
||||
|
||||
export interface ImageEmits {}
|
||||
|
|
|
@ -10,19 +10,33 @@
|
|||
<div v-if="maskVisible" :ref="maskRef" v-focustrap role="dialog" :class="maskClass" :aria-modal="maskVisible" @click="onMaskClick" @keydown="onMaskKeydown">
|
||||
<div class="p-image-toolbar">
|
||||
<button class="p-image-action p-link" @click="rotateRight" type="button" :aria-label="rightAriaLabel">
|
||||
<slot name="refresh">
|
||||
<i class="pi pi-refresh"></i>
|
||||
</slot>
|
||||
</button>
|
||||
|
||||
<button class="p-image-action p-link" @click="rotateLeft" type="button" :aria-label="leftAriaLabel">
|
||||
<slot name="undo">
|
||||
<i class="pi pi-undo"></i>
|
||||
</slot>
|
||||
</button>
|
||||
|
||||
<button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="zoomDisabled" :aria-label="zoomOutAriaLabel">
|
||||
<slot name="zoomout">
|
||||
<i class="pi pi-search-minus"></i>
|
||||
</slot>
|
||||
</button>
|
||||
|
||||
<button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="zoomDisabled" :aria-label="zoomInAriaLabel">
|
||||
<slot name="zoomin">
|
||||
<i class="pi pi-search-plus"></i>
|
||||
</slot>
|
||||
</button>
|
||||
|
||||
<button class="p-image-action p-link" type="button" @click="hidePreview" :aria-label="closeAriaLabel" autofocus>
|
||||
<slot name="close">
|
||||
<i class="pi pi-times"></i>
|
||||
</slot>
|
||||
</button>
|
||||
</div>
|
||||
<transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave">
|
||||
|
|
Loading…
Reference in New Issue