Spaces:
Running
Running
File size: 1,989 Bytes
18f7b1e 2b894e4 18f7b1e 2b894e4 18f7b1e |
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 |
from components.helpers import merge_styles
from typing import Callable
import mesop as me
@me.content_component
def card(*, title: str = "", style: me.Style | None = None, key: str = ""):
"""Creates a simple card component similar to Angular Component.
Args:
title: If empty, not title will be shown
style: Override the default styles of the card box
key: Not really useful here
"""
with me.box(key=key, style=merge_styles(_DEFAULT_CARD_STYLE, style)):
if title:
me.text(
title,
style=me.Style(font_size=16, font_weight="bold", margin=me.Margin(bottom=15)),
)
me.slot()
@me.content_component
def expanable_card(
*,
title: str = "",
expanded: bool = False,
on_click_header: Callable | None = None,
style: me.Style | None = None,
key: str = "",
):
"""Creates a simple card component that is expandable.
Args:
title: If empty, no title will be shown but the expander will still be shown
expanded: Whether the card is expanded or not
on_click_header: Click handler for expanding card
style: Override the default styles of the card box
key: Key for the component
"""
with me.box(key=key, style=merge_styles(_DEFAULT_CARD_STYLE, style)):
with me.box(
on_click=on_click_header,
style=me.Style(
align_items="center",
display="flex",
justify_content="space-between",
),
):
me.text(
title,
style=me.Style(font_size=16, font_weight="bold"),
)
me.icon("keyboard_arrow_up" if expanded else "keyboard_arrow_down")
with me.box(style=me.Style(margin=me.Margin(top=15), display="block" if expanded else "none")):
me.slot()
_DEFAULT_CARD_STYLE = me.Style(
background=me.theme_var("surface-container-lowest"),
border_radius=10,
border=me.Border.all(
me.BorderSide(width=1, color=me.theme_var("outline-variant"), style="solid")
),
padding=me.Padding.all(15),
margin=me.Margin(bottom=15),
)
|