Routing / Tabs

This example demonstrates how you can observe and handle changes to the browser's location hash.

The location hash can be accessed using q.args['#'].

from h2o_wave import main, app, Q, ui
async def serve(q: Q):
content = 'Welcome to our store!'
location = q.args['#']
if location:
if location == 'menu/spam':
content = "Sorry, we're out of spam!"
elif location == 'menu/ham':
content = "Sorry, we're out of ham!"
elif location == 'menu/eggs':
content = "Sorry, we're out of eggs!"
elif location == 'about':
content = 'Everything here is gluten-free!'
if not q.client.initialized:['nav'] = ui.tab_card(
box='1 1 4 1',
items=['#menu/spam', label='Spam'),'#menu/ham', label='Ham'),'#menu/eggs', label='Eggs'),'#about', label='About'),
value=f'#{location}' if location else None,
)['blurb'] = ui.markdown_card(
box='1 2 4 2',
q.client.initialized = True
elif location:
blurb =['blurb']
blurb.content = content

Tags: โ€‚routing โ€‚tabs