Fixed #4760 - TieredMenu: New start and end templating
parent
316423456a
commit
0b17131c02
|
@ -322,6 +322,14 @@ export interface TieredMenuSlots {
|
||||||
*/
|
*/
|
||||||
class: any;
|
class: any;
|
||||||
}): VNode[];
|
}): VNode[];
|
||||||
|
/**
|
||||||
|
* Custom start template.
|
||||||
|
*/
|
||||||
|
start(): VNode[];
|
||||||
|
/**
|
||||||
|
* Custom end template.
|
||||||
|
*/
|
||||||
|
end(): VNode[];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -2,6 +2,9 @@
|
||||||
<Portal :appendTo="appendTo" :disabled="!popup">
|
<Portal :appendTo="appendTo" :disabled="!popup">
|
||||||
<transition name="p-connected-overlay" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
|
<transition name="p-connected-overlay" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
|
||||||
<div v-if="visible" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }" data-pc-name="tieredmenu">
|
<div v-if="visible" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }" data-pc-name="tieredmenu">
|
||||||
|
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
|
||||||
|
<slot name="start"></slot>
|
||||||
|
</div>
|
||||||
<TieredMenuSub
|
<TieredMenuSub
|
||||||
:ref="menubarRef"
|
:ref="menubarRef"
|
||||||
:id="id + '_list'"
|
:id="id + '_list'"
|
||||||
|
@ -27,6 +30,9 @@
|
||||||
@item-click="onItemClick"
|
@item-click="onItemClick"
|
||||||
@item-mouseenter="onItemMouseEnter"
|
@item-mouseenter="onItemMouseEnter"
|
||||||
/>
|
/>
|
||||||
|
<div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
|
||||||
|
<slot name="end"></slot>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</Portal>
|
</Portal>
|
||||||
|
|
|
@ -57,6 +57,7 @@ const classes = {
|
||||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
start: 'p-tieredmenu-start',
|
||||||
menu: 'p-tieredmenu-root-list',
|
menu: 'p-tieredmenu-root-list',
|
||||||
menuitem: ({ instance, processedItem }) => [
|
menuitem: ({ instance, processedItem }) => [
|
||||||
'p-menuitem',
|
'p-menuitem',
|
||||||
|
@ -78,7 +79,8 @@ const classes = {
|
||||||
text: 'p-menuitem-text',
|
text: 'p-menuitem-text',
|
||||||
submenuIcon: 'p-submenu-icon',
|
submenuIcon: 'p-submenu-icon',
|
||||||
submenu: 'p-submenu-list',
|
submenu: 'p-submenu-list',
|
||||||
separator: 'p-menuitem-separator'
|
separator: 'p-menuitem-separator',
|
||||||
|
end: 'p-tieredmenu-end'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default BaseStyle.extend({
|
export default BaseStyle.extend({
|
||||||
|
|
Loading…
Reference in New Issue