def Gallery():
index, set_index = hooks.use_state(0)
def handle_click(event):
set_index(index + 1)
bounded_index = index % len(sculpture_data)
sculpture = sculpture_data[bounded_index]
alt = sculpture["alt"]
artist = sculpture["artist"]
description = sculpture["description"]
name = sculpture["name"]
url = sculpture["url"]
return html.div(
html.button({"onClick": handle_click}, "Next"),
html.h2(name, " by ", artist),
html.p(f"({bounded_index + 1} of {len(sculpture_data)})"),
html.img({
"src": url,
"alt": alt,
"style": {
"height": "200px"
}
}),
html.p(description),
)
def DivInDiv():
stop_propagatation, set_stop_propagatation = hooks.use_state(True)
inner_count, set_inner_count = hooks.use_state(0)
outer_count, set_outer_count = hooks.use_state(0)
div_in_div = html.div(
{
"onClick": lambda event: set_outer_count(outer_count + 1),
"style": {
"height": "100px",
"width": "100px",
"backgroundColor": "red"
},
},
html.div(
{
"onClick":
event(
lambda event: set_inner_count(inner_count + 1),
stop_propagation=stop_propagatation,
),
"style": {
"height": "50px",
"width": "50px",
"backgroundColor": "blue"
},
}, ),
)
return html.div(
html.button(
{
"onClick":
lambda event: set_stop_propagatation(not stop_propagatation)
},
"Toggle Propogation",
),
html.pre(f"Will propagate: {not stop_propagatation}"),
html.pre(f"Inner click count: {inner_count}"),
html.pre(f"Outer click count: {outer_count}"),
div_in_div,
)
def Gallery():
index, set_index = hooks.use_state(0)
show_more, set_show_more = hooks.use_state(False)
def handle_next_click(event):
set_index(index + 1)
def handle_more_click(event):
set_show_more(not show_more)
bounded_index = index % len(sculpture_data)
sculpture = sculpture_data[bounded_index]
alt = sculpture["alt"]
artist = sculpture["artist"]
description = sculpture["description"]
name = sculpture["name"]
url = sculpture["url"]
return html.div(
html.button({"onClick": handle_next_click}, "Next"),
html.h2(name, " by ", artist),
html.p(f"({bounded_index + 1} or {len(sculpture_data)})"),
html.img({
"src": url,
"alt": alt,
"style": {
"height": "200px"
}
}),
html.div(
html.button(
{"onClick": handle_more_click},
f"{'Show' if show_more else 'Hide'} details",
),
(html.p(description) if show_more else ""),
),
)
def SyncedInputs():
value, set_value = hooks.use_state("")
return html.p(
Input("First input", value, set_value),
Input("Second input", value, set_value),
)
def FilterableList():
value, set_value = hooks.use_state("")
return html.p(Search(value, set_value), html.hr(), Table(value, set_value))