Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add example patterns for modal and toast #575

Merged
merged 2 commits into from
Jul 4, 2024
Merged

Conversation

richard-to
Copy link
Collaborator

@richard-to richard-to commented Jul 4, 2024

This change includes two example components for modals and toasts. These are two common UI widgets that Mesop does not currently have.

Unfortunately the Angular Components for Dialog and Snackbar is not easy to add to Mesop. This is because these two components takes in a Component or Template. So it does not seem possible to use projection into ng-content (like we do with badge or button).

The good news is that those two components aren't that complicated and it is relatively easy to create similar implementations using pure Mesop.

Ref: #338
Ref: #320
Ref: #278

Example modal

Screenshot 2024-07-03 at 6 37 57 PM

Example toast

Screenshot 2024-07-03 at 6 37 50 PM

Copy link
Collaborator

@wwwillchen wwwillchen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great! Sorry, for the nitpicky comments :)

I think these kinds of patterns are very helpful

demo/modal.py Outdated Show resolved Hide resolved
demo/modal.py Outdated Show resolved Hide resolved
demo/modal.py Outdated
style=me.Style(
align_items="center",
display="grid",
height="100vh",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a little surprised this is 100vh and the parent box is 100%, I would have expected the opposite

demo/toast.py Outdated Show resolved Hide resolved
demo/toast.py Outdated Show resolved Hide resolved
@richard-to richard-to merged commit 63de266 into google:main Jul 4, 2024
3 checks passed
@richard-to richard-to deleted the modal branch July 13, 2024 17:00
This was referenced Jul 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants