Responsive Layouts and Inline Components

Prithvi Prabhu

Prithvi Prabhu

Chief of Technology @ H2O.ai

Today, we're excited to announce H2O Wave v0.11.0, with support for responsive layouts, inline form components, new cards for organizing content, and lots more.

The Wave release now ships with a demo directory containing examples showing how you can combine various Wave cards and components to form complete applications. Over 2021, we plan to add many more cards and components, and this demo app can be used as a design guide for inspiration and reference for building your own apps.

dashboard

You can explore this demo application (and dashboards) by running demo.app (see demo/app.py in the 0.11 release):

(venv) $ wave run demo.app

dashboard

Responsive Layouts

You can now build apps having responsive layouts (layouts that adapt to varying viewport sizes). See Layout in the guide.

dashboard

Here are a few examples of what's possible in Wave 0.11+:

dashboard

dashboard

dashboard

dashboard

dashboard

dashboard

Resizable Components

We've reworked all existing components to dynamically resize when the layout is resized, especially for flex layouts. Although these card do resize or expand their contents to fit available size, it's best to use them at sizes they were originally intended for - this is especially true of the sparkline-style stats cards. At larger sizes, plot cards are more appropriate.

dashboard

Section Card

A section card (ui.section_card()) allows you to visually divide your page into various sub-sections, and provide components and controls specific to those sub-sections.

dashboard

Sections can contain nested components, just like a form card, but displayed horizontally to the right of the card.

dashboard

dashboard

dashboard

dashboard

Sections are also a good way to display tabs on a page (similar to a tab card).

dashboard

dashboard

Inline Components

Forms (and, in general, any card that supported nested components) can now display inline components using ui.inline().

dashboard

When used judiciously, inline components help design compact layouts, especially when grouping related fields together.

dashboard

Inline Stats

Stats or metrics can now be displayed inside forms, laid out horizontally from left to right. Each stat is created using ui.stat(), and grouped together using ui.stats().

dashboard

Stats can be used to display various scalar values/metrics associated with plots.

dashboard

Stats can optionally contain icons as well.

dashboard

Stat Lists

Stat lists (ui.stat_list_card()) offer a simple way to display two-column lists with optional links, icons, subtitles, values and auxiliary values. They provide a simpler way to display lists of things compared to the more heavyweight ui.table().

dashboard

Icons can be colored differently.

dashboard

Values can be colored differently as well.

dashboard

Stat Tables

Stat tables (ui.stat_table_card()) offer a simple way to display a table of metrics with optional links, icons and subtitles. They provide a simpler way to display tabular data compared to the more heavyweight ui.table().

dashboard

Improved Documentation

We have a long way to go improving our documentation, but hopefully these small changes help for now.

Most importantly, the Wave documentation now sports a search bar, thanks to Algolia.

The examples section of the documentation now has a detailed table of contents.

dashboard

Each example is now tagged with labels, which should make it easier to find related examples. The examples are listed by tags on this page.

dashboard

Download

Get the release here. Check out the release notes for more details.

We look forward to continuing our collaboration with the community and hearing your feedback as we further improve and expand the H2O Wave platform.

We’d like to thank the entire Wave team and the community for all of the contributions to this work!