Replies: 2 comments 3 replies
-
|
@e111077 may have some insights here. I'm curious though, can you not separate the menu template from the button in Vue? For example, in Lit it could look like html`
<div style="position: relative">
<md-filled-button id="anchor">Anchor</md-filled-button>
${getMenuFor('anchor')}
</div>
` |
Beta Was this translation helpful? Give feedback.
-
|
I'm not familiar with Lit so I don't know what the exact semantics are of the snippet you posted. I can obviously put the menu in another component but that results in a proliferation of names and files as opposed to having it just a few lines down in the template. There's also a question about how many components get instantiated when (think 1000 line table with an actions menu button). |
Beta Was this translation helpful? Give feedback.
-
|
Ah I understand, so it's about sharing a single instance of a menu between multiple anchors? |
Beta Was this translation helpful? Give feedback.
-
|
Yes |
Beta Was this translation helpful? Give feedback.
-
|
small note, try positioning="popover" which should work for most cases. Our API docs bot is broken so the API docs are a bit out of date on menu The problemsThere are several reasons as to why positioning is so restrictive – there's just no one-size-fits-all solution as of Jan 2024.
We don't know your appWe want menu to render above all other elements on the page. Standard practice here has been to detach the menu from the page and render it at the end of the document. Then one would typically listen for scrolling and reposition the element based on the scroll. The problem is that we do not know if it is safe to remove the element from the page and we do not know if it is safe to render the element at the end of If we could safely assume this, then we know what element to listen to for scrolls (body) since scroll events don't bubble and thus we can do repositioning on scrolling. Keeping the DOM treeWe don't want to move elements out of the DOM tree, because then you lose the powers of the DOM tree such as event propagation and style application. We use events heavily in menus with submenus and people often style their components with CSS custom properties which cascade down the tree. This would almost immediately cause problems with our PerformanceEven if we were able to hoist the element to the bottom of the page and do repositioning-on-scroll, the actual reposition calculation is expensive and requires at least 2 RAFs which is incredibly slow and becomes unscalable when scrolling with multiple submenus. With position absolute, position fixed, and position document (which is just absolute calculated from the document rather than from the anchor) we either leave the hard calculations to the browser engine or just ignore them in the case of positioning fixed. The solutions / futureWe have a plan for this current solutionOffer users a lot of customizability to select their preferred rendering mode to fit their situation. e.g. sometimes future solutionwe have lately been experimenting with Because of performance, we still do not offer repositioning, but we hope to eventually make |
Beta Was this translation helpful? Give feedback.
-
Why does the menu have to be positioned in the same position:relative div as the anchor without anything else? I understand the need for a common parent but this seems more restrictive than needed. Below is a link to a repro, it shows a first menu button that is in a div that has some text before the button causing the menu positioning to fail. The second menu is in a div just with the button but the div has some padding causing the positioning to fail also.
The main use-case I have is to reuse a menu (without using the positioning=document which doesn't scroll) and just keeping templates cleaner by separating the menu content from the place it's invoked.
Clicking the first menu button:
https://play.vuejs.org/#eNqtVlFv2jAQ/iteNKmtVIiAaQ80Q7RVpW1St2mbtJe8hPggbh3bsh1gQ/z3nR0SEgZrkPpC4rvvPn93Z1/YBLdK9ZcFBOMgspArnliYxCKibEmM/c3hQxwoaZhlUoyJBvSzJcQBYgiJssFksyG5WZDtNgpx5a1q8hE4l2QlNadvolCV5pz25oxzoL1ZYa0UhFEkz0EUd34dB2SacpY+o1UqEI/owY0cIAoPg2tK50Zd8x0VkiQizaQ+oPb4fUSPYbKTMksuLYIzSChnwqXmfGQQheid+J33EeeyDF+FZXSSpTa5nnnQi727ISqhlIlFz0o1HkF+Q2ZSU9BjMlBrYiRntOrvSy0bHusZGs9smqM50jVHdG6pbl+l4HevwnJ/XtvCxv3DpUk1UxbfWa6ktmRDKMyR/V7iWoCwZEvmWubkAq/vRQ27mOZIoVnCwxXMwrLwYasN/SdzEu9E+Z9OIJ9RiYwFrD0WVSYF98+m2suNS5wmNrm8Iv6d4AmwhRbVirhBMiZx8Ljbi/yCGbFgbBxckxKzdY/ttfvNwWaSmnEVXh2/S6j5CbEZM/23eNJM3ydlMrm6vNpxeZp94PB/kcMjoShmi4Yo3LUquA7KevXyRGFVpMCp6gnjncPEQa03DjjDzFzCmbXKjMMwpa43FDhb6r4AGwqVh4iajkImKKzRiaVohIed4xtx7V52YGgFTActLieCyzTh7A+e+5epmngnrVct2rl5nIYkdROrBxywB12KdTQOJR+aOuzWqTIntmt3qWZsvHsBXXpXs777J7y1R2Zz3pHRQfFIVK/HuToerYqswWANZ7MO0R43HZbPPpj3/dwpqW4W3iZrUinmbHFwl1KcKYyD/qrcl619pxL847H67G1WF1CLSjNIn4/Yn8y6lPpNgwHt/trsE0n0Anan7uHHF1i7QVQ5c0kLvjvyJ5zfAT+mhdNYwu4KQVF2A+fVfvKjAT/IP83D2oIwVVJO6H7exQHOeTdOT6W+lzvqj+oqbv8CGS5YPg==
Update: using "positioning=document" doesn't work well either, try it on the second menu button in the repro: the menu shows up way down the page.
Beta Was this translation helpful? Give feedback.
All reactions