Spaces:
Running
Running
File size: 2,484 Bytes
f3d45a9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
from typing import Callable, Literal
import mesop as me
@me.component
def snackbar(
*,
is_visible: bool,
label: str,
action_label: str | None = None,
on_click_action: Callable | None = None,
horizontal_position: Literal["start", "center", "end"] = "center",
vertical_position: Literal["start", "center", "end"] = "end",
):
"""Creates a snackbar.
By default the snackbar is rendered at bottom center.
The on_click_action should typically close the snackbar as part of its actions. If no
click event is included, you'll need to manually hide the snackbar.
Note that there is one issue with this snackbar example. No actions are possible until
the snackbar is dismissed or closed. This is due to the fixed box that gets created when
the snackbar is visible.
Args:
is_visible: Whether the snackbar is currently visible or not.
label: Message for the snackbar
action_label: Optional message for the action of the snackbar
on_click_action: Optional click event when action is triggered.
horizontal_position: Horizontal position of the snackbar
vertical_position: Vertical position of the snackbar
"""
with me.box(
style=me.Style(
display="block" if is_visible else "none",
height="100%",
overflow_x="auto",
overflow_y="auto",
pointer_events="none",
position="fixed",
width="100%",
z_index=1000,
)
):
with me.box(
style=me.Style(
align_items=vertical_position,
display="flex",
height="100%",
justify_content=horizontal_position,
)
):
with me.box(
style=me.Style(
align_items="center",
background=me.theme_var("on-surface-variant"),
border_radius=5,
box_shadow=("0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"),
display="flex",
font_size=14,
justify_content="space-between",
margin=me.Margin.all(10),
padding=me.Padding(top=5, bottom=5, right=5, left=15)
if action_label
else me.Padding.all(15),
pointer_events="auto",
min_width=300,
max_width=500,
)
):
me.text(label, style=me.Style(color=me.theme_var("surface-container-lowest")))
if action_label:
me.button(
action_label,
on_click=on_click_action,
style=me.Style(color=me.theme_var("primary-container")),
)
|