I have a menu that consists of Items and sub-menus. the texts and titles of items should be shown from right to left. I achieved this by using LayoutMirroring.enabled = true
.
Menu {
id: right_menu
property var rtl: true;
MenuItem {
text: "گزینه ۱"
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
}
Menu {
title: "تنظیمات"
MenuItem {
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
text: "گزینه ۱"
}
MenuItem {
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
text: "گزینه ۱"
}
}
delegate: MenuItem {
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
}
}
This is the output:
However, this is not a valid output and I want to force the Menu to open subMenu on the right-hand side instead of left. this is the output I'm looking for:
How can I achieve this?
You can use the overlap
property to shift the submenu over to the position you want.
Note that if the position of the menu is too close to the left or right edge of the window, it will still open on the opposite side.
Menu {
id: right_menu
property var rtl: true;
MenuItem {
text: "گزینه ۱"
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
}
Menu {
title: "تنظیمات"
overlap: width * 2 // <<-- Shift the submenu over
MenuItem {
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
text: "گزینه ۱"
}
MenuItem {
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
text: "گزینه ۱"
}
}
delegate: MenuItem {
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
}
}