Form / Button
Use buttons to enable a user to commit a change or complete steps in a task.
from h2o_wave import main, app, Q, ui
@app('/demo')
async def serve(q: Q):
if 'basic_button' in q.args:
q.page['example'].items = [
ui.text(f'basic_button={q.args.basic_button}'),
ui.text(f'primary_button={q.args.primary_button}'),
ui.text(f'link_button={q.args.link_button}'),
ui.text(f'basic_disabled_button={q.args.basic_disabled_button}'),
ui.text(f'primary_disabled_button={q.args.primary_disabled_button}'),
ui.text(f'link_disabled_button={q.args.link_disabled_button}'),
ui.text(f'basic_caption_button={q.args.basic_caption_button}'),
ui.text(f'primary_caption_button={q.args.primary_caption_button}'),
ui.text(f'basic_caption_disabled_button={q.args.basic_caption_disabled_button}'),
ui.text(f'primary_caption_disabled_button={q.args.primary_caption_disabled_button}'),
ui.text(f'button_with_icon={q.args.button_with_icon}'),
ui.text(f'icon_button={q.args.icon_button}'),
ui.text(f'external_path_button={q.args.external_path_button}'),
ui.text(f'command_button={q.args.command_button}'),
ui.text(f'command_button:first_command={q.args.first_command}'),
ui.text(f'command_button:second_command={q.args.second_command}'),
ui.button(name='show_form', label='Back', primary=True),
]
else:
q.page['example'] = ui.form_card(box='1 1 4 10', items=[
ui.button(name='basic_button', label='Basic'),
ui.button(name='primary_button', label='Primary', primary=True),
ui.button(name='link_button', label='Link', link=True),
ui.button(name='basic_disabled_button', label='Basic (Disabled)', disabled=True),
ui.button(name='primary_disabled_button', label='Primary (Disabled)', primary=True, disabled=True),
ui.button(name='link_disabled_button', label='Link (Disabled)', link=True, disabled=True),
ui.button(name='basic_caption_button', label='Basic', caption='Caption Button.'),
ui.button(name='primary_caption_button', label='Primary', caption='Caption Button', primary=True),
ui.button(name='basic_caption_disabled_button', label='Basic (Disabled)', caption='Caption Button',
disabled=True),
ui.button(name='primary_caption_disabled_button', label='Primary (Disabled)', caption='Caption Button',
primary=True, disabled=True),
ui.button(name='button_with_icon', label='Button with an icon', icon='Search'),
ui.button(name='icon_button', icon='Heart', caption='Tooltip text'),
ui.button(name='external_path_button', label='External', path='https://h2o.ai/'),
ui.button(name='command_button', label='Button with commands', primary=True, commands=[
ui.command(name='first_command', label='First command'),
ui.command(name='second_command', label='Second command'),
]
),
])
await q.page.save()