Skip to main content

Header

Use a header card to display a page header.

from h2o_wave import site, ui

image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260'
commands = [
ui.command(name='profile', label='Profile', icon='Contact'),
ui.command(name='preferences', label='Preferences', icon='Settings'),
ui.command(name='logout', label='Logout', icon='SignOut'),
]
page = site['/demo']
page['header1'] = ui.header_card(
box='1 1 9 1',
title='Transparent header',
subtitle='And now for something completely different!',
image='https://wave.h2o.ai/img/h2o-logo.svg',
items=[
ui.button(name='btn1', label='Button 1'),
ui.button(name='btn2', label='Button 2'),
ui.button(name='btn3', label='Button 3'),
],
secondary_items=[ui.textbox(name='search', icon='Search', width='300px', placeholder='Search...')],
color='transparent'
)
page['header2'] = ui.header_card(
box='1 2 9 1',
title='Card color header',
subtitle='And now for something completely different!',
items=[ui.menu(image=image, items=commands)],
secondary_items=[
ui.button(name='btn1', label='Link 1', link=True),
ui.button(name='btn2', label='Link 2', link=True),
ui.button(name='btn3', label='Link 3', link=True),
],
nav=[
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_group('Help', items=[
ui.nav_item(name='#about', label='About'),
ui.nav_item(name='#support', label='Support'),
])
],
color='card',
)
page['header3'] = ui.header_card(
box='1 3 9 1',
title='Primary color header',
subtitle='And now for something completely different!',
icon='Cycling',
icon_color='$card',
items=[ui.menu(icon='Add', items=commands)],
secondary_items=[
ui.tabs(name='menu', value='email', link=True, items=[
ui.tab(name='email', label='Mail', icon='Mail'),
ui.tab(name='events', label='Events', icon='Calendar'),
ui.tab(name='spam', label='Spam', icon='Heart'),
]),
]
)
page.save()

Tags:  header