diff --git a/docs/src/examples/QBtnDropdown/ArrowContainerSlot.vue b/docs/src/examples/QBtnDropdown/ArrowContainerSlot.vue new file mode 100644 index 00000000000..fb8a08b13bb --- /dev/null +++ b/docs/src/examples/QBtnDropdown/ArrowContainerSlot.vue @@ -0,0 +1,60 @@ + + + diff --git a/docs/src/pages/vue-components/button-dropdown.md b/docs/src/pages/vue-components/button-dropdown.md index 93613723d0c..8a89bf3f714 100644 --- a/docs/src/pages/vue-components/button-dropdown.md +++ b/docs/src/pages/vue-components/button-dropdown.md @@ -27,6 +27,8 @@ In case you are looking for a dropdown "input" instead of "button" use [Select]( + + diff --git a/ui/src/components/btn-dropdown/QBtnDropdown.js b/ui/src/components/btn-dropdown/QBtnDropdown.js index 3d653ee4671..b64665c5934 100644 --- a/ui/src/components/btn-dropdown/QBtnDropdown.js +++ b/ui/src/components/btn-dropdown/QBtnDropdown.js @@ -152,6 +152,10 @@ export default createComponent({ menuRef.value?.hide(evt) } + function getSplitButtonMenu (menuContent) { + return props.disable !== true && props.disableDropdown !== true ? [ menuContent ] : [] + } + // expose public methods Object.assign(proxy, { show, hide, toggle @@ -162,39 +166,43 @@ export default createComponent({ }) return () => { + const icon = h(QIcon, { + class: iconClass.value, + name: props.dropdownIcon || proxy.$q.iconSet.arrow.dropdown + }) + + const dropdownMenu = h(QMenu, { + ref: menuRef, + id: targetUid.value, + class: props.contentClass, + style: props.contentStyle, + cover: props.cover, + fit: true, + persistent: props.persistent, + noEscDismiss: props.noEscDismiss, + noRouteDismiss: props.noRouteDismiss, + autoClose: props.autoClose, + noFocus: props.noFocus, + noRefocus: props.noRefocus, + anchor: props.menuAnchor, + self: props.menuSelf, + offset: props.menuOffset, + separateClosePopup: true, + transitionShow: props.transitionShow, + transitionHide: props.transitionHide, + transitionDuration: props.transitionDuration, + onBeforeShow, + onShow, + onBeforeHide, + onHide + }, slots.default) + const Arrow = [ - h(QIcon, { - class: iconClass.value, - name: props.dropdownIcon || proxy.$q.iconSet.arrow.dropdown - }) + icon ] props.disableDropdown !== true && Arrow.push( - h(QMenu, { - ref: menuRef, - id: targetUid.value, - class: props.contentClass, - style: props.contentStyle, - cover: props.cover, - fit: true, - persistent: props.persistent, - noEscDismiss: props.noEscDismiss, - noRouteDismiss: props.noRouteDismiss, - autoClose: props.autoClose, - noFocus: props.noFocus, - noRefocus: props.noRefocus, - anchor: props.menuAnchor, - self: props.menuSelf, - offset: props.menuOffset, - separateClosePopup: true, - transitionShow: props.transitionShow, - transitionHide: props.transitionHide, - transitionDuration: props.transitionDuration, - onBeforeShow, - onShow, - onBeforeHide, - onHide - }, slots.default) + dropdownMenu ) if (props.split === false) { @@ -244,7 +252,10 @@ export default createComponent({ size: props.size, padding: props.padding, ripple: props.ripple - }, () => Arrow) + }, { + default: () => hSlot(slots[ 'arrow-container' ], [ + icon ]).concat(getSplitButtonMenu(dropdownMenu)) + }) ]) } } diff --git a/ui/src/components/btn-dropdown/QBtnDropdown.json b/ui/src/components/btn-dropdown/QBtnDropdown.json index b9be32d0376..7b1eb0cdfab 100644 --- a/ui/src/components/btn-dropdown/QBtnDropdown.json +++ b/ui/src/components/btn-dropdown/QBtnDropdown.json @@ -158,6 +158,10 @@ "loading": { "desc": "Override the default QSpinner when in 'loading' state", "addedIn": "v2.8" + }, + + "arrow-container": { + "desc": "Customize arrow container button's content when using 'split' prop" } },