Working md-menu example

[treeder]

When I use the example directly from the code, the menu doesn't show up, anyone have a working example they can share?

[Aworldc]

Oof. The example is quite vauge and I couldn't understand it either. I hope someone makes documentation for it. Soon.

[treeder]

I added all the createRef() stuff from the Lit docs so that example can work and it seems to be doing something with no error, even the "show" attribute shows up in the dev console on md-menu, but I can't see it.

[e111077]

Heya, sorry that's a bit vague – it's a balance to keep JSdoc concise for such a complex component. We obviously failed here 🤪

We are currently working on our demo / docs site, which should have more complete documentation with the Lit accoutrements that are littered in the JSdoc without explanation.

Here is a working example. There were a few regressions in the latest release that are fixed in the pre.7 release

https://lit.dev/playground/#gist=28fb863d2b2c3387f69b0cf2205a57b2

[treeder]

Thanks for the example @e111077 ! Will wait for pre.7 before trying again though.

[e111077]

Definitely follow #4141 to get notified

[Aworldc]

We are currently working on our demo / docs site, which should have more complete documentation with the Lit accoutrements that are littered in the JSdoc without explanation.

Woohoo! this is great news!

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

[treeder]

Anyone have a non typescript example for md-menu? Got back to trying it again and still can't get this thing to work (just doesn't show up).

[e111077]

@treeder here is a JS approach

https://lit.dev/playground/#gist=c558a9e054344de9495c007a9a6747a2

[e111077]

Heads up, the docs for md-menu are on this sprint for me

[Aworldc]

woohoo! 🎉🎉🎉

[treeder]

Thank you! 🙏

So finally got it working, but found a strange issue, not sure if there's a setting that fixes this or not (I'll make a new issue if not), but if menu is in top right, it opens fine on desktop, moves left to stay on the page:

But on mobile view, it goes off the side:

[e111077]

Odd, it should try to stay in bounds. Have you tried setting menu-corner="START_END"?

[treeder]

That did actually work to make it visible on mobile:

But it's not the positioning I'd prefer. I'm assuming this is a bug then for the default positioning?

[e111077]

You might also want to set anchor-corner="END_END"

the default is a default for a button menu. For this you should be customizing the corners

[asyncLiz]

Closing since we have menu doc planning tracked internally, it should pop up soon!