Spaces:
Running
Running
File size: 1,755 Bytes
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 |
from components.helpers import merge_styles
import mesop as me
@me.content_component
def header(
*,
style: me.Style | None = None,
is_mobile: bool = False,
max_width: int | None = 1000,
):
"""Creates a simple header component.
Args:
style: Override the default styles, such as background color, etc.
is_mobile: Use mobile layout. Arranges each section vertically.
max_width: Sets the maximum width of the header. Use None for fluid header.
"""
default_flex_style = _DEFAULT_MOBILE_FLEX_STYLE if is_mobile else _DEFAULT_FLEX_STYLE
if max_width and me.viewport_size().width >= max_width:
default_flex_style = merge_styles(
default_flex_style,
me.Style(width=max_width, margin=me.Margin.symmetric(horizontal="auto")),
)
# The style override is a bit hacky here since we apply the override styles to both
# boxes here which could cause problems depending on what styles are added.
with me.box(style=merge_styles(_DEFAULT_STYLE, style)):
with me.box(style=merge_styles(default_flex_style, style)):
me.slot()
@me.content_component
def header_section():
"""Adds a section to the header."""
with me.box(style=me.Style(display="flex", gap=5)):
me.slot()
_DEFAULT_STYLE = me.Style(
background=me.theme_var("surface-container"),
border=me.Border.symmetric(
vertical=me.BorderSide(
width=1,
style="solid",
color=me.theme_var("outline-variant"),
)
),
padding=me.Padding.all(10),
)
_DEFAULT_FLEX_STYLE = me.Style(
align_items="center",
display="flex",
gap=5,
justify_content="space-between",
)
_DEFAULT_MOBILE_FLEX_STYLE = me.Style(
align_items="center",
display="flex",
flex_direction="column",
gap=12,
justify_content="center",
)
|