Module h2o_wave.types
Classes
ArticleCard
Create an article card for longer texts.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Markdown text.
Collection of small buttons rendered under the title.
The card’s title, displayed at the top.
Methods
dump
Returns the contents of this object as a dict.
AudioAnnotator
Create an audio annotator component.
This component allows annotating and labeling parts of audio file.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Annotations to display on the image, if any.
An identifying name for this component.
The path to the audio file. Use mp3 or wav formats to achieve the best cross-browser support. See https://caniuse.com/?search=audio%20format for other formats.
The master list of tags that can be used for annotations.
The audio annotator's title.
True if the form should be submitted as soon as an annotation is made.
Methods
dump
Returns the contents of this object as a dict.
AudioAnnotatorItem
Create an annotator item with initial selected tags or no tags.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The end of the audio annotation in seconds.
The start of the audio annotation in seconds.
The name
of the audio annotator tag to refer to for the label
and color
of this item.
Methods
dump
Returns the contents of this object as a dict.
AudioAnnotatorTag
Create a unique tag type for use in an audio annotator.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Hex or RGB color string to be used as the background color.
Text to be displayed for the annotation.
An identifying name for this tag.
Methods
dump
Returns the contents of this object as a dict.
Breadcrumb
Create a breadcrumb for a BreadcrumbsCard
.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The label to display.
The name of this item. Prefix the name with a '#' to trigger hash-change navigation.
Methods
dump
Returns the contents of this object as a dict.
BreadcrumbsCard
Create a card containing breadcrumbs. Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy. Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
A list of Breadcrumb
instances to display. See breadcrumb()
Methods
dump
Returns the contents of this object as a dict.
Button
Create a button.
Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.
When considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submitting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container which holds the related UI elements.
Buttons may be placed within a "buttons" component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.
While buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.
Static methods
Instance variables
The caption displayed below the label.
When specified, a split button is rendered with extra actions tied to it within a context menu. Mutually exclusive with link
attribute.
True if the button should be disabled.
An optional icon to display next to the button label (not applicable for links).
The text displayed on the button.
True if the button should be rendered as link text and not a standard button.
An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.
The path or URL to link to. If specified, the name
is ignored. The URL is opened in a new browser window or tab.
True if the button should be rendered as the primary button in the set.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
A value for this button. If a value is set, it is used for the button's submitted instead of a boolean True.
True if the component should be visible. Defaults to True.
The width of the button, e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
Buttons
Create a set of buttons laid out horizontally.
Static methods
Instance variables
The buttons in this set.
Specifies how to lay out buttons horizontally. One of 'start', 'end', 'center', 'between', 'around'. See enum h2o_wave.ui.ButtonsJustify.
An identifying name for this component.
True if the component should be visible. Defaults to True.
The width of the buttons, e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
CanvasCard
WARNING: Experimental and subject to change. Do not use in production sites!
Create a card that displays a drawing canvas (whiteboard).
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
The data for this card.
Canvas height, in pixels.
The title for this card.
Canvas width, in pixels.
Methods
dump
Returns the contents of this object as a dict.
ChatCard
WARNING: Experimental and subject to change. Do not use in production sites!
Create a card that displays a chat room.
Static methods
Instance variables
A string indicating how to place this component on the page.
The maximum number of messages contained in this card. Defaults to 50.
Contextual menu commands for this component.
The data for this card.
The title for this card.
Methods
dump
Returns the contents of this object as a dict.
ChatSuggestion
Create a chat prompt suggestion displayed as button below the last response in the chatbot component.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The caption displayed below the label.
The icon to be displayed for this suggestion.
The text displayed for this suggestion.
An identifying name for this component.
Methods
dump
Returns the contents of this object as a dict.
ChatbotCard
Create a chatbot card to allow getting prompts from users and providing them with LLM generated answers.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Chat messages data. Requires cyclic buffer.
True if the user input should be disabled.
The events to capture on this chatbot. One of 'stop' | 'scroll_up' | 'feedback' | 'suggestion'.
True to show a button to stop the text generation. Defaults to False.
An identifying name for this component.
Chat input box placeholder. Use for prompt examples.
Clickable prompt suggestions shown below the last response.
Value of the user input.
Methods
dump
Returns the contents of this object as a dict.
Checkbox
Create a checkbox.
A checkbox allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another component.
A checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The component has two selection states: unselected and selected.
For a binary choice, the main difference between a checkbox and a toggle switch is that the checkbox is for status and the toggle switch is for action.
Use multiple checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.
Static methods
Instance variables
True if the checkbox is disabled.
True if the selection is indeterminate (neither selected nor unselected).
Text to be displayed alongside the checkbox.
An identifying name for this component.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the form should be submitted when the checkbox value changes.
True if selected, False if unselected.
True if the component should be visible. Defaults to True.
The width of the checkbox, e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
Checklist
Create a set of checkboxes. Use this for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.
Static methods
Instance variables
The choices to be presented.
True if checklist should be rendered horizontally. Defaults to False.
Text to be displayed above the component.
An identifying name for this component.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the form should be submitted when the checklist value changes.
The names of the selected choices.
True if the component should be visible. Defaults to True.
The width of the checklist, e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
Choice
Create a choice for a checklist, choice group or dropdown.
Static methods
Instance variables
True if the checkbox is disabled.
Text to be displayed alongside the component.
An identifying name for this component.
Methods
dump
Returns the contents of this object as a dict.
ChoiceGroup
Create a choice group. The choice group component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one choice group button; a user can select only one choice group in a button group.
Choice groups emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other components, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a dropdown instead.
If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for "I agree" instead of choice group buttons for "I agree" and "I don't agree."
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The choices to be presented.
True if choices should be rendered horizontally. Defaults to False.
Text to be displayed alongside the component.
An identifying name for this component.
True if this field is required.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the form should be submitted when the selection changes.
The name of the selected choice.
True if the component should be visible. Defaults to True.
The width of the choice group, e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
ColorPicker
Create a color picker.
A color picker allows a user to pick a color value. If the 'choices' parameter is set, a swatch picker is displayed instead of the standard color picker.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
True if user should be allowed to pick color transparency. Defaults to True.
A list of colors (CSS-compatible strings) to limit color choices to.
True if color picker should be displayed inline (takes less space). Doesn't work with choices specified. Defaults to False.
Text to be displayed alongside the component.
An identifying name for this component.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the form should be submitted when the color picker value changes.
The selected color (CSS-compatible string).
True if the component should be visible. Defaults to True.
The width of the color picker, e.g. '100px'. Defaults to '300px'.
Methods
dump
Returns the contents of this object as a dict.
Combobox
Create a combobox.
A combobox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input. They are used to simplify the design and make a choice within the UI.
When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed the user can select a new value by typing.
Static methods
Instance variables
The choices to be presented.
True if this field is disabled.
Text to be displayed as an error below the text box.
Text to be displayed alongside the component.
An identifying name for this component.
A string that provides a brief hint to the user as to what kind of information is expected in the field.
True if this is a required field. Defaults to False.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the choice should be submitted when an item from the dropdown is selected or the textbox value changes.
The name of the selected choice.
The names of the selected choices. If set, multiple selections will be allowed.
True if the component should be visible. Defaults to True.
The width of the combobox, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
Command
Create a command.
Commands are typically displayed as context menu items or toolbar button.
Static methods
Instance variables
The caption for this command (typically a tooltip).
True if the link should prompt the user to save the linked URL instead of navigating to it.
The icon to be displayed for this command.
Sub-commands, if any
The text displayed for this command.
An identifying name for this component. If the name is prefixed with a '#', the command sets the location hash to the name when executed.
The path or URL to link to. The 'items' and 'value' props are ignored when specified.
Data associated with this command, if any.
Methods
dump
Returns the contents of this object as a dict.
Component
Create a component.
Static methods
Instance variables
Audio annotator.
Button.
Button set.
Checkbox.
Checklist.
Choice group.
Color picker.
Combobox.
Copyable text.
Date picker.
Dropdown.
Expander.
Facepile.
File upload.
Frame.
Image
Image annotator.
Inline components.
Label.
Link.
Link set.
Markup
Menu.
Message bar.
Mini button.
Mini button set.
Persona.
Picker.
Progress bar.
Range Slider.
Separator.
Slider.
Spinbox.
Stats.
Stepper.
Table.
Tabs.
Tags.
Template.
Text block.
Text annotator.
Large sized text block.
Medium sized text block.
Small sized text block.
Extra-large sized text block.
Extra-small sized text block.
Textbox.
Time picker.
Toggle.
Vega-lite Visualization.
Visualization.
Methods
dump
Returns the contents of this object as a dict.
CopyableText
Create a copyable text component. Use this component when you want to enable your users to quickly copy paste sections of text.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Custom height in px (e.g. '200px') or '1' to fill the remaining card space. Requires multiline
to be set.
The text displayed above the textbox.
True if the component should allow multi-line text entry.
An identifying name for this component.
Text to be displayed inside the component.
The width of the copyable text , e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
DatePicker
Create a date picker.
A date picker allows a user to pick a date value.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
True if this field is disabled.
Text to be displayed alongside the component.
The maximum allowed date value in YYYY-MM-DD format.
The minimum allowed date value in YYYY-MM-DD format.
An identifying name for this component.
A string that provides a brief hint to the user as to what kind of information is expected in the field.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the form should be submitted when the datepicker value changes.
The date value in YYYY-MM-DD format.
True if the component should be visible. Defaults to True.
The width of the date picker, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
Dialog
A dialog box (Dialog) is a temporary pop-up that takes focus from the page or app and requires people to interact with it. It’s primarily used for confirming actions, such as deleting a file, or asking people to make a choice.
Static methods
Instance variables
True to prevent closing when clicking or tapping outside the dialog. Prevents interacting with the page behind the dialog. Defaults to False.
True if the dialog should have a closing 'X' button at the top right corner.
The events to capture on this dialog. One of 'dismissed'.
The components displayed in this dialog.
An identifying name for this component.
Dialog with large header banner, mutually exclusive with closable
prop. Defaults to False.
The dialog's title.
The width of the dialog, e.g. '400px'. Defaults to '600px'.
Methods
dump
Returns the contents of this object as a dict.
Dropdown
Create a dropdown.
A dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible.
To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.
Note: Use either the 'value' parameter or the 'values' parameter. Setting the 'values' parameter renders a multi-select dropdown.
Static methods
Instance variables
The choices to be presented.
True if this field is disabled.
Text to be displayed alongside the component.
An identifying name for this component.
A string that provides a brief hint to the user as to what kind of information is expected in the field.
Whether to present the choices using a pop-up dialog. By default pops up a dialog only for more than 100 choices. Defaults to 'auto'. One of 'auto', 'always', 'never'. See enum h2o_wave.ui.DropdownPopup.
True if this is a required field.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the form should be submitted when the dropdown value changes.
The name of the selected choice.
The names of the selected choices. If this parameter is set, multiple selections will be allowed.
True if the component should be visible. Defaults to True.
The width of the dropdown, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
EditorCard
WARNING: Experimental and subject to change. Do not use in production sites!
Create a card that enables WYSIWYG editing on a page. Adding this card to a page makes the page editable by end-users.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
The editing mode. Defaults to public
. One of 'public', 'private'. See enum h2o_wave.ui.EditorCardMode.
Methods
dump
Returns the contents of this object as a dict.
Expander
Creates a new expander.
Expanders can be used to show or hide a group of related components.
Static methods
Instance variables
True if expanded, False if collapsed.
List of components to be hideable by the expander.
The text displayed on the expander.
An identifying name for this component.
True if the component should be visible. Defaults to True.
The width of the expander, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
Facepile
A face pile displays a list of personas. Each circle represents a person and contains their image or initials. Often this control is used when sharing who has access to a specific view or file.
Static methods
Instance variables
List of personas to be displayed.
Maximum number of personas to be displayed.
An identifying name for this component. If specified Add button
will be rendered.
A value for the facepile. If a value is set, it is used for the button's submitted instead of a boolean True.
Methods
dump
Returns the contents of this object as a dict.
FileUpload
Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
True if the component should be displayed compactly (without drag-and-drop capabilities). Defaults to False.
List of allowed file extensions, e.g. pdf
, docx
, etc.
The height of the file upload, e.g. '400px', '50%', etc. Defaults to '300px'.
Text to be displayed in the bottom button or as a component title when the component is displayed compactly. Defaults to "Upload".
Maximum allowed size (Mb) per file. No limit by default.
Maximum allowed size (Mb) for all files combined. No limit by default.
True if the component should allow multiple files to be uploaded.
An identifying name for this component.
True if this is a required field. Defaults to False.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the component should be visible. Defaults to True.
The width of the file upload, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
FlexCard
EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.
Static methods
Instance variables
Layout strategy for cross axis. One of 'start', 'end', 'center', 'baseline', 'stretch'. See enum h2o_wave.ui.FlexCardAlign.
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Data for this card.
Layout direction. One of 'horizontal', 'vertical'. See enum h2o_wave.ui.FlexCardDirection.
The child card properties.
The child card type.
Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'. See enum h2o_wave.ui.FlexCardJustify.
Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'. See enum h2o_wave.ui.FlexCardWrap.
Methods
dump
Returns the contents of this object as a dict.
FlexCardJustify
FlexCardWrap
FooterCard
Render a page footer displaying a caption. Footer cards are typically displayed at the bottom of a page.
Static methods
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
The caption. Supports markdown. *
Contextual menu commands for this component.
The components displayed to the right of the caption.
Methods
Returns the contents of this object as a dict.
FormCard
Create a form.
Static methods
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
The components in this form.
The title for this card.
Methods
dump
Returns the contents of this object as a dict.
Frame
Create a new inline frame (an iframe
).
Static methods
Instance variables
The HTML content of the page. A string containing <html>...</html>
.
The height of the frame, e.g. 200px
, 50%
, etc. Defaults to '150px'.
An identifying name for this component.
The path or URL of the web page, e.g. /foo.html
or http://example.com/foo.html
True if the component should be visible. Defaults to True.
The width of the frame, e.g. 200px
, 50%
, etc. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
FrameCard
Render a card containing a HTML page inside an inline frame (an iframe
).
Either a path or content can be provided as arguments.
Static methods
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
True if title and padding should be removed. Defaults to False.
The HTML content of the page. A string containing <html>...</html>
.
The path or URL of the web page, e.g. /foo.html
or http://example.com/foo.html
.
The title for this card.
Methods
dump
Returns the contents of this object as a dict.
GraphicsCard
Create a card for displaying vector graphics.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
The displayed height of the rectangular viewport. (Not the height of its coordinate system.)
Background image data, base64-encoded.
The path or URL or data URL of the background image, e.g. /foo.png
or http://example.com/foo.png
or data:image/png;base64,???
.
The background image MIME subtype. One of apng
, bmp
, gif
, x-icon
, jpeg
, png
, webp
. Required only if image
is set.
Foreground layer for rendering dynamic SVG elements.
Background layer for rendering static SVG elements. Must be packed to conserve memory.
The position and dimension of the SVG viewport, in user space. A space-separated list of four numbers: min-x, min-y, width and height. For example, '0 0 400 300'. See: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
The displayed width of the rectangular viewport. (Not the width of its coordinate system.)
Methods
dump
Returns the contents of this object as a dict.
GridCard
EXPERIMENTAL. DO NOT USE.
Static methods
Instance variables
A string indicating how to place this component on the page.
EXPERIMENTAL. DO NOT USE.
Contextual menu commands for this component.
EXPERIMENTAL. DO NOT USE.
EXPERIMENTAL. DO NOT USE.
Methods
dump
Returns the contents of this object as a dict.
HeaderCard
Render a page header displaying a title, subtitle and an optional navigation menu. Header cards are typically used for top-level navigation.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Header background color. Defaults to 'primary'. One of 'card', 'transparent', 'primary'. See enum h2o_wave.ui.HeaderCardColor.
Contextual menu commands for this component.
The icon, displayed to the left. *
The icon's color. *
The URL of an image (usually logo) displayed to the left. Mutually exclusive with icon. *
Items that should be displayed on the right side of the header.
The navigation menu to display when the header's icon is clicked. Recommended for mobile screens only. *
Items that should be displayed in the center of the header.
The subtitle, displayed below the title. *
The title. *
Methods
dump
Returns the contents of this object as a dict.
IconTableCellType
Create a cell type that renders a column's cells as icons instead of plain text. If set on a column, the cell value is interpreted as the name of the icon to be displayed.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Icon color.
An identifying name for this component.
Methods
dump
Returns the contents of this object as a dict.
Image
Create an image.
Static methods
Instance variables
Image data, base64-encoded.
The path or URL or data URL of the image, e.g. /foo.png
or http://example.com/foo.png
or data:image/png;base64,???
.
The path or URL or data URL of the image displayed in the popup after clicking the image. Does not replace the path
property.
The image title, typically displayed as a tooltip.
The image MIME subtype. One of apng
, bmp
, gif
, x-icon
, jpeg
, png
, webp
. Required only if image
is set.
True if the component should be visible. Defaults to True.
The width of the image, e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
ImageAnnotator
Create an image annotator component.
This component allows annotating and labeling parts of an image by drawing shapes with a pointing device.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
List of allowed shapes. Available values are 'rect' and 'polygon'. If not set, all shapes are available by default.
The events to capture on this image annotator. One of click
| tool_change
.
The path or URL of the image to be presented for annotation.
The card’s image height. The actual image size is used by default.
Annotations to display on the image, if any.
An identifying name for this component.
The master list of tags that can be used for annotations.
The image annotator's title.
True if the form should be submitted as soon as an annotation is drawn.
Methods
dump
Returns the contents of this object as a dict.
ImageAnnotatorItem
Create an annotator item with initial selected tags or no tag for plaintext.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The annotation shape.
The name
of the image annotator tag to refer to for the label
and color
of this item.
Methods
dump
Returns the contents of this object as a dict.
ImageAnnotatorPoint
Create a polygon annotation point with x and y coordinates..
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
x
coordinate of the point.
y
coordinate of the point.
Methods
dump
Returns the contents of this object as a dict.
ImageAnnotatorPolygon
Create a polygon annotation shape.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
List of polygon points.
Methods
dump
Returns the contents of this object as a dict.
ImageAnnotatorRect
Create a rectangular annotation shape.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
x
coordinate of the rectangle's corner.
x
coordinate of the diagonally opposite corner.
y
coordinate of the rectangle's corner.
y
coordinate of the diagonally opposite corner.
Methods
dump
Returns the contents of this object as a dict.
ImageAnnotatorShape
Create a shape to be rendered as an annotation on an image annotator.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
No documentation available.
No documentation available.
Methods
dump
Returns the contents of this object as a dict.
ImageAnnotatorTag
Create a unique tag type for use in an image annotator.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Hex or RGB color string to be used as the background color.
Text to be displayed for the annotation.
An identifying name for this tag.
Methods
dump
Returns the contents of this object as a dict.
ImageCard
Create a card that displays a base64-encoded image.
Static methods
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Data for this card.
Image data, base64-encoded.
The path or URL or data URL of the image, e.g. /foo.png
or http://example.com/foo.png
or data:image/png;base64,???
.
The path or URL or data URL of the image displayed in the popup after clicking the image. Does not replace the path
property.
The card's title.
The image MIME subtype. One of apng
, bmp
, gif
, x-icon
, jpeg
, png
, webp
.
Methods
dump
Returns the contents of this object as a dict.
Inline
Create an inline (horizontal) list of components.
Static methods
Instance variables
Specifies how the individual components are aligned on the vertical axis. Defaults to 'center'. One of 'start', 'end', 'center', 'baseline'. See enum h2o_wave.ui.InlineAlign.
Container direction. Defaults to 'row'. One of 'row', 'column'. See enum h2o_wave.ui.InlineDirection.
Height of the inline container. Accepts any valid CSS unit e.g. '100vh', '300px'. Use '1' to fill the remaining card space.
Whether to display the components inset from the parent form, with a contrasting background.
The components laid out inline.
Specifies how to lay out the individual components. Defaults to 'start'. One of 'start', 'end', 'center', 'between', 'around'. See enum h2o_wave.ui.InlineJustify.
Methods
dump
Returns the contents of this object as a dict.
InlineScript
Create a block of inline Javascript to be executed immediately on a page.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The Javascript source code to be executed.
The names of modules required on the page's window
global before running this script.
The HTML elements required to be present on the page before running this script. Each 'target' can either be the ID of the element (foo
) or a CSS selector (#foo
, .foo
, table > td.foo
, etc.).
Methods
dump
Returns the contents of this object as a dict.
InlineStylesheet
Create an inline CSS to be injected into a page.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The CSS to be applied to this page.
A valid media query to set conditions for when the style should be applied. More info at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#attr-media.
Methods
dump
Returns the contents of this object as a dict.
Label
Create a label.
Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as textboxes, dropdowns, or toggles, already have labels incorporated, but other components may optionally add a Label if it helps inform the user of the component’s purpose.
Static methods
Instance variables
True if the label should be disabled.
The text displayed on the label.
An identifying name for this component.
True if the field is required.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the component should be visible. Defaults to True.
The width of the label , e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
LargeBarStatCard
Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The auxiliary value, typically a target value.
The caption displayed below the auxiliary value.
A string indicating how to place this component on the page.
The card's caption.
Contextual menu commands for this component.
Data for this card.
The color of the progress bar.
The value of the progress bar, between 0 and 1.
The card's title.
The primary value displayed.
The caption displayed below the primary value.
Methods
dump
Returns the contents of this object as a dict.
LargeStatCard
Create a stat card displaying a primary value, an auxiliary value and a caption.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The auxiliary value displayed next to the primary value.
A string indicating how to place this component on the page.
The caption displayed below the primary value.
Contextual menu commands for this component.
Data for this card.
The card's title.
The primary value displayed.
Methods
dump
Returns the contents of this object as a dict.
Layout
Represents the layout structure for a page.
Static methods
Instance variables
The minimum viewport width at which to use this layout. Values must be pixel widths (e.g. '0px', '576px', '768px') or a named preset. The named presets are: 'xs': '0px' for extra small devices (portrait phones), 's': '576px' for small devices (landscape phones), 'm': '768px' for medium devices (tablets), 'l': '992px' for large devices (desktops), 'xl': '1200px' for extra large devices (large desktops). A breakpoint value of 'xs' (or '0') matches all viewport widths, unless other breakpoints are set.
The height of the layout. Defaults to auto
.
The maximum height of the layout.
The maximum width of the layout.
The minimum height of the layout.
The minimum width of the layout.
An identifying name for this zone.
The width of the layout. Defaults to 100%
.
The zones in this layout. Each zones can in turn contain sub-zones.
Methods
dump
Returns the contents of this object as a dict.
Link
Create a hyperlink.
Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a /
and point to URLs within the Wave UI. All other kinds of paths are treated as external hyperlinks.
Static methods
Instance variables
True if the link should be rendered as a button.
True if the link should be disabled.
True if the link should prompt the user to save the linked URL instead of navigating to it.
The text to be displayed. If blank, the path
is used as the label.
An identifying name for this component.
The path or URL to link to.
Where to display the link. An empty string or '_blank'
opens the link in a new tab. _self
opens in the current tab.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the component should be visible. Defaults to True.
The width of the link, e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
Links
Create a collection of links.
Static methods
Instance variables
Render links horizontally. Defaults to False.
The links contained in this group.
The name of the link group.
The width of the links, e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
ListCard
EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).
Static methods
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Data for this card.
The child card properties.
The child card type.
The title for this card.
Methods
dump
Returns the contents of this object as a dict.
ListItem1Card
EXPERIMENTAL. DO NOT USE.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
EXPERIMENTAL. DO NOT USE.
A string indicating how to place this component on the page.
EXPERIMENTAL. DO NOT USE.
Contextual menu commands for this component.
EXPERIMENTAL. DO NOT USE.
EXPERIMENTAL. DO NOT USE.
EXPERIMENTAL. DO NOT USE.
Methods
dump
Returns the contents of this object as a dict.
Mark
Create a specification for a layer of graphical marks such as bars, lines, points for a plot. A plot can contain multiple such layers of marks.
Static methods
Instance variables
Mark color field or value.
The unique values in the data (labels or categories or classes) to map colors to, e.g. ['high', 'medium', 'low']
. If this is not provided, the unique values are automatically inferred from the color
attribute.
Mark color range for multi-series plots. A string containing space-separated colors, e.g. '#fee8c8 #fdbb84 #e34a33'
Coordinate system. rect
is synonymous to cartesian
. theta
is transposed polar
. One of 'rect', 'cartesian', 'polar', 'theta', 'helix'. See enum h2o_wave.ui.MarkCoord.
Curve type for line
and area
mark types. One of 'none', 'smooth', 'step-before', 'step', 'step-after'. See enum h2o_wave.ui.MarkCurve.
Field to dodge marks by, or 'auto' to infer.
Mark fill color.
Mark fill opacity.
Defines whether to raise events on interactions with the mark. Defaults to True.
Label field or value.
Label text alignment. One of 'left', 'right', 'center', 'start', 'end'. See enum h2o_wave.ui.MarkLabelAlign.
Label fill color.
Label fill opacity.
Label font size.
Label font weight.
Label line height.
Distance between label and mark.
Horizontal distance between label and mark.
Vertical distance between label and mark.
Strategy to use if labels overlap. One of 'hide', 'overlap', 'constrain'. See enum h2o_wave.ui.MarkLabelOverlap.
Label position relative to the mark. One of 'top', 'bottom', 'middle', 'left', 'right'. See enum h2o_wave.ui.MarkLabelPosition.
Label rotation angle, in degrees, or 'none' to disable automatic rotation. The default behavior is 'auto' for automatic rotation.
Label stroke color.
Label stroke opacity.
Label stroke size (line width or pen thickness).
Reference line stroke color.
Reference line stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].
Reference line stroke opacity.
Reference line stroke size (line width or pen thickness).
Mark shape field or value for point
mark types. Possible values are 'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down', 'cross', 'tick', 'plus', 'hyphen', 'line'.
Mark shape range for multi-series plots using point
mark types. A string containing space-separated shapes, e.g. 'circle square diamond'
Mark size field or value.
Mark size range. A string containing space-separated integers, e.g. '4 30'
Field to stack marks by, or 'auto' to infer.
Mark stroke color.
Mark stroke dash style. A string containing space-separated integers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].
Mark stroke opacity.
Mark stroke size.
Graphical geometry. One of 'interval', 'line', 'path', 'point', 'area', 'polygon', 'schema', 'edge', 'heatmap'. See enum h2o_wave.ui.MarkType.
X field or value.
X base field or value.
X bin lower bound field or value. For histograms and box plots.
X bin upper bound field or value. For histograms and box plots.
X axis scale maximum.
X axis scale minimum.
Whether to nice X axis scale ticks.
X lower quartile. For box plots.
X median. For box plots.
X upper quartile. For box plots.
X axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'power', 'time', 'time-category', 'quantize', 'quantile'. See enum h2o_wave.ui.MarkXScale.
X axis title.
Y field or value.
Y base field or value.
Y bin lower bound field or value. For histograms and box plots.
Y bin upper bound field or value. For histograms and box plots.
Y axis scale maximum.
Y axis scale minimum.
Whether to nice Y axis scale ticks.
Y lower quartile. For box plots.
Y median. For box plots.
Y upper quartile. For box plots.
Y axis scale type. One of 'linear', 'cat', 'category', 'identity', 'log', 'pow', 'power', 'time', 'time-category', 'quantize', 'quantile'. See enum h2o_wave.ui.MarkYScale.
Y axis title.
Methods
dump
Returns the contents of this object as a dict.
MarkLabelPosition
MarkType
Class variables
MarkXScale
Class variables
MarkYScale
Class variables
MarkdownCard
Create a card that renders Markdown content.
Github-flavored markdown is supported. HTML markup is allowed in markdown content. URLs, if found, are displayed as hyperlinks. Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Make spacing tighter. Defaults to True.
The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/
Additional data for the card.
The title for this card.
Methods
dump
Returns the contents of this object as a dict.
MarkdownTableCellType
Create a cell type that renders Markdown content.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
An identifying name for this component.
Where to display the link. An empty string or '_blank'
opens the link in a new tab. _self
opens in the current tab.
Methods
dump
Returns the contents of this object as a dict.
Markup
Render HTML content.
Static methods
Instance variables
The HTML content.
An identifying name for this component.
True if the component should be visible. Defaults to True.
The width of the markup, e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
MarkupCard
Render HTML content.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
True if outer spacing should be removed. Defaults to False.
The HTML content.
The title for this card.
Methods
dump
Returns the contents of this object as a dict.
Menu
Create a contextual menu component. Useful when you have a lot of links and want to conserve the space.
Static methods
Instance variables
The card's icon.
The card’s image, preferably user avatar.
Commands to render.
The text displayed next to the chevron.
An identifying name for this component.
Methods
dump
Returns the contents of this object as a dict.
MenuTableCellType
Create a cell type that renders command menu.
Commands are typically displayed as context menu items. Useful when you need to provide multiple actions within a single row.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Items to render.
An identifying name for this component.
Methods
dump
Returns the contents of this object as a dict.
MessageBar
Create a message bar.
A message bar is an area at the top of a primary view that displays relevant status information. You can use a message bar to tell the user about a situation that does not require their immediate attention and therefore does not need to block other activities.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Specify one or more action buttons.
An identifying name for this component.
The text displayed on the message bar.
The icon and color of the message bar. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'. See enum h2o_wave.ui.MessageBarType.
True if the component should be visible. Defaults to True.
The width of the message bar, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
MessageBarType
MetaCard
Represents page-global state.
This card is invisible. It is used to control attributes of the active page.
Static methods
Instance variables
EXPERIMENTAL: True to turn on the card animations. Defaults to False.
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Display a dialog on the page.
Shortcut icon path. Preferably a .png
file (.ico
files may not work in mobile browsers). Not supported in Safari.
The layouts supported by this page.
Display a desktop notification.
Display an in-app notification bar.
Redirect the page to a new URL.
Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).
Javascript code to execute on this page.
External Javascript files to load into the page.
Display a side panel on the page.
CSS stylesheet to be applied to this page.
External CSS files to load into the page.
Specify the name of the theme (color scheme) to use on this page. One of 'light', 'neon' or 'h2o-dark'.
- Themes (color schemes) that define color used in the app.
The title of the page.
Configure a tracker for the page (for web analytics).
Methods
dump
Returns the contents of this object as a dict.
MiniButton
Create a mini button - same as regular button, but smaller in size.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
An optional icon to display next to the button label.
The text displayed on the button.
An identifying name for this component. If the name is prefixed with a '#', the button sets the location hash to the name when clicked.
Methods
dump
Returns the contents of this object as a dict.
MiniButtons
Create a set of mini buttons laid out horizontally.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The buttons in this set.
True if the component should be visible. Defaults to True.
Methods
dump
Returns the contents of this object as a dict.
NavCard
Create a card containing a navigation pane.
Static methods
Instance variables
A string indicating how to place this component on the page.
Card background color. Defaults to 'card'. One of 'card', 'primary'. See enum h2o_wave.ui.NavCardColor.
Contextual menu commands for this component.
The icon, displayed to the left. *
The icon's color. *
The URL of an image (usually logo) displayed at the top. *
The navigation groups contained in this pane.
The user avatar displayed at the top. Mutually exclusive with image, title and subtitle. *
Items that should be displayed at the bottom of the card if items are not empty, otherwise displayed under subtitle.
The card's subtitle.
The card's title.
The name of the active (highlighted) navigation item.
Methods
Returns the contents of this object as a dict.
NavGroup
Create a group of navigation items.
Static methods
Instance variables
Indicates whether nav groups should be rendered as collapsed initially
The navigation items contained in this group.
The label to display for this group.
Methods
Returns the contents of this object as a dict.
NavItem
Create a navigation item.
Static methods
Instance variables
True if this item should be disabled.
An optional icon to display next to the label.
The label to display.
The name of this item. Prefix the name with a '#' to trigger hash-change navigation.
The path or URL to link to. If specified, the name
is ignored. The URL is opened in a new browser window or tab. E.g. /foo.html
or http://example.com/foo.html
An optional tooltip message displayed when a user hovers over this item.
Methods
Returns the contents of this object as a dict.
NotificationBar
Create a notification bar.
A notification bar is an area at the edge of a primary view that displays relevant status information. You can use a notification bar to tell the user about a result of an action, e.g. "Data has been successfully saved".
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Specify one or more action buttons.
The events to capture on this notification bar. One of 'dismissed'.
An identifying name for this component.
Specify the location of notification. Defaults to 'top-right'. One of 'top-right', 'bottom-right', 'bottom-center', 'bottom-left', 'top-left', 'top-center'. See enum h2o_wave.ui.NotificationBarPosition.
The text displayed on the notification bar.
How long the notification stays visible, in seconds. If set to -1, the notification has to be closed manually. Defaults to 5.
The icon and color of the notification bar. Defaults to 'info'. One of 'info', 'error', 'warning', 'success', 'danger', 'blocked'. See enum h2o_wave.ui.NotificationBarType.
Methods
dump
Returns the contents of this object as a dict.
NotificationBarPosition
Class variables
NotificationBarType
Class variables
Persona
Create an individual's persona or avatar, a visual representation of a person across products. Can be used to display an individual's avatar (or a composition of the person’s initials on a background color), their name or identification, and online status.
Static methods
Instance variables
Tertiary text, displayed under the subtitle. Only visible for sizes >= 'm'.
Image, URL or base64-encoded (data:image/png;base64,???
).
Initials, if image
is not specified.
Initials background color (CSS-compatible string).
An identifying name for this component.
The size of the persona coin. Defaults to 'm'. One of 'xl', 'l', 'm', 's', 'xs'. See enum h2o_wave.ui.PersonaSize.
Secondary text, displayed under the title.
Primary text, displayed next to the persona coin.
Methods
dump
Returns the contents of this object as a dict.
Picker
Create a picker. Pickers are used to select one or more choices, such as tags or files, from a list. Use a picker to allow the user to quickly search for or manage a few tags or files.
Static methods
Instance variables
The choices to be presented.
Controls whether the picker should be disabled or not.
Text to be displayed above the component.
Maximum number of selectable choices.
An identifying name for this component.
True if the picker is a required field.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the form should be submitted when the picker value changes.
The names of the selected choices.
True if the component should be visible. Defaults to True.
The width of the picker, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
Pie
Card's pie chart data to be displayed.
Static methods
Instance variables
The auxiliary value, displayed below the label.
The color of the pie.
A value between 0 and 1 indicating the size of the pie.
The description for the pie, displayed in the legend.
The formatted value displayed on the pie.
Methods
dump
Returns the contents of this object as a dict.
PixelArtCard
WARNING: Experimental and subject to change. Do not use in production sites!
Create a card displaying a collaborative Pixel art tool.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
The data for this card.
The title for this card.
Methods
dump
Returns the contents of this object as a dict.
Plot
PlotCard
Create a card displaying a plot.
Static methods
Instance variables
EXPERIMENTAL: True to turn on the chart animations. Defaults to False.
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Data for this card.
The events to capture on this card. One of 'select_marks'.
The interactions to be allowed for this card. One of 'drag_move' | 'scale_zoom' | 'brush'. Note: brush
does not raise select_marks
event.
The plot to be displayed in this card.
The title for this card.
Methods
dump
Returns the contents of this object as a dict.
PostCard
Create a postcard displaying a persona, image, caption and optional buttons.
Static methods
Instance variables
The card's aux_value, displayed on the right hand side of the image.
A string indicating how to place this component on the page.
The card's caption, displayed below the image.
Contextual menu commands for this component.
The card’s image.
The card's buttons, displayed at the bottom.
The card's user avatar, 'size' prop is restricted to 'xs'.
Methods
dump
Returns the contents of this object as a dict.
PreviewCard
Create a preview card displaying an image with shadow overlay, title, social icons, caption, and button.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
The card's caption, displayed below the title.
Contextual menu commands for this component.
The card’s image.
Mini buttons displayed at the top-right corner
Label of a button rendered at the bottom of the card. If specified, the whole card is not clickable anymore.
An identifying name for this card. Makes the card clickable if label is not provided, similar to a button.
The card's title
Methods
dump
Returns the contents of this object as a dict.
ProfileCard
Create a profile card to display information about a user.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
The height of the bottom content (items), e.g. '400px'. Use sparingly, e.g. in grid views.
The card’s image, either a base64-encoded image, a path to an image hosted externally (starting with https://
or http://
) or a path to an image hosted on the Wave daemon (starting with /
). .
Components in this card displayed below the image.
The persona represented by this card.
Methods
dump
Returns the contents of this object as a dict.
Progress
Create a progress bar.
Progress bars are used to show the completion status of an operation lasting more than 2 seconds. If the state of progress cannot be determined, do not set a value. Progress bars feature a bar showing total units to completion, and total units finished. The label appears above the bar, and the caption appears below. The label should tell someone exactly what the operation is doing.
Examples of formatting include: [Object] is being [operation name], or [Object] is being [operation name] to [destination name] or [Object] is being [operation name] from [source name] to [destination name]
Status text is generally in units elapsed and total units. Real-world examples include copying files to a storage location, saving edits to a file, and more. Use units that are informative and relevant to give the best idea to users of how long the operation will take to complete. Avoid time units as they are rarely accurate enough to be trustworthy. Also, combine steps of a complex operation into one total bar to avoid “rewinding” the bar. Instead change the label to reflect the change if necessary. Bars moving backwards reduce confidence in the service.
Static methods
Instance variables
The text displayed below the bar or spinner.
The text displayed above the bar or right to the spinner.
An identifying name for this component.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
The type of progress bar to be displayed. One of 'bar', 'spinner'. Defaults to 'bar'. One of 'bar', 'spinner'. See enum h2o_wave.ui.ProgressType.
The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.
True if the component should be visible. Defaults to True.
The width of the separator, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
ProgressTableCellType
Create a cell type that renders a column's cells as progress bars instead of plain text. If set on a column, the cell value must be between 0.0 and 1.0.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Color of the progress arc.
An identifying name for this component.
Methods
dump
Returns the contents of this object as a dict.
RangeSlider
Create a range slider.
A range slider is an element used to select a value range. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. Knobs or levers are dragged to one end or the other to make the choice, indicating the current max and min value.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
True if this field is disabled.
Text to be displayed alongside the component.
The maximum value of the slider. Defaults to 100.
The upper bound of the selected range. Default value is max
.
The minimum value of the slider. Defaults to 0.
The lower bound of the selected range.
An identifying name for this component.
The difference between two adjacent values of the slider.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the form should be submitted when the slider value changes.
True if the component should be visible. Defaults to True.
The width of the range slider, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
RepeatCard
EXPERIMENTAL. DO NOT USE. Create a card containing other cards.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Data for this card.
The child card properties.
EXPERIMENTAL. DO NOT USE.
Methods
dump
Returns the contents of this object as a dict.
Script
Create a reference to an external Javascript file to be included on a page.
Static methods
Instance variables
Whether to fetch and load this script in parallel to parsing and evaluated as soon as it is available.
The CORS setting for this script. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
The cryptographic hash to verify the script's integrity. See https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
The URI of an external script.
Indicates which referrer to send when fetching the script. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
Type of the script. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type
Methods
dump
Returns the contents of this object as a dict.
SectionCard
Render a card displaying a title, a subtitle, and optional components. Section cards are typically used to demarcate different sections on a page.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
The components to display in this card
The subtitle, displayed below the title. Supports Markdown.
The title.
Methods
dump
Returns the contents of this object as a dict.
Separator
Create a separator.
A separator visually separates content into groups.
Static methods
Instance variables
The text displayed on the separator.
An identifying name for this component.
True if the component should be visible. Defaults to True.
The width of the separator , e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
SidePanel
A dialog box (Dialog) is a temporary pop-up that takes focus from the page or app and requires people to interact with it. It’s primarily used for confirming actions, such as deleting a file, or asking people to make a choice.
Static methods
Instance variables
True to prevent closing when clicking or tapping outside the side panel. Prevents interacting with the page behind the side panel. Defaults to False.
True if the side panel should have a closing 'X' button at the top right corner.
The events to capture on this side panel. One of 'dismissed'.
The components displayed in this side panel.
An identifying name for this component.
The side panel's title.
The width of the dialog, e.g. '400px'. Defaults to '600px'.
Methods
dump
Returns the contents of this object as a dict.
Slider
Create a slider.
A slider is an element used to set a value. It provides a visual indication of adjustable content, as well as the current setting in the total range of content. It is displayed as a horizontal track with options on either side. A knob or lever is dragged to one end or the other to make the choice, indicating the current value. Marks on the slider bar can show values and users can choose where they want to drag the knob or lever to set the value.
A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium — not about setting the value to two or five.
The default value of the slider will be zero or be constrained to the min and max values. The min will be returned if the value is set under the min and the max will be returned if set higher than the max value.
Static methods
Instance variables
True if this field is disabled.
Text to be displayed alongside the component.
The maximum value of the slider.
The minimum value of the slider.
An identifying name for this component.
The difference between two adjacent values of the slider.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the form should be submitted when the slider value changes.
The current value of the slider.
True if the component should be visible. Defaults to True.
The width of the slider, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
SmallSeriesStatCard
Create a small stat card displaying a primary value and a series plot.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Data for this card.
The data field to use for x-axis values (ignored if plot_type
is area
; must be provided if plot_type
is interval
). Defaults to 'x'.
The plot's color.
The plot's curve style. Defaults to linear
. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'. See enum h2o_wave.ui.SmallSeriesStatCardPlotCurve.
The plot's data.
The type of plot. Defaults to area
. One of 'area', 'interval'. See enum h2o_wave.ui.SmallSeriesStatCardPlotType.
The data field to use for y-axis values.
The base value to use for each y-axis mark. Set this to 0
if you want to pin the x-axis at y=0
. If not provided, the minimum value from the data is used.
The card's title.
The primary value displayed.
Methods
dump
Returns the contents of this object as a dict.
SmallSeriesStatCardPlotCurve
Class variables
SmallStatCard
Create a stat card displaying a single value.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Data for this card.
The card's title.
The primary value displayed.
Methods
dump
Returns the contents of this object as a dict.
Spinbox
Create a spinbox.
A spinbox allows the user to incrementally adjust a value in small steps.
Static methods
Instance variables
True if this field is disabled.
Text to be displayed alongside the component.
The maximum value of the spinbox. Defaults to 100.
The minimum value of the spinbox. Defaults to 0.
An identifying name for this component.
The difference between two adjacent values of the spinbox. Defaults to 1.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the form should be submitted when the spinbox value changes.
The current value of the spinbox. Defaults to 0.
True if the component should be visible. Defaults to True.
The width of the spinbox, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
Stat
Create a stat (a label-value pair) for displaying a metric.
Static methods
Instance variables
The caption displayed below the primary value.
An optional icon, displayed next to the label.
The color of the icon.
The label for the metric.
An identifying name for this item.
The value of the metric.
Methods
dump
Returns the contents of this object as a dict.
StatListCard
Render a card displaying a list of stats.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
The individual stats to be displayed.
An optional name for this item.
The subtitle, displayed below the title.
The title.
Methods
dump
Returns the contents of this object as a dict.
StatListItem
Create a stat item (a label-value pair) for stat_list_card.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The auxiliary value, displayed below the primary value.
The caption for the metric, displayed below the label.
An optional icon, displayed next to the label.
The color of the icon.
The label for the metric.
An optional name for this item (required only if this item is clickable).
The primary value of the metric.
The font color of the primary value.
Methods
dump
Returns the contents of this object as a dict.
StatTableCard
Render a card displaying a table of stats.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
The names of this table's columns.
Contextual menu commands for this component.
The rows displayed in this table.
An optional name for this item.
The subtitle, displayed below the title.
The title.
Methods
dump
Returns the contents of this object as a dict.
StatTableItem
Create a stat item (a label and a set of values) for stat_table_card.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The caption for the metric, displayed below the label.
List of colors used for each value in values ordered respectively.
An optional icon, displayed next to the label.
The color of the icon.
The label for the row.
An optional name for this row (required only if this row is clickable).
The values displayed in the row.
Methods
dump
Returns the contents of this object as a dict.
Stats
Create a set of stats laid out horizontally.
Static methods
Instance variables
Whether to display the stats with a contrasting background.
The individual stats to be displayed.
Specifies how to lay out the individual stats. Defaults to 'start'. One of 'start', 'end', 'center', 'between', 'around'. See enum h2o_wave.ui.StatsJustify.
An identifying name for this component.
True if the component should be visible. Defaults to True.
The width of the stats, e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
Step
Create a step for a stepper.
Static methods
Instance variables
Indicates whether this step has already been completed.
Icon to be displayed.
Text displayed below icon.
Methods
dump
Returns the contents of this object as a dict.
Stepper
Create a component that displays a sequence of steps in a process. The steps keep users informed about where they are in the process and how much is left to complete.
Static methods
Instance variables
The sequence of steps to be displayed.
An identifying name for this component.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the component should be visible. Defaults to True.
The width of the stepper, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
Stylesheet
Create a reference to an external CSS file to be included on a page.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The CORS setting. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-crossorigin
A valid media query to set conditions for when the stylesheet should be loaded. More info at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-media.
The URI of an external stylesheet.
Methods
dump
Returns the contents of this object as a dict.
Tab
Create a tab.
Static methods
Instance variables
The icon displayed on the tab.
The text displayed on the tab.
An identifying name for this component.
Methods
dump
Returns the contents of this object as a dict.
TabCard
Create a card containing tabs for navigation.
Static methods
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
The tabs to display in this card
True if tabs should be rendered as links instead of buttons.
An optional name for the card. If provided, the selected tab can be accessed using the name of the card.
The name of the tab to select.
Methods
dump
Returns the contents of this object as a dict.
Table
Create an interactive table.
This table differs from a markdown table in that it supports clicking or selecting rows. If you simply want to display a non-interactive table of information, use a markdown table.
If multiple
is set to False (default), each row in the table is clickable. When a cell in the column with link=True
(defaults to first column) is clicked or the row is doubleclicked, the form is submitted automatically, and q.args.table_name
is set to [row_name]
, where table_name
is the name
of the table, and row_name
is the name
of the row that was clicked on.
If multiple
is set to True, each row in the table is selectable. A row can be selected by clicking on it. Multiple rows can be selected either by shift+clicking or using marquee selection. When the form is submitted,q.args.table_name
is set to [row1_name, row2_name, …]
where table_name
is the name
of the table, and row1_name
, row2_name
are the name
of the rows that were selected. Note that if multiple
is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.
If pagination
is set, you have to handle search/filter/sort/download/page_change/reset events yourself since none of these features will work automatically like in non-paginated table.
Static methods
Instance variables
Controls visibility of table rows when multiple
is set to True
. Defaults to 'on-hover'. One of 'always', 'on-hover', 'hidden'. See enum h2o_wave.ui.TableCheckboxVisibility.
The columns in this table.
Indicates whether the table rows can be downloaded as a CSV file. Defaults to False.
The events to capture on this table. When pagination is set, one of 'search' | 'sort' | 'filter' | 'download' | 'page_change' | 'reset'. These events are available regardless of pagination: 'select' | 'group_change'.
True to allow group by feature.
Creates collapsible / expandable groups of data rows. Mutually exclusive with rows
attr.
The height of the table in px (e.g. '200px') or '1' to fill the remaining card space.
True to allow multiple rows to be selected. Mutually exclusive with single
attr.
An identifying name for this component.
Display a pagination control at the bottom of the table. Set this value using ui.table_pagination()
.
Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.
The rows in this table. Mutually exclusive with groups
attr.
True to allow only one row to be selected at time. Mutually exclusive with multiple
attr.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
The name of the selected row. If this parameter is set, single selection will be allowed (single
is assumed to be True
).
The names of the selected rows. If this parameter is set, multiple selections will be allowed (multiple
is assumed to be True
).
True if the component should be visible. Defaults to True.
The width of the table, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
TableCellType
Defines cell content to be rendered instead of a simple text.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Renders an icon.
Renders text using markdown.
Renders a command menu.
Renders a progress arc with a percentage value in the middle.
Renders one or more tags.
Methods
dump
Returns the contents of this object as a dict.
TableCheckboxVisibility
TableColumn
Create a table column.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Defines how to align values in a column. One of 'left', 'center', 'right'. See enum h2o_wave.ui.TableColumnAlign.
Defines what to do with a cell's contents in case it does not fit inside the cell. One of 'tooltip', 'wrap'. See enum h2o_wave.ui.TableColumnCellOverflow.
Defines how to render each cell in this column. Renders as plain text by default.
Defines the data type of this column. Time column takes either ISO 8601 date string or unix epoch miliseconds. Defaults to string
. One of 'string', 'number', 'time'. See enum h2o_wave.ui.TableColumnDataType.
Indicates whether the contents of this column are displayed as filters in a dropdown.
Explicit list of values to allow filtering by, needed when pagination is set or custom order is needed. Only applicable to filterable columns.
The text displayed on the column header.
Indicates whether each cell in this column should be displayed as a clickable link. Applies to exactly one text column in the table.
The maximum width of this column, e.g. '100px'. Only px
units are supported at this time.
The minimum width of this column, e.g. '50px'. Only px
units are supported at this time.
An identifying name for this column.
Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.
Indicates whether the column is sortable.
Methods
dump
Returns the contents of this object as a dict.
TableGroup
Make rows within the table collapsible/expandable.
This type of table is best used for cases when your data makes sense to be presented in chunks rather than a single flat list.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Indicates whether the table group should be collapsed by default. Defaults to True.
The title of the group.
The rows in this group.
Methods
dump
Returns the contents of this object as a dict.
TablePagination
Configure table pagination. Use as pagination
parameter to ui.table()
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The maximum amount of rows to be displayed in a single page.
Total count of all the rows in your dataset.
Methods
dump
Returns the contents of this object as a dict.
TableRow
Tabs
Create a tab bar.
Static methods
Instance variables
The tabs in this tab bar.
True if tabs should be rendered as links instead of buttons.
An identifying name for this component.
The name of the tab to select initially.
True if the component should be visible. Defaults to True.
The width of the tabs, e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
Tag
Create a tag.
Static methods
Instance variables
Tag's background color.
The text displayed within the tag.
Tag's label color. If not specified, black or white will be picked based on correct contrast with background.
Methods
dump
Returns the contents of this object as a dict.
TagTableCellType
Creates a collection of tags, usually used for rendering state values. In case of multiple tags per row, make sure the row values are separated by "," within a single cell string. E.g. ui.table_row(name="…", cells=["cell1", "TAG1,TAG2"]). Each value should correspond to a ui.tag.label
attr. For the example above: [ ui.tag(label="TAG1", color="red"), ui.tag(label="TAG2", color="green"), ]
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
An identifying name for this component.
Tags to be rendered.
Methods
dump
Returns the contents of this object as a dict.
Tags
TallArticlePreviewCard
Create a tall article preview card.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Markdown text.
The card’s background image URL, either a base64-encoded image, a path to an image hosted externally (starting with https://
or http://
) or a path to an image hosted on the Wave daemon (starting with /
)
Components displayed in the body of the card.
An identifying name for this card. Makes the card clickable, similar to a button.
The card's subtitle, displayed below the title.
The card's title.
The value displayed to the right of the title/subtitle.
Methods
dump
Returns the contents of this object as a dict.
TallGaugeStatCard
Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The auxiliary value displayed next to the primary value.
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Data for this card.
The color of the progress gauge.
The value of the progress gauge, between 0 and 1.
The card's title.
The primary value displayed.
Methods
dump
Returns the contents of this object as a dict.
TallInfoCard
Create a tall information card displaying a title, caption and either an icon or image.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
The card's caption, displayed below the title. Supports markdown.
The card's category, displayed below the title.
Contextual menu commands for this component.
The card's icon.
The card’s image.
The card’s image height in px. Defaults to '150px'.
Label of a button rendered at the bottom of the card. If specified, whole card is not clickable anymore.
An identifying name for this card. Makes the card clickable only if name is not empty and label is empty
The card's title.
Methods
dump
Returns the contents of this object as a dict.
TallSeriesStatCard
Create a tall stat card displaying a primary value, an auxiliary value and a series plot.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The auxiliary value displayed below the primary value.
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Data for this card.
The data field to use for x-axis values (ignored if plot_type
is area
; must be provided if plot_type
is interval
). Defaults to 'x'.
The plot's color.
The plot's curve style. Defaults to linear
. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'. See enum h2o_wave.ui.TallSeriesStatCardPlotCurve.
The plot's data.
The type of plot. Defaults to area
. One of 'area', 'interval'. See enum h2o_wave.ui.TallSeriesStatCardPlotType.
The data field to use for y-axis values.
The base value to use for each y-axis mark. Set this to 0
if you want to pin the x-axis at y=0
. If not provided, the minimum value from the data is used.
The card's title.
The primary value displayed.
Methods
dump
Returns the contents of this object as a dict.
TallSeriesStatCardPlotCurve
Class variables
TallStatsCard
Create a vertical label-value pairs collection. Icon in ui.stat
is not yet supported in this card.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
The individual stats to be displayed.
An identifying name for this component.
Methods
dump
Returns the contents of this object as a dict.
Template
Render dynamic content using an HTML template.
Static methods
Instance variables
The Handlebars template. https://handlebarsjs.com/guide/
Data for the Handlebars template
An identifying name for this component.
True if the component should be visible. Defaults to True.
The width of the template, e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
TemplateCard
Render dynamic content using an HTML template.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
The Handlebars template. https://handlebarsjs.com/guide/
Data for the Handlebars template.
The title for this card.
Methods
dump
Returns the contents of this object as a dict.
Text
Create text content.
Static methods
Instance variables
The alignment of the text content. Defaults to 'start'. One of 'start', 'end', 'center', 'justify'. See enum h2o_wave.ui.TextAlign.
The text content.
An identifying name for this component.
The font size of the text content. One of 'xl', 'l', 'm', 's', 'xs'. See enum h2o_wave.ui.TextSize.
Tooltip message.
True if the component should be visible. Defaults to True.
The width of the text , e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
TextAnnotator
Create a text annotator component.
The text annotator component enables user to manually annotate parts of text. Useful for NLP data prep.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Pretagged parts of text content.
An identifying name for this component.
True to prevent user interaction with the annotator component. Defaults to False.
List of tags the user can annotate with.
The text annotator's title.
True if the form should be submitted when the annotator value changes.
Methods
dump
Returns the contents of this object as a dict.
TextAnnotatorItem
Create an annotator item with initial selected tags or no tag for plaintext.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The name
of the text annotator tag to refer to for the label
and color
of this item.
Text to be highlighted.
Methods
dump
Returns the contents of this object as a dict.
TextAnnotatorTag
Create a tag.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
HEX or RGB color string used as background for highlighted phrases.
Text to be displayed for this tag.
An identifying name for this component.
Methods
dump
Returns the contents of this object as a dict.
TextL
Create large sized text content.
Static methods
Instance variables
The alignment of the text content. Defaults to 'start'. One of 'start', 'end', 'center', 'justify'. See enum h2o_wave.ui.TextLAlign.
Contextual menu commands for this component.
The text content.
An identifying name for this component.
Tooltip message.
True if the component should be visible. Defaults to True.
The width of the text , e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
TextM
Create medium sized text content.
Static methods
Instance variables
The alignment of the text content. Defaults to 'start'. One of 'start', 'end', 'center', 'justify'. See enum h2o_wave.ui.TextMAlign.
The text content.
An identifying name for this component.
Tooltip message.
True if the component should be visible. Defaults to True.
The width of the text , e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
TextS
Create small sized text content.
Static methods
Instance variables
The alignment of the text content. Defaults to 'start'. One of 'start', 'end', 'center', 'justify'. See enum h2o_wave.ui.TextSAlign.
The text content.
An identifying name for this component.
Tooltip message.
True if the component should be visible. Defaults to True.
The width of the text , e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
TextXl
Create extra-large sized text content.
Static methods
Instance variables
The alignment of the text content. Defaults to 'start'. One of 'start', 'end', 'center', 'justify'. See enum h2o_wave.ui.TextXlAlign.
Contextual menu commands for this component.
The text content.
An identifying name for this component.
Tooltip message.
True if the component should be visible. Defaults to True.
The width of the text , e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
TextXs
Create extra-small sized text content.
Static methods
Instance variables
The alignment of the text content. Defaults to 'start'. One of 'start', 'end', 'center', 'justify'. See enum h2o_wave.ui.TextXsAlign.
The text content.
An identifying name for this component.
Tooltip message.
True if the component should be visible. Defaults to True.
The width of the text , e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
Textbox
Create a text box.
The text box component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.
Static methods
Instance variables
True if the text box is disabled.
Text to be displayed as an error below the text box.
The height of the text box, e.g. '100px'. Percentage values not supported. Applicable only if multiline
is true.
Icon displayed in the far right end of the text field.
The text displayed above the field.
The masking string that defines the mask's behavior. A backslash will escape any character. Special format characters are: '9': [0-9] 'a': [a-zA-Z] '*': [a-zA-Z0-9].
True if the text box should allow multi-line text entry.
An identifying name for this component.
True if the text box should hide text content.
A string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message.
Text to be displayed before the text box contents.
True if the text box is a read-only field.
True if the text box is a required field.
True if the text may be checked for spelling errors. Defaults to True.
Text to be displayed after the text box contents.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the form should be submitted when the text value changes.
Keyboard to be shown on mobile devices. Defaults to 'text'. One of 'text', 'number', 'tel'. See enum h2o_wave.ui.TextboxType.
Text to be displayed inside the text box.
True if the component should be visible. Defaults to True.
The width of the text box, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
Theme
Theme (color scheme) to apply colors to the app.
Static methods
Instance variables
Card background color.
An identifying name for this theme.
Page background color.
Primary color used to accent components.
Base color of the textual components.
Methods
dump
Returns the contents of this object as a dict.
TimePicker
Create a time picker.
A time picker allows a user to pick a time value.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
True if this field is disabled.
Specifies 12-hour or 24-hour time format. One of 12
or 24
. Defaults to 12
.
Text to be displayed alongside the component.
The maximum allowed time value in hh:mm format. E.g.: '15:30', '00:00'
The minimum allowed time value in hh:mm format. E.g.: '08:00', '13:30'
Limits the available minutes to select from. One of 1
, 5
, 10
, 15
, 20
, 30
or 60
. Defaults to 1
.
An identifying name for this component.
A string that provides a brief hint to the user as to what kind of information is expected in the field.
True if this is a required field. Defaults to False.
True if the form should be submitted when the time is selected.
The time value in hh:mm format. E.g. '10:30', '14:25', '23:59', '00:00'
True if the component should be visible. Defaults to True.
The width of the time picker, e.g. '100px'. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
Toggle
Create a toggle. Toggles represent a physical switch that allows users to turn things on or off. Use toggles to present users with two mutually exclusive options (like on/off), where choosing an option results in an immediate action.
Use a toggle for binary operations that take effect right after the user flips the Toggle. For example, use a Toggle to turn services or hardware components on or off. In other words, if a physical switch would work for the action, a Toggle is probably the best component to use.
Static methods
Instance variables
True if the checkbox is disabled.
Text to be displayed alongside the component.
An identifying name for this component.
An optional tooltip message displayed when a user clicks the help icon to the right of the component.
True if the form should be submitted when the toggle value changes.
True if selected, False if unselected.
True if the component should be visible. Defaults to True.
The width of the toggle, e.g. '100px'.
Methods
dump
Returns the contents of this object as a dict.
ToolbarCard
Create a card containing a toolbar.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Items to render.
Items to render in an overflow menu.
Items to render on the right side (or left, in RTL).
Methods
dump
Returns the contents of this object as a dict.
Tracker
Configure user interaction tracking (analytics) for a page.
Static methods
Instance variables
The tracking ID or measurement ID.
The tracking provider. Supported providers are ga
(Google Analytics) and gtag
(Google Global Site Tags or gtag.js) One of 'ga', 'gtag'. See enum h2o_wave.ui.TrackerType.
Methods
dump
Returns the contents of this object as a dict.
VegaCard
Create a card containing a Vega-lite plot.
Static methods
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Data for the plot, if any.
Vega grammar to use. Defaults to 'vega-lite'. One of 'vega-lite', 'vega'. See enum h2o_wave.ui.VegaCardGrammar.
The Vega-lite specification.
The title of this card.
Methods
dump
Returns the contents of this object as a dict.
VegaVisualization
Create a Vega-lite plot for display inside a form.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
Data for the plot, if any.
Vega grammar to use. Defaults to 'vega-lite'. One of 'vega-lite', 'vega'. See enum h2o_wave.ui.VegaVisualizationGrammar.
The height of the visualization. Defaults to '300px'.
An identifying name for this component.
The Vega-lite specification.
True if the component should be visible. Defaults to True.
The width of the visualization. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
Visualization
Create a visualization for display inside a form.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
EXPERIMENTAL: True to turn on the chart animations. Defaults to False.
Data for this visualization.
The events to capture on this visualization. One of 'select_marks'.
The hight of the visualization. Defaults to '300px'.
The interactions to be allowed for this plot. One of 'drag_move' | 'scale_zoom' | 'brush'. Note: brush
does not raise select_marks
event.
An identifying name for this component.
The plot to be rendered in this visualization.
True if the component should be visible. Defaults to True.
The width of the visualization. Defaults to '100%'.
Methods
dump
Returns the contents of this object as a dict.
WideArticlePreviewCard
Create a wide article preview card displaying a persona, image, title, caption, and optional buttons.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The card's auxiliary text, displayed on the right-hand side of the header.
A string indicating how to place this component on the page.
Contextual menu commands for this component.
The card's markdown content, displayed below the title on the right-hand side.
The card’s image displayed on the left-hand side.
The card's buttons, displayed under the caption.
An identifying name for this card. Makes the card clickable, similar to a button.
The card's user avatar, 'size' prop is restricted to 'xs'.
The card's title on the right-hand side
Methods
dump
Returns the contents of this object as a dict.
WideBarStatCard
Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The auxiliary value displayed next to the primary value.
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Data for this card.
The color of the progress bar.
The value of the progress bar, between 0 and 1.
The card's title.
The primary value displayed.
Methods
dump
Returns the contents of this object as a dict.
WideGaugeStatCard
Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The auxiliary value displayed next to the primary value.
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Data for this card.
The color of the progress gauge.
The value of the progress gauge, between 0 and 1.
The card's title.
The primary value displayed.
Methods
dump
Returns the contents of this object as a dict.
WideInfoCard
Create a wide information card displaying a title, caption, and either an icon or image.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The card's alignment, determines the position of an image / icon. Defaults to 'left'. One of 'left', 'right'. See enum h2o_wave.ui.WideInfoCardAlign.
A string indicating how to place this component on the page.
The card's caption, displayed below the subtitle. Supports markdown.
The card's category, displayed above the title.
Contextual menu commands for this component.
The card's icon.
The card’s image.
Label of a button rendered at the bottom of the card. If specified, whole card is not clickable anymore..
An identifying name for this card. Makes the card clickable, similar to a button.
The card's subtitle, displayed below the title.
The card's title.
Methods
dump
Returns the contents of this object as a dict.
WidePieStatCard
Create a wide pie stat card displaying a title and pie chart with legend.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
Contextual menu commands for this component.
The pies to be included in the pie chart.
The card's title.
Methods
dump
Returns the contents of this object as a dict.
WidePlotCard
Create a wide plot card displaying a title, caption and a plot.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
A string indicating how to place this component on the page.
The card's caption, displayed below the title.
Contextual menu commands for this component.
The card's plot data.
The card's plot.
The card's title.
Methods
dump
Returns the contents of this object as a dict.
WideSeriesStatCard
Create a wide stat card displaying a primary value, an auxiliary value and a series plot.
Static methods
load
Creates an instance of this class using the contents of a dict.
Instance variables
The auxiliary value displayed below the primary value.
A string indicating how to place this component on the page.
Contextual menu commands for this component.
Data for this card.
The data field to use for x-axis values (ignored if plot_type
is area
; must be provided if plot_type
is interval
). Defaults to 'x'.
The plot's color.
The plot's curve style. Defaults to linear
. One of 'linear', 'smooth', 'step', 'step-after', 'step-before'. See enum h2o_wave.ui.WideSeriesStatCardPlotCurve.
The plot's data.
The type of plot. Defaults to area
. One of 'area', 'interval'. See enum h2o_wave.ui.WideSeriesStatCardPlotType.
The data field to use for y-axis values.
The base value to use for each y-axis mark. Set this to 0
if you want to pin the x-axis at y=0
. If not provided, the minimum value from the data is used.
The card's title.
The primary value displayed.
Methods
dump
Returns the contents of this object as a dict.
WideSeriesStatCardPlotCurve
Class variables
Zone
Represents an zone within a page layout.
Static methods
Instance variables
Layout strategy for cross axis. One of 'start', 'end', 'center', 'stretch'. See enum h2o_wave.ui.ZoneAlign.
Layout direction. One of 'row', 'column'. See enum h2o_wave.ui.ZoneDirection.
Layout strategy for main axis. One of 'start', 'end', 'center', 'between', 'around'. See enum h2o_wave.ui.ZoneJustify.
An identifying name for this zone.
The size of this zone.
Wrapping strategy. One of 'start', 'end', 'center', 'between', 'around', 'stretch'. See enum h2o_wave.ui.ZoneWrap.
The sub-zones contained inside this zone.
Methods
dump
Returns the contents of this object as a dict.