async def serve(q: Q):
if q.args.facepile:
q.page['example'].items = [
ui.text_m(f'q.args.facepile={q.args.facepile}'),
ui.button(name='back', label='Back', primary=True),
]
elif q.args.facepile_value:
q.page['example'].items = [
ui.text_m(f'q.args.facepile_value={q.args.facepile_value}'),
ui.button(name='back', label='Back', primary=True),
]
else:
image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260'
q.page['example'] = ui.form_card(
box='1 1 2 2',
items=[
ui.text(content='Add button sends true'),
ui.facepile(name='facepile',
max=4,
items=[
ui.persona(title='John Doe', image=image),
ui.persona(title='John Doe', image=image),
ui.persona(title='John Doe'),
ui.persona(title='John Doe', image=image),
ui.persona(title='John Doe', image=image),
]),
ui.text(content='Add button sends set value'),
ui.facepile(name='facepile_value',
value='submitted value',
max=4,
items=[
ui.persona(title='John Doe', image=image),
ui.persona(title='John Doe', image=image),
ui.persona(title='John Doe'),
ui.persona(title='John Doe', image=image),
ui.persona(title='John Doe', image=image),
]),
])
await q.page.save()
# Profile
# Create a profile card to display information about a user.
# ---
from h2o_wave import site, ui
page = site['/demo']
image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260'
page.add(
'example',
ui.profile_card(
box='1 1 3 5',
image=
'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260', # noqa
persona=ui.persona(title='John Doe',
subtitle='Data Scientist',
image=image),
items=[
ui.inline(justify='center',
items=[
ui.mini_buttons([
ui.mini_button(name='upload',
label='Upload',
icon='Upload'),
ui.mini_button(name='share',
label='Share',
icon='Share'),
ui.mini_button(name='download',
label='Download',
icon='Download'),
])
# Postcard
# Create a postcard displaying persona, image, caption and optional buttons.
# ---
from h2o_wave import site, ui
page = site['/demo']
image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260'
page['example'] = ui.postcard_card(
box='1 1 3 5',
persona=ui.persona(title='John Doe',
subtitle='Data Scientist',
image=image,
caption='caption'),
commands=[
ui.command(name='new',
label='New',
icon='Add',
items=[
ui.command(name='email',
label='Email Message',
icon='Mail'),
ui.command(name='calendar',
label='Calendar Event',
icon='Calendar'),
]),
ui.command(name='upload', label='Upload', icon='Upload'),
ui.command(name='share', label='Share', icon='Share'),
ui.command(name='download', label='Download', icon='Download'),
],
items=[
async def serve(q: Q):
if '#' in q.args and not q.args.show_nav:
hash_ = q.args['#']
q.page.drop()
q.page['redirect'] = ui.form_card(box='1 1 2 5',
items=[
ui.text(f'#={hash_}'),
ui.button(name='show_nav',
label='Back',
primary=True),
])
else:
q.page['meta'] = ui.meta_card(box='', redirect='#')
q.page['nav1'] = ui.nav_card(
box='1 1 2 -1',
value='#menu/spam',
title='H2O Wave',
subtitle='And now for something completely different!',
image=
'https://www.h2o.ai/wp-content/themes/h2o2018/templates/dist/images/h2o_logo.svg',
items=[
ui.nav_group('Menu',
items=[
ui.nav_item(name='#menu/spam', label='Spam'),
ui.nav_item(name='#menu/ham', label='Ham'),
ui.nav_item(name='#menu/eggs', label='Eggs'),
ui.nav_item(name='#menu/toast',
label='Toast',
disabled=True),
]),
ui.nav_group('Help',
items=[
ui.nav_item(name='#about',
label='About',
icon='Info'),
ui.nav_item(name='#support',
label='Support',
icon='Help'),
])
],
secondary_items=[
ui.inline(items=[
ui.persona(title='John Doe',
subtitle='Software developer',
size='s',
image=persona),
ui.menu(items=[
ui.command(
name='profile', label='Profile', icon='Contact'),
ui.command(name='preferences',
label='Preferences',
icon='Settings'),
ui.command(
name='logout', label='Logout', icon='SignOut'),
])
]),
],
)
q.page['nav2'] = ui.nav_card(
box='3 1 2 -1',
value='#menu/ham',
persona=ui.persona(title='John Doe',
subtitle='Data Scientist',
caption='Online',
size='xl',
image=persona),
items=[
ui.nav_group('Menu',
items=[
ui.nav_item(name='#menu/spam', label='Spam'),
ui.nav_item(name='#menu/ham', label='Ham'),
ui.nav_item(name='#menu/eggs', label='Eggs'),
ui.nav_item(name='#menu/toast',
label='Toast',
disabled=True),
]),
ui.nav_group('Help',
items=[
ui.nav_item(name='#about',
label='About',
icon='Info'),
ui.nav_item(name='#support',
label='Support',
icon='Help'),
])
],
secondary_items=[
ui.button(name='logout', label='Logout', width='100%')
],
color='primary')
await q.page.save()
async def serve(q: Q):
if not q.client.initialized:
image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260'
f = FakeCategoricalSeries()
q.client.primary = '#000000'
q.client.page = '#e2e2e2'
q.client.card = '#ffffff'
q.client.text = '#000000'
q.page['meta'] = ui.meta_card(
box='',
theme='custom',
layouts=[
ui.layout(breakpoint='xs',
zones=[
ui.zone('header'),
ui.zone('content',
direction=ui.ZoneDirection.ROW,
zones=[
ui.zone('colors', size='340px'),
ui.zone('preview')
]),
ui.zone('footer')
])
])
q.page['header'] = ui.header_card(box='header',
title='Theme generator',
subtitle='Color your app easily',
icon='Color',
icon_color='$card')
q.page['form'] = ui.form_card(box='colors',
items=[
ui.color_picker(
name='primary',
label='Primary',
trigger=True,
alpha=False,
inline=True,
value=q.client.primary),
ui.color_picker(name='text',
label='Text',
trigger=True,
alpha=False,
inline=True,
value=q.client.text),
ui.color_picker(name='card',
label='Card',
trigger=True,
alpha=False,
inline=True,
value=q.client.card),
ui.color_picker(name='page',
label='Page',
trigger=True,
alpha=False,
inline=True,
value=q.client.page),
ui.text_xl('Check contrast'),
get_contrast('text', 'card', q),
get_contrast('card', 'primary', q),
get_contrast('text', 'page', q),
get_contrast('page', 'primary', q),
ui.text_xl('Copy code'),
ui.frame(content=get_theme_code(q),
height='180px'),
])
q.page['sample'] = ui.form_card(
box='preview',
items=[
ui.text_xl(content='Sample App to show colors'),
ui.progress(label='A progress bar'),
ui.inline([
ui.checkbox(name='checkbox1',
label='A checkbox',
value=True),
ui.checkbox(name='checkbox2', label='Another checkbox'),
ui.checkbox(name='checkbox3',
label='Yet another checkbox'),
ui.toggle(name='toggle', label='Toggle', value=True),
]),
ui.inline([
ui.date_picker(name='date_picker', label='Date picker'),
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.combobox(name='combobox',
label='Combobox',
choices=['Choice 1', 'Choice 2', 'Choice 3']),
ui.persona(title='John Doe',
subtitle='Data Scientist',
size='s',
image=image),
]),
ui.slider(name='slider', label='Slider', value=70),
ui.link(label='Link'),
ui.inline(justify='between',
items=[
ui.stepper(name='stepper',
width='500px',
items=[
ui.step(label='Step 1',
icon='MailLowImportance'),
ui.step(
label='Step 2',
icon='TaskManagerMirrored'),
ui.step(label='Step 3',
icon='Cafe'),
]),
ui.tabs(name='menu',
value='email',
items=[
ui.tab(name='email',
label='Mail',
icon='Mail'),
ui.tab(name='events',
label='Events',
icon='Calendar'),
ui.tab(name='spam', label='Spam'),
]),
]),
ui.inline(items=[
ui.table(
name='table',
width='50%',
columns=[
ui.table_column(
name='name', label='Name', min_width='80px'),
ui.table_column(name='surname',
label='Surname',
filterable=True),
ui.table_column(name='age',
label='Age',
sortable=True),
ui.table_column(
name='progress',
label='Progress',
cell_type=ui.progress_table_cell_type(
color='$themePrimary')),
],
rows=[
ui.table_row(name='row1',
cells=['John', 'Doe', '25', '0.90']),
ui.table_row(name='row2',
cells=['Ann', 'Doe', '35', '0.75']),
ui.table_row(
name='row3',
cells=['Casey', 'Smith', '40', '0.33']),
],
height='330px',
),
ui.visualization(
width='50%',
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(20)]],
pack=True),
),
]),
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='Disabled',
disabled=True),
ui.button(name='icon_button',
icon='Heart',
caption='Tooltip text'),
]),
])
q.page['footer'] = ui.footer_card(
box='footer', caption='(c) 2021 H2O.ai. All rights reserved.')
q.client.themes = [
ui.theme(name='custom',
text=q.client.text,
card=q.client.card,
page=q.client.page,
primary=q.client.primary)
]
q.client.initialized = True
if q.args.primary:
q.client.themes[0].primary = q.args.primary
q.client.primary = q.args.primary
if q.args.text:
q.client.themes[0].text = q.args.text
q.client.text = q.args.text
if q.args.card:
q.client.themes[0].card = q.args.card
q.client.card = q.args.card
if q.args.page:
q.client.themes[0].page = q.args.page
q.client.page = q.args.page
q.page['meta'].themes = q.client.themes
q.page['form'].items[5] = get_contrast('text', 'card', q)
q.page['form'].items[6] = get_contrast('card', 'primary', q)
q.page['form'].items[7] = get_contrast('text', 'page', q)
q.page['form'].items[8] = get_contrast('page', 'primary', q)
q.page['form'].items[10].frame.content = get_theme_code(q)
await q.page.save()