A card represents a block of content on a Page. This section lists the different kinds of cards available to you. Each of the cards below serve a different purpose.
To learn how to add, update or remove cards from a page, see Pages.
The form card is the most versatile and commonly used card in Wave apps.
Use a form card to display input components like textboxes, dropdowns, date-pickers, and so on. The form card displays its components one below the other, stacked vertically. You can lay out several form cards on a page to build out intricate user interfaces.
Use content cards to display formatted text, images or HTML.
You can also display each of the following types of content using a form card. Use a content card if you want to display only that specific type of content. Use a form card if you want to display content intermingled with other types of content and input components.
Use a markdown card to display content authored in markdown.
Use a template card to display content authored using Handlebars templates.
Use a markup card to display raw HTML content.
Use a frame card to display embed external HTML content your page.
Use an image card to display an image on your page, either by specifying the image's path or by providing base64-encoded image data.
Use control cards to provide links or commands to allow users to navigate between different sections, or surface top-level actions applicable across your user interface.
Use a header card to display your app's title and icon.
Use a breadcrumbs card to display breadcrumbs, a navigational aid that indicates the current page's location withing a hierarchy, and help the user understand where they are in relation to the hierarchy.
Use a navigation pane to provide links to the main content areas of your app.
Use tabs to allow navigation between two or more views of content.
Use a toolbar to display top-level commands that operate on the content of your app.
Use these cards to display plots (or charts or graphs), or draw custom graphics.
Use a plot card to display visualizations defined using Wave's native
plot() API, based on the Grammar of Graphics.
Use this card to display visualizations defined using Vega-Lite.
Use a graphics card to render vector graphics and turtle graphics backed by data buffers.
Use stats cards for a quick and easy way to display live values and graphics (or sparklines). These cards are backed by data buffers, and provide an efficient mechanism to display values that change rapidly over time.
|ui.small_series_stat_card()||Small stat card; displays a primary value and a series plot.|
|ui.small_stat_card()||Stat card; displays a single value.|
|ui.large_bar_stat_card()||Large captioned card; displays a primary value, an auxiliary value and a progress bar, with captions for each value.|
|ui.large_stat_card()||Stat card; displays a primary value, an auxiliary value and a caption.|
|ui.tall_gauge_stat_card()||Tall stat card; displays a primary value, an auxiliary value and a progress gauge.|
|ui.tall_series_stat_card()||Tall stat card; displays a primary value, an auxiliary value and a series plot.|
|ui.wide_bar_stat_card()||Wide stat card; displays a primary value, an auxiliary value and a progress bar.|
|ui.wide_gauge_stat_card()||Wide stat card; displays a primary value, an auxiliary value and a progress gauge.|
|ui.wide_series_stat_card()||Wide stat card; displays a primary value, an auxiliary value and a series plot.|
The meta card is an invisible card, primarily used to control the behavior of the page it's placed on, like displaying a desktop notification, redirecting to a different page, or turning off realtime updates.