def Gallery(): return html.section( html.h1("Photo Gallery"), Photo("Landscape", image_id=830), Photo("City", image_id=274), Photo("Puppy", image_id=237), )
def App(): is_sent, set_is_sent = use_state(False) message, set_message = use_state("") if is_sent: return html.div( html.h1("Message sent!"), html.button( {"onClick": lambda event: set_is_sent(False)}, "Send new message?" ), ) @event(prevent_default=True) def handle_submit(event): set_message("") set_is_sent(True) return html.form( {"onSubmit": handle_submit, "style": {"display": "inline-grid"}}, html.textarea( { "placeholder": "Your message here...", "value": message, "onChange": lambda event: set_message(event["target"]["value"]), } ), html.button({"type": "submit"}, "Send"), )
def Gallery(): return html.section( html.h1("Famous Musicians"), Photo(), Photo(), Photo(), )
def ArtistList(): artist_to_add, set_artist_to_add = use_state("") artists, set_artists = use_state( ["Marta Colvin Andrade", "Lamidi Olonade Fakeye", "Louise Nevelson"]) def handle_change(event): set_artist_to_add(event["target"]["value"]) def handle_add_click(event): if artist_to_add not in artists: set_artists([*artists, artist_to_add]) set_artist_to_add("") def make_handle_delete_click(index): def handle_click(event): set_artists(artists[:index] + artists[index + 1:]) return handle_click return html.div( html.h1("Inspiring sculptors:"), html.input({ "value": artist_to_add, "onChange": handle_change }), html.button({"onClick": handle_add_click}, "add"), html.ul([ html.li( name, html.button({"onClick": make_handle_delete_click(index)}, "delete"), key=name, ) for index, name in enumerate(artists) ]), )
def TodoList(): return html.section( html.h1("My Todo List"), html.ul( Item("Find a cool problem to solve", done=True), Item("Build an app to solve it", done=True), Item("Share that app with the world!", done=False), ), )
def Counter(): number, set_number = use_state(0) def handle_click(event): set_number(number + 5) print(number) return html.div( html.h1(number), html.button({"onClick": handle_click}, "Increment"), )
def Counter(): number, set_number = use_state(0) async def handle_click(event): await asyncio.sleep(3) set_number(lambda old_number: old_number + 1) return html.div( html.h1(number), html.button({"onClick": handle_click}, "Increment"), )
def Counter(): number, set_number = use_state(0) async def handle_click(event): set_number(number + 5) print("about to print...") await asyncio.sleep(3) print(number) return html.div( html.h1(number), html.button({"onClick": handle_click}, "Increment"), )
def TodoList(): tasks = [ "Make breakfast (important)", "Feed the dog (important)", "Do laundry", "Go on a run (important)", "Clean the house", "Go to the grocery store", "Do some coding", "Read a book (important)", ] return html.section( html.h1("My Todo List"), DataList(tasks), )
def TodoList(): tasks = [ {"id": 0, "text": "Make breakfast", "priority": 0}, {"id": 1, "text": "Feed the dog", "priority": 0}, {"id": 2, "text": "Do laundry", "priority": 2}, {"id": 3, "text": "Go on a run", "priority": 1}, {"id": 4, "text": "Clean the house", "priority": 2}, {"id": 5, "text": "Go to the grocery store", "priority": 2}, {"id": 6, "text": "Do some coding", "priority": 1}, {"id": 7, "text": "Read a book", "priority": 1}, ] return html.section( html.h1("My Todo List"), DataList(tasks, filter_by_priority=1, sort_by_priority=True), )
def ArtistList(): artists, set_artists = use_state( ["Marta Colvin Andrade", "Lamidi Olonade Fakeye", "Louise Nevelson"]) def handle_sort_click(event): set_artists(list(sorted(artists))) def handle_reverse_click(event): set_artists(list(reversed(artists))) return html.div( html.h1("Inspiring sculptors:"), html.button({"onClick": handle_sort_click}, "sort"), html.button({"onClick": handle_reverse_click}, "reverse"), html.ul([html.li(name, key=name) for name in artists]), )
def ArtistList(): artist_to_add, set_artist_to_add = use_state("") artists, set_artists = use_state([]) def handle_change(event): set_artist_to_add(event["target"]["value"]) def handle_click(event): if artist_to_add and artist_to_add not in artists: set_artists([*artists, artist_to_add]) set_artist_to_add("") return html.div( html.h1("Inspiring sculptors:"), html.input({ "value": artist_to_add, "onChange": handle_change }), html.button({"onClick": handle_click}, "add"), html.ul([html.li(name, key=name) for name in artists]), )
def MyTodoList(): return html.div( html.h1("My Todo List"), html.img({"src": "https://picsum.photos/id/0/500/300"}), html.ul(html.li("The first thing I need to do is...")), )
def HelloWorld(): return html.h1("Hello, world!")
def App(): return html.h1("Hello, world!")