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))