Create patterns examples

[wwwillchen]

This is a good issue for anyone who wants to contribute to Mesop as there's many different patterns we could add to the demo gallery!

I'm basically calling "pattern" a multi-component examples which demonstrates a common use case.

Ideas:

• Submitting feedback (thumbs up / thumbs down + reasons)
• SxS output rating
• Nav menu
• Header (text)
• Card
• Tile
• Grid tile
• Carousel

[richard-to]

Also things like Modal, Accordion, Tab, and Toasts could be useful (until we have the Angular Component equivalents created - Dialog, Tab, Snackbar, etc)

[pranshu-raj-211]

@iiakshat The issue is in the buttons for feedback
on_click is assigned the lambda function for the func call on_feedback(value), adding a variable made it work for me.

Use this in on_click - on_click=lambda _: on_feedback(True)

[richard-to]

Looks like you resolved your error. When I ran the colab, it seemed ran for me.

---

One thing to note is that Mesop event handler functions have a non-intuitive behavior if you try to reuse the same function. You should read: https://google.github.io/mesop/guides/interactivity/#avoid-using-closure-variables-in-event-handler

[srivats22]

Can anyone contribute to this and add those components??

If so I would also like to have a go at it...

[richard-to]

@srivats22, yes, you're right free to contribute any patterns you'd feel would be helpful.

[srivats22]

Nice, let me clone the repo and see what I can work on... and will try and get it done