async def serve(q: Q):
global count
if 'increment' in q.args:
count += 1
items = pack([ui.button(name='increment', label=f'Count={count}')])
if count > 0:
form = q.page['example']
form.items = items
else:
q.page['example'] = ui.form_card(box='1 1 12 10', items=items)
await q.page.save()
async def serve(q: Q):
q.page['example'] = ui.form_card(box='1 1 4 10', items=[
ui.text_xl(content='Extra-large text, for headings.'),
ui.text_l(content='Large text, for sub-headings.'),
ui.text_m(content='Body text, for paragraphs and other content.'),
ui.text_s(content='Small text, for small print.'),
ui.text_xs(content='Extra-small text, for really small print.'),
ui.separator(label='A separator sections forms'),
ui.progress(label='A progress bar'),
ui.progress(label='A progress bar'),
ui.message_bar(type='success', text='Message bar'),
ui.textbox(name='textbox', label='Textbox'),
ui.label(label='Checkboxes'),
ui.checkbox(name='checkbox1', label='A checkbox'),
ui.checkbox(name='checkbox1', label='Another checkbox'),
ui.checkbox(name='checkbox1', label='Yet another checkbox'),
ui.toggle(name='toggle', label='Toggle'),
ui.choice_group(name='choice_group', label='Choice group', choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.checklist(name='checklist', label='Checklist', choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.dropdown(name='dropdown', label='Dropdown', choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.dropdown(name='dropdown', label='Multi-valued Dropdown', values=[], choices=[
ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']
]),
ui.combobox(name='combobox', label='Combobox', choices=['Choice 1', 'Choice 2', 'Choice 3']),
ui.slider(name='slider', label='Slider'),
ui.range_slider(name='range_slider', label='Range slider', max=99),
ui.spinbox(name='spinbox', label='Spinbox'),
ui.date_picker(name='date_picker', label='Date picker'),
ui.color_picker(name='color_picker', label='Color picker'),
ui.buttons([
ui.button(name='primary_button', label='Primary', primary=True),
ui.button(name='standard_button', label='Standard'),
ui.button(name='standard_disabled_button', label='Standard', disabled=True),
]),
ui.file_upload(name='file_upload', label='File upload'),
ui.table(name='table', columns=[
ui.table_column(name='col1', label='Column 1'),
ui.table_column(name='col2', label='Column 2'),
], rows=[
ui.table_row(name='row1', cells=['Text A', 'Text B']),
ui.table_row(name='row2', cells=['Text C', 'Text D']),
ui.table_row(name='row3', cells=['Text E', 'Text F']),
]),
ui.link(label='Link'),
ui.tabs(name='tabs', items=[
ui.tab(name='email', label='Mail', icon='Mail'),
ui.tab(name='events', label='Events', icon='Calendar'),
ui.tab(name='spam', label='Spam'),
]),
ui.expander(name='expander', label='Expander'),
ui.frame(path='https://example.com'),
ui.markup(content=html),
ui.template(
content=menu,
data=pack(dict(dishes=[
dict(name='Spam', price='$2.00'),
dict(name='Ham', price='$3.45'),
dict(name='Eggs', price='$1.75'),
]))
),
ui.picker(name='picker', label='Picker', choices=[
ui.choice('choice1', label='Choice 1'),
ui.choice('choice2', label='Choice 2'),
ui.choice('choice3', label='Choice 3'),
]),
ui.stepper(name='stepper', items=[
ui.step(label='Step 1', icon='MailLowImportance'),
ui.step(label='Step 2', icon='TaskManagerMirrored'),
ui.step(label='Step 3', icon='Cafe'),
]),
ui.visualization(
plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),
data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),
),
ui.vega_visualization(
specification=spec,
data=data(fields=["a", "b"], rows=[
["A", rnd()], ["B", rnd()], ["C", rnd()],
["D", rnd()], ["E", rnd()], ["F", rnd()],
["G", rnd()], ["H", rnd()], ["I", rnd()]
], pack=True),
),
ui.button(name='show_inputs', label='Submit', primary=True),
])
await q.page.save()
# ---
import random
from faker import Faker
from h2o_wave import site, ui, pack, data
fake = Faker()
page = site['/demo']
c = page.add(
'example',
ui.flex_card(
box='1 1 1 1',
direction='horizontal',
justify='between',
wrap='between',
item_view='template',
item_props=pack(
dict(
content=
'<div style="width:15px; height:15px; border-radius: 50%; background-color:{{#if loss}}red{{else}}green{{/if}}" title="{{code}}"/>' # noqa: E501
)),
data=data('code loss', -10),
))
c.data = [[fake.cryptocurrency_code(),
random.randint(0, 1)] for _ in range(10)]
page.save()
from faker import Faker
from h2o_wave import site, ui, pack, data
fake = Faker()
page = site['/demo']
c = page.add(
'example',
ui.list_card(
box='1 1 2 4',
item_view='list_item1',
item_props=pack(
dict(title='=code',
caption='=currency',
value='=trades',
aux_value='=returns')),
title='Exchange Rates',
data=data('currency code trades returns', -15),
))
c.data = [[
fake.cryptocurrency_name(),
fake.cryptocurrency_code(),
random.randint(100, 1000),
random.randint(10, 100)
] for _ in range(15)]
page.save()
# Template
# Use a #template card to render dynamic content using a #HTML template.
# ---
from h2o_wave import site, pack, ui
page = site['/demo']
page.drop()
menu = '''
<ol>
{{#each dishes}}
<li><strong>{{name}}</strong> costs {{price}}</li>
{{/each}}
</ol
'''
c = page.add(
'template_example',
ui.template_card(
box='1 1 2 2',
title='Menu',
content=menu,
data=pack(
dict(dishes=[
dict(name='Spam', price='$2.00'),
dict(name='Ham', price='$3.45'),
dict(name='Eggs', price='$1.75'),
])),
))
page.save()
from h2o_wave import site, ui, pack, data
fake = Faker()
page = site['/demo']
c = page.add(
'example',
ui.grid_card(
box='1 1 3 4',
title='Currency Trades',
cells=pack([
dict(title='Currency', value='=currency'),
dict(title='Trades',
view='list_item1',
props=dict(title='=code',
caption='1 hour ago',
value='=trades',
aux_value='=returns')),
]),
data=data('currency code trades returns', -15),
))
c.data = [[
fake.cryptocurrency_name(),
fake.cryptocurrency_code(),
random.randint(100, 1000),
random.randint(10, 100)
] for _ in range(15)]
page.save()
