Spaces:
Running
Running
File size: 7,035 Bytes
45df88a |
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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 |
from dataclasses import field
import mesop as me
@me.stateclass
class State:
normal_accordion: dict[str, bool] = field(
default_factory=lambda: {"pie": True, "donut": False, "icecream": False}
)
multi_accordion: dict[str, bool] = field(
default_factory=lambda: {"pie": False, "donut": False, "icecream": False}
)
def load(e: me.LoadEvent):
me.set_theme_mode("system")
@me.page(
on_load=load,
security_policy=me.SecurityPolicy(
allowed_iframe_parents=["https://google.github.io", "https://huggingface.co"]
),
path="/expansion_panel",
)
def app():
state = me.state(State)
with me.box(
style=me.Style(
display="flex",
flex_direction="column",
gap=15,
margin=me.Margin.all(15),
max_width=500,
)
):
me.text("Normal Accordion", type="headline-5")
with me.accordion():
with me.expansion_panel(
key="pie",
title="Pie",
description="Type of snack",
icon="pie_chart",
disabled=False,
expanded=state.normal_accordion["pie"],
hide_toggle=False,
on_toggle=on_accordion_toggle,
):
me.text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
)
with me.expansion_panel(
key="donut",
title="Donut",
description="Type of breakfast",
icon="donut_large",
disabled=False,
expanded=state.normal_accordion["donut"],
hide_toggle=False,
on_toggle=on_accordion_toggle,
):
me.text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
)
with me.expansion_panel(
key="icecream",
title="Ice cream",
description="Type of dessert",
icon="icecream",
disabled=False,
expanded=state.normal_accordion["icecream"],
hide_toggle=False,
on_toggle=on_accordion_toggle,
):
me.text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
)
me.text("Multi Accordion", type="headline-5")
with me.box(
style=me.Style(display="flex", gap=20, margin=me.Margin(bottom=15)),
):
me.button(
label="Open All", type="flat", on_click=on_multi_accordion_open_all
)
me.button(
label="Close All", type="flat", on_click=on_multi_accordion_close_all
)
with me.accordion():
with me.expansion_panel(
key="pie",
title="Pie",
description="Type of snack",
icon="pie_chart",
expanded=state.multi_accordion["pie"],
on_toggle=on_multi_accordion_toggle,
):
me.text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
)
with me.expansion_panel(
key="donut",
title="Donut",
description="Type of breakfast",
icon="donut_large",
expanded=state.multi_accordion["donut"],
on_toggle=on_multi_accordion_toggle,
):
me.text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
)
with me.expansion_panel(
key="icecream",
title="Ice cream",
description="Type of dessert",
icon="icecream",
expanded=state.multi_accordion["icecream"],
on_toggle=on_multi_accordion_toggle,
):
me.text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
)
me.text("Expansion Panel", type="headline-5")
with me.expansion_panel(
key="pie",
title="Pie",
description="Type of snack",
icon="pie_chart",
):
me.text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
)
def on_accordion_toggle(e: me.ExpansionPanelToggleEvent):
"""Implements accordion behavior where only one panel can be open at a time"""
state = me.state(State)
state.normal_accordion = {"pie": False, "donut": False, "icecream": False}
state.normal_accordion[e.key] = e.opened
def on_multi_accordion_toggle(e: me.ExpansionPanelToggleEvent):
"""Implements accordion behavior where multiple panels can be open at a time"""
state = me.state(State)
state.multi_accordion[e.key] = e.opened
def on_multi_accordion_open_all(e: me.ClickEvent):
state = me.state(State)
for key in state.multi_accordion:
state.multi_accordion[key] = True
def on_multi_accordion_close_all(e: me.ClickEvent):
state = me.state(State)
for key in state.multi_accordion:
state.multi_accordion[key] = False
|